Vue et Nuxt

Préparer l’intégration#

Activez Afficher sur mon site web pour l’agent (page de l’agent → Mettre en ligne → Widget de site web), puis ajoutez l’origine exacte de vos déploiements local, de prévisualisation et de production sous Adresses de site web autorisées. Déterminez si l’agent doit être présent dans toute l’application ou uniquement dans certains composants de route.

Plugin Nuxt pour tout le site#

Créez un plugin .client.ts afin qu’aucun code DOM ne s’exécute pendant le rendu côté serveur. Nuxt le charge une seule fois dans le navigateur, ce qui garde le lanceur et la conversation stables lors de la navigation côté client.

// plugins/make-agent-fast.client.ts
const slug = "YOUR_SITE_SLUG";

export default defineNuxtPlugin(() => {
  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.dataset.label = "Ask us";
  script.async = true;
  document.body.appendChild(script);
});

Ne placez aucun secret dans runtimeConfig.public : seuls le slug public du site et les paramètres visuels ont leur place dans le navigateur. Les véritables clés d’API/de fournisseur MAF restent dans la configuration d’exécution privée du serveur.

Le plugin pour tout le site n’a volontairement aucun nettoyage au démontage : il suit la durée de vie de l’application Nuxt. Pendant le remplacement à chaud des modules (HMR) en développement, une racine précédente peut subsister jusqu’à un rechargement complet ; la protection par racine empêche l’apparition d’un second lanceur. Vérifiez le comportement final avec un build de production propre plutôt qu’en modifiant le plugin à répétition dans un même onglet resté ouvert longtemps.

Composant Vue limité à certaines routes#

Pour certaines routes, montez le script dans onMounted et supprimez à la fois le script et la racine générée dans onBeforeUnmount.

<script setup lang="ts">
import { onBeforeUnmount, onMounted } from "vue";

const slug = "YOUR_SITE_SLUG";
let script: HTMLScriptElement | null = null;

onMounted(() => {
  if (document.getElementById(`maf-embed-root-${slug}`)) return;
  script = document.createElement("script");
  script.id = "maf-agent";
  script.src = "https://makeagent.fast/embed.js?v=20261022-open";
  script.dataset.agent = slug;
  script.async = true;
  document.body.appendChild(script);
});

onBeforeUnmount(() => {
  script?.remove();
  document.getElementById(`maf-embed-root-${slug}`)?.remove();
});
</script>

Utilisez un seul composant responsable. Plusieurs composants avec des slugs différents créent volontairement plusieurs agents, ce qui est rarement souhaitable.

Si une application Vue change de tenant authentifié sans rechargement complet de la page, considérez-le comme un démontage/remontage explicite. Supprimez la racine de l’ancien slug, validez le slug public du nouveau tenant à partir d’un état d’application fiable, puis ajoutez un nouveau script. Modifier script.dataset.agent après l’exécution du loader ne redirige pas l’iframe existante vers un autre agent.

Les en-têtes de sécurité de votre hébergeur s’appliquent toujours au rendu Nuxt/Vue. Ajoutez l’origine du loader et du cadre à votre CSP, et n’autorisez le microphone que si la voix est activée ; un plugin exécuté uniquement côté client ne peut pas contourner une politique du navigateur définie au niveau de la réponse.

Vérifier le SSR et le routage#

1. Exécutez le build de production Nuxt/Vue et vérifiez qu’aucune erreur document is not defined n’apparaît.
2. Chargez directement une route contenant l’intégration et vérifiez qu’il n’y a qu’une seule racine.
3. Naviguez côté client et vérifiez le comportement pour tout le site par rapport à celui limité à certaines routes.
4. Inspectez embed.js, l’iframe, la CSP et l’origine exacte.
5. Envoyez un message et testez le comportement sur mobile ainsi que le microphone.

Dépannage#

Aucun adaptateur npm pour Vue/Nuxt n’est actuellement publié ; ce guide utilise directement le loader hébergé pris en charge.