SvelteKit

Prepara el origen#

Activa Mostrarlo en mi sitio web para el agente (página del agente → Ponerlo en marcha → Widget para sitio web) y añade cada origen exacto de SvelteKit de desarrollo, vista previa y producción en Direcciones de sitio web permitidas. Usa un layout raíz para un lanzador en todo el sitio, o un layout o componente de página anidado para rutas concretas.

Crea el componente#

onMount se ejecuta solo en el navegador. Devuelve una función de limpieza cuando el layout o componente que lo contiene pueda desmontarse.

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

Monta el componente una sola vez desde src/routes/+layout.svelte para toda la aplicación. Para un grupo de rutas, colócalo en el +layout.svelte de ese grupo; la limpieza elimina el lanzador cuando el visitante sale del grupo.

Usa la configuración de forma segura#

El slug público del sitio puede ser un valor de entorno público de SvelteKit porque no es una credencial. No uses $env/static/public ni código del navegador para las claves de API de MAF, las claves de proveedores de IA ni los secretos de los conectores. Guárdalos en módulos o rutas exclusivos del servidor.

Conserva o restablece el estado de la conversación#

Mantener el componente en el layout raíz conserva el mismo iframe entre navegaciones del lado del cliente. La limpieza por ruta descarta deliberadamente ese iframe y su estado actual en la página. Elige un único comportamiento en lugar de volver a montar el componente en cada página.

Verifica la compilación de producción#

1. Ejecuta el adaptador o la compilación de producción de SvelteKit.
2. Carga directamente la ruta pública y confirma que hay un único lanzador/raíz.
3. Navega hacia dentro y hacia fuera del layout que lo contiene.
4. Inspecciona la red/CSP y el origen exacto del sitio padre.
5. Prueba un mensaje real, una ventana de visualización estrecha y el micrófono, si está activado.

Solución de problemas#

Actualmente no se publica ningún adaptador de SvelteKit en npm; el script alojado es la superficie de integración compatible.