Astro

Préparer l'origine de déploiement#

Activez Afficher sur mon site web pour l'agent Make Agent Fast (page de l'agent → Mettre en ligne → Widget du site web), puis ajoutez les origines exactes de développement, de prévisualisation et de production Astro sous Adresses de site web autorisées. Ce qui compte, c'est le schéma, le nom d'hôte et le port finaux affichés dans le navigateur, et non l'hôte de build ni l'URL du dépôt.

Ajouter à un layout partagé#

Placez le loader externe standard juste avant </body> dans le layout Astro qui doit gérer le lanceur.

---
// 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 indique à Astro de conserver la balise de script externe et ses attributs data-* au lieu de les regrouper ou de les transformer. Le loader reste public et indépendant du framework ; ne l'importez pas dans un module serveur.

Limiter à certaines pages#

Utilisez un layout imbriqué ou incluez la balise uniquement dans certaines pages .astro. Évitez de placer la même balise à la fois dans un layout de base et dans une page. Le loader ignore une racine en double avec le même slug, mais le HTML dupliqué rend la navigation et le démontage difficiles à prévoir.

Si les transitions de vue côté client d'Astro sont activées, testez les chargements directs de page ainsi que la navigation interne. Pour un agent présent sur tout le site, un layout partagé persistant est préférable. Pour un comportement propre à certaines routes, supprimez à la fois le script et maf-embed-root-YOUR_SITE_SLUG lorsque vous quittez la route, avant d'insérer ultérieurement un nouveau script.

Configurer la CSP et le consentement#

Les en-têtes de l'hébergement statique continuent de contrôler le navigateur. Autorisez https://makeagent.fast dans script-src, frame-src et la politique de connexion concernée. Si un gestionnaire de consentement bloque le script, chargez la balise uniquement après obtention du consentement requis, plutôt que d'affaiblir la CSP ou de contourner le consentement.

Vérifier le résultat du build#

1. Lancez le build de production d'Astro et inspectez le HTML généré pour vérifier que la balise data-agent est conservée.
2. Ouvrez la page déployée dans une fenêtre privée.
3. Vérifiez qu'il n'y a qu'une seule racine d'intégration et que les requêtes du loader et de l'iframe réussissent.
4. Naviguez entre les routes Astro et vérifiez que la persistance correspond à ce que vous attendez.
5. Envoyez un vrai message et testez le comportement sur mobile ainsi que le microphone.

Dépannage#

Aucun adaptateur npm pour Astro n'est actuellement publié ; utilisez le loader hébergé présenté ici.