SvelteKit
Laden und bereinigen Sie den einbettbaren Agent im Browser-Lebenszyklus eines SvelteKit-Layouts.
Laden und bereinigen Sie den einbettbaren Agent im Browser-Lebenszyklus eines SvelteKit-Layouts.
Origin vorbereiten#
Aktivieren Sie für den Agent die Option Auf meiner Website anzeigen (Agent-Seite → Live schalten → Website-Widget) und tragen Sie unter Zulässige Website-Adressen jede exakte SvelteKit-Origin für Entwicklung, Vorschau und Produktion ein. Verwenden Sie ein Root-Layout für einen websiteweiten Launcher oder eine verschachtelte Layout-/Seitenkomponente für ausgewählte Routen.
Komponente erstellen#
onMount wird nur im Browser ausgeführt. Geben Sie eine Cleanup-Funktion zurück, wenn das zugehörige Layout bzw. die Komponente unmounted werden kann.
<script lang="ts">
import { onMount } from "svelte";
const slug = "YOUR_SITE_SLUG";
onMount(() => {
if (document.getElementById(`maf-embed-root-${slug}`)) return;
const script = document.createElement("script");
script.id = "maf-agent";
script.src = "https://makeagent.fast/embed.js?v=20261022-open";
script.dataset.agent = slug;
script.dataset.position = "right";
script.async = true;
document.body.appendChild(script);
return () => {
script.remove();
document.getElementById(`maf-embed-root-${slug}`)?.remove();
};
});
</script>Binden Sie die Komponente einmalig in src/routes/+layout.svelte für die gesamte Anwendung ein. Platzieren Sie sie bei einer Routengruppe in der +layout.svelte dieser Gruppe; das Cleanup entfernt den Launcher, sobald der Besucher die Gruppe verlässt.
Konfiguration sicher verwenden#
Der öffentliche Website-Slug kann ein öffentlicher SvelteKit-Umgebungswert sein, da er keine Zugangsdaten darstellt. Verwenden Sie weder $env/static/public noch Browsercode für MAF-API-Schlüssel, Schlüssel von KI-Anbietern oder Connector-Secrets. Halten Sie diese in reinen Server-Modulen bzw. Server-Routen.
Konversationsstatus beibehalten oder zurücksetzen#
Wenn die Komponente im Root-Layout bleibt, bleibt dasselbe iframe über die clientseitige Navigation hinweg erhalten. Ein routenbezogenes Cleanup verwirft dieses iframe und seinen aktuellen Status auf der Seite bewusst. Entscheiden Sie sich für ein Verhalten, anstatt die Komponente bei jeder Seite neu zu mounten.
Produktions-Build prüfen#
- Führen Sie den SvelteKit-Adapter bzw. Build für die Produktion aus.
- Laden Sie die öffentliche Route direkt und prüfen Sie, dass genau ein Launcher bzw. Root vorhanden ist.
- Navigieren Sie in das zugehörige Layout hinein und wieder heraus.
- Prüfen Sie Network/CSP und die exakte übergeordnete Origin.
- Testen Sie eine echte Nachricht, einen schmalen Viewport und, sofern aktiviert, das Mikrofon.
Fehlerbehebung#
| Symptom | Lösung |
|---|---|
document-Fehler beim SSR | Halten Sie den gesamten Loader-Code innerhalb von onMount |
| Launcher bleibt nach dem Verlassen des Layouts bestehen | Geben Sie ein Cleanup zurück und entfernen Sie den erzeugten Root |
| Konversation wird bei jeder Seite zurückgesetzt | Mounten Sie die Komponente in einem persistenten übergeordneten +layout.svelte |
| Schutz vor doppeltem Launcher verhindert neues Mounten | Stellen Sie sicher, dass das vorherige Cleanup den alten Root entfernt hat, bevor Sie ein neues Skript hinzufügen |
| Fehler nur in der Produktion | Setzen Sie die endgültige HTTPS-Origin auf die Allowlist und prüfen Sie die CSP-Header des Adapters |
Derzeit ist kein npm-SvelteKit-Adapter veröffentlicht; das gehostete Skript ist die unterstützte Integrationsschnittstelle.