Astro

Bereitstellungs-Origin vorbereiten#

Aktivieren Sie für den Make Agent Fast Agent die Option Auf meiner Website anzeigen (Agent-Seite → Live schalten → Website-Widget) und tragen Sie unter Erlaubte Website-Adressen die exakten Astro-Origins für Entwicklung, Vorschau und Produktion ein. Entscheidend sind Schema, Hostname und Port, wie sie im Browser erscheinen, nicht der Build-Host oder die Repository-URL.

Zu einem gemeinsamen Layout hinzufügen#

Platzieren Sie den standardmäßigen externen Loader direkt vor </body> in dem Astro-Layout, das den Launcher verwalten soll.

---
// src/layouts/BaseLayout.astro
---

<html lang="en">
  <body>
    <slot />

    <script
      is:inline
      src="https://makeagent.fast/embed.js?v=20261022-open"
      data-agent="YOUR_SITE_SLUG"
      data-position="right"
      data-label="Ask us"
      async
    ></script>
  </body>
</html>

is:inline weist Astro an, das externe Script-Tag samt seiner data-*-Attribute beizubehalten, statt es zu bündeln oder zu transformieren. Der Loader bleibt öffentlich und Framework-unabhängig; importieren Sie ihn nicht in ein Servermodul.

Auf ausgewählte Seiten beschränken#

Verwenden Sie ein verschachteltes Layout oder binden Sie das Tag nur in ausgewählten .astro-Seiten ein. Vermeiden Sie es, dasselbe Tag sowohl in einem Basis-Layout als auch in einer Seite zu platzieren. Der Loader ignoriert ein doppeltes Root-Element mit demselben Slug, doch das doppelte HTML erschwert es, Navigation und Abbau nachzuvollziehen.

Wenn clientseitige View Transitions von Astro aktiviert sind, testen Sie sowohl direkte Seitenaufrufe als auch die Navigation innerhalb der App. Für einen websiteweiten Agent empfiehlt sich ein persistentes gemeinsames Layout. Für routenspezifisches Verhalten entfernen Sie beim Verlassen der Route sowohl das Script als auch maf-embed-root-YOUR_SITE_SLUG, bevor Sie später ein neues Script einfügen.

CSP und Einwilligung konfigurieren#

Die Header Ihres statischen Hostings steuern weiterhin das Verhalten des Browsers. Erlauben Sie https://makeagent.fast in script-src, frame-src und der jeweils relevanten Verbindungsrichtlinie. Wenn ein Consent-Manager das Script blockiert, laden Sie das Tag erst nach der erforderlichen Einwilligung, statt die CSP abzuschwächen oder die Einwilligung zu umgehen.

Gebaute Ausgabe überprüfen#

1. Führen Sie den Astro-Produktions-Build aus und prüfen Sie im erzeugten HTML, dass das Tag mit data-agent erhalten geblieben ist.
2. Öffnen Sie die bereitgestellte Seite in einem privaten Fenster.
3. Vergewissern Sie sich, dass es genau ein Embed-Root gibt und die Anfragen für Loader und iframe erfolgreich sind.
4. Navigieren Sie über mehrere Astro-Routen und prüfen Sie, ob die Persistenz wie vorgesehen funktioniert.
5. Senden Sie eine echte Nachricht und testen Sie das Verhalten auf Mobilgeräten sowie die Mikrofonfunktion.

Fehlerbehebung#

Derzeit ist kein npm-Astro-Adapter veröffentlicht; verwenden Sie den hier gezeigten gehosteten Loader.