Astro

Prepara el origen de despliegue#

Activa Mostrarlo en mi sitio web para el agente de Make Agent Fast (página del agente → Ponlo en marcha → Widget para sitio web) y añade los orígenes exactos de desarrollo, vista previa y producción de Astro en Direcciones de sitio web permitidas. Lo que importa es el esquema, el nombre de host y el puerto finales que se ven en el navegador, no el host de compilación ni la URL del repositorio.

Añádelo a un layout compartido#

Coloca el cargador externo estándar justo antes de </body> en el layout de Astro que deba encargarse del lanzador.

---
// 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 le indica a Astro que conserve la etiqueta de script externa y sus atributos data-* en lugar de empaquetarla o transformarla. El cargador sigue siendo público e independiente del framework; no lo importes en un módulo de servidor.

Limítalo a páginas seleccionadas#

Usa un layout anidado o incluye la etiqueta solo en determinadas páginas .astro. Evita colocar la misma etiqueta tanto en un layout base como en una página. El cargador ignora una raíz duplicada con el mismo slug, pero el HTML duplicado dificulta entender la navegación y el desmontaje.

Si las transiciones de vista del lado del cliente de Astro están activadas, prueba tanto las cargas directas de página como la navegación dentro de la aplicación. Para un agente en todo el sitio, es preferible un layout compartido persistente. Para un comportamiento específico por ruta, elimina tanto el script como maf-embed-root-YOUR_SITE_SLUG al salir de la ruta, antes de insertar un script nuevo más adelante.

Configura CSP y consentimiento#

Las cabeceras del alojamiento estático siguen controlando el navegador. Permite https://makeagent.fast en script-src, frame-src y en la política de conexión correspondiente. Si un gestor de consentimiento bloquea el script, carga la etiqueta solo después de obtener el consentimiento necesario, en lugar de debilitar la CSP o eludir el consentimiento.

Verifica el resultado compilado#

1. Ejecuta la compilación de producción de Astro e inspecciona el HTML generado para comprobar que se conserva la etiqueta con data-agent.
2. Abre la página desplegada en una ventana privada.
3. Confirma que hay una sola raíz de incrustación y que las solicitudes del cargador y del iframe se completan correctamente.
4. Navega entre rutas de Astro y confirma que la persistencia es la esperada.
5. Envía un mensaje real y prueba el comportamiento en móvil y con el micrófono.

Solución de problemas#

Actualmente no se publica ningún adaptador de Astro en npm; usa el cargador alojado que se muestra aquí.