SvelteKit

Préparer l'origine#

Activez Afficher sur mon site web pour l'agent (page de l'agent → Mettre en ligne → Widget de site web), puis ajoutez chaque origine exacte SvelteKit de développement, de prévisualisation et de production sous Adresses de site web autorisées. Utilisez un layout racine pour un lanceur disponible sur l'ensemble du site, ou un layout/composant de page imbriqué pour des routes précises.

Créer le composant#

onMount ne s'exécute que dans le navigateur. Renvoyez une fonction de nettoyage lorsque le layout ou le composant parent peut être démonté.

<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>

Montez le composant une seule fois depuis src/routes/+layout.svelte pour toute l'application. Pour un groupe de routes, placez-le dans le +layout.svelte de ce groupe ; le nettoyage supprime le lanceur lorsque le visiteur quitte le groupe.

Utiliser la configuration en toute sécurité#

Le slug public du site peut être une valeur d'environnement publique de SvelteKit, car il ne s'agit pas d'un identifiant secret. N'utilisez pas $env/static/public ni du code côté navigateur pour les clés API MAF, les clés de fournisseur d'IA ou les secrets des connecteurs. Conservez-les dans des modules ou des routes réservés au serveur.

Conserver ou réinitialiser l'état de la conversation#

Si vous gardez le composant dans le layout racine, la même iframe est conservée lors de la navigation côté client. Un nettoyage limité à une route supprime volontairement cette iframe et son état en cours dans la page. Choisissez un seul comportement plutôt que de remonter le composant à chaque page.

Vérifier le build de production#

1. Exécutez l'adaptateur/le build de production de SvelteKit.
2. Chargez directement la route publique et vérifiez qu'il n'y a qu'un seul lanceur/une seule racine.
3. Naviguez vers le layout concerné, puis en dehors.
4. Inspectez le réseau/la CSP et l'origine parente exacte.
5. Testez un vrai message, une fenêtre d'affichage étroite et le microphone s'il est activé.

Dépannage#

Aucun adaptateur npm SvelteKit n'est actuellement publié ; le script hébergé est la seule interface d'intégration prise en charge.