Chatbot Vue : ajouter un chatbot IA à une application Vue 3 ou Nuxt

Il vous faut un compte Nexoply et la clé de votre chatbot. Inscrivez-vous gratuitement (l’offre gratuite comprend 50 conversations par mois, sans carte bancaire), ajoutez les informations de l’entreprise ou importez-les depuis son site web, puis ouvrez Chatbot dans le tableau de bord et copiez le code d’installation. Il ressemble à ceci :

<script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>

La valeur de data-chatbot est votre clé. Elle est publique, ce n’est pas un secret : elle indique seulement au widget à quelle entreprise il appartient, vous pouvez donc la mettre dans du code côté client et dans votre dépôt. Gardez le nom de l’attribut et un src contenant widget.js exactement comme indiqué, car le widget lit ses réglages dans sa propre balise script.

Créez src/components/Chatbot.vue. Le composant n’affiche rien lui-même : au montage, il ajoute une seule fois le script Nexoply à la page, et c’est le widget qui dessine le bouton et la fenêtre de chat.

<!-- src/components/Chatbot.vue -->
<script setup lang="ts">
import { onMounted } from "vue";

const props = defineProps<{ chatbotKey: string }>();

onMounted(() => {
  // Pas de clé, ou le script est déjà sur la page : rien à faire.
  if (!props.chatbotKey || document.querySelector("script[data-chatbot]")) return;
  const s = document.createElement("script");
  s.src = "https://nexoply.com/widget.js";
  s.async = true;
  s.dataset.chatbot = props.chatbotKey;
  document.body.appendChild(s);
});
</script>

<template><slot /></template>

Affichez-le une seule fois dans App.vue, qui reste monté pendant toute la visite. Mettez la clé dans .env sous la forme VITE_NEXOPLY_KEY=YOUR-KEY :

<!-- src/App.vue -->
<script setup lang="ts">
import Chatbot from "./components/Chatbot.vue";

const nexoplyKey = import.meta.env.VITE_NEXOPLY_KEY;
</script>

<template>
  <!-- votre mise en page et vos routes -->
  <Chatbot :chatbot-key="nexoplyKey" />
</template>

Dans un projet JavaScript, retirez lang="ts" et écrivez defineProps({ chatbotKey: String }) au lieu de l’argument de type. Comme c’est un composant ordinaire, vous pouvez aussi l’afficher avec v-if, par exemple v-if="hasConsent", pour ne charger le chat qu’après qu’un visiteur a accepté votre bandeau de consentement.

Pas besoin de composant ? L’installation la plus simple consiste à coller la balise dans index.html, à la racine de votre projet, juste avant </body>. Elle se charge de manière asynchrone et ne bloque jamais le rendu :

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
  <script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>
</body>

Avec Nuxt, vous n’avez pas besoin de composant : ajoutez le script à tout le site dans nuxt.config.ts. tagPosition: "bodyClose" le place juste avant </body> :

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: "https://nexoply.com/widget.js",
          async: true,
          "data-chatbot": "YOUR-KEY",
          tagPosition: "bodyClose",
        },
      ],
    },
  },
});

Vous pouvez aussi l’ajouter avec useHead dans app.vue. Si vous préférez garder la clé dans une variable d’environnement, déclarez runtimeConfig: { public: { nexoplyKey: "" } } dans nuxt.config.ts et définissez NUXT_PUBLIC_NEXOPLY_KEY ; sinon, écrivez simplement la clé à cet endroit :

<script setup lang="ts">
useHead({
  script: [
    {
      src: "https://nexoply.com/widget.js",
      async: true,
      "data-chatbot": useRuntimeConfig().public.nexoplyKey,
      tagPosition: "bodyClose",
    },
  ],
});
</script>

Le rendu côté serveur ne pose pas de problème : Nuxt rend la balise dans le HTML, et le widget ne s’exécute que dans le navigateur. Il ne touche pas au balisage de votre application, donc aucune erreur d’hydratation.

Une recherche « chatbot Vue » fait apparaître deux types d’outils, qui ne résolvent pas le même problème :

• Une bibliothèque d’interface de chatbot vous fournit des composants Vue pour le chat lui-même : une liste de messages, un champ de saisie, des bulles, parfois des étapes de conversation scénarisées. Tout ce qui se trouve derrière l’interface reste à construire : des scénarios fixes, ou un backend qui appelle un modèle d’IA avec votre propre clé d’API, ainsi que le contenu à partir duquel il répond, le stockage des conversations et la protection contre les abus. C’est adapté quand le chat fait partie de votre produit, par exemple un assistant qui travaille avec les données de vos propres utilisateurs.
• Un chatbot IA hébergé comme Nexoply fournit l’interface, l’IA et le backend ensemble. Il répond aux questions des visiteurs uniquement à partir des informations sur l’entreprise que vous ajoutez ou importez (services et prix, FAQ, politiques, horaires d’ouverture) et le dit quand il ne sait pas. Pas de clé d’IA, pas de code serveur ; les conversations, les questions sans réponse et la protection contre le spam se gèrent dans le tableau de bord. C’est adapté à un site web destiné aux clients, qui doit répondre aux questions sur l’entreprise.

Si vous voulez un contrôle total sur l’interface et le modèle, partez d’une bibliothèque. Si l’objectif est de répondre aux questions des visiteurs sans construire ni faire tourner de backend, le widget hébergé demande moins de travail. Découvrez comment Nexoply répond à partir des informations sur votre entreprise.

• En dehors de votre application. Il se monte sur document.body, en dehors de #app (ou de la racine de Nuxt) : les re-rendus, les changements de mise en page et les changements de route ne le retirent jamais.
• Navigation Vue Router. La conversation continue pendant que les visiteurs passent d’une page à l’autre côté client, et les règles par page (comme un onglet latéral uniquement sur /pricing) sont revérifiées quand l’URL change, sans code supplémentaire.
• Shadow DOM. Votre CSS, vos classes Tailwind ou votre bibliothèque d’interface ne débordent pas sur le chat, et ses styles ne débordent pas sur votre application.
• Empreinte légère. Il se charge de manière asynchrone, ne dépose aucun cookie et n’enregistre qu’un identifiant de visiteur anonyme dans localStorage et la conversation en cours dans sessionStorage.

Vous voulez un bouton « Une question ? Demandez-nous » dans votre section d’accroche ou votre tableau de tarifs ? Déclenchez l’événement nexoply:open-chat depuis un gestionnaire de clic :

<script setup lang="ts">
function openChat() {
  window.dispatchEvent(new Event("nexoply:open-chat"));
}
</script>

<template>
  <button type="button" @click="openChat">Posez-nous une question</button>
</template>

Pour ouvrir le chat dès le chargement de la page, ajoutez data-open="true" à la balise script (ou "data-open": "true" avec Nuxt).

• Sites autorisés. Si vous avez rempli Autoriser uniquement sur ces sites web sur la page Chatbot, ajoutez aussi votre hôte de développement avec son port : localhost:5173 pour Vite, localhost:3000 pour Nuxt. Ou laissez la liste vide pendant vos tests.
• Content-Security-Policy. Si votre application envoie un en-tête CSP, autorisez https://nexoply.com dans script-src, connect-src et img-src.
• Testez. Lancez le serveur de développement, ouvrez l’application, posez une vraie question et vérifiez que la conversation apparaît sous Conversations dans le tableau de bord.

Si le bouton n’apparaît pas :

• Vérifiez la balise. Dans les outils de développement du navigateur, cherchez un script avec un attribut data-chatbot et un src contenant widget.js. S’il manque, la clé est peut-être vide : vérifiez que VITE_NEXOPLY_KEY ou NUXT_PUBLIC_NEXOPLY_KEY est définie, et redémarrez le serveur de développement après avoir modifié .env.
• Vérifiez la console et l’onglet Réseau. Une erreur CSP signifie que nexoply.com n’est pas encore autorisé ; une requête bloquée peut aussi venir d’un bloqueur de publicité : essayez une fenêtre de navigation privée sans extensions.
• Vérifiez le tableau de bord. Assurez-vous que l’interrupteur Chatbot activé est allumé et que votre domaine (ou localhost avec son port) figure dans la liste des sites autorisés, si vous en utilisez une.
• Masqué volontairement ? Une règle par page réglée sur « Aucun bouton » le masque sur les pages correspondantes.

Une fois la balise en place, tout le reste se passe dans le tableau de bord, et les modifications arrivent sur le site en une minute environ, sans redéploiement. Sous Chatbot → Personnaliser, vous pouvez styliser le bouton de message (icône ou votre propre image, libellé, forme, taille, couleurs, position) ou utiliser à la place un onglet latéral sur le bord de l’écran. Définissez une apparence différente sur mobile et utilisez des règles par page pour modifier ou masquer le bouton sur certaines pages (par exemple /blog/*). Adaptez la fenêtre de chat à la marque et ajoutez à l’écran d’accueil des boutons comme Réserver, Appeler ou WhatsApp.

Découvrez comment l’assistant apprend à connaître votre entreprise et toutes les options de personnalisation, ou comparez les offres et les limites de conversations. Vous travaillez avec un autre framework ? Consultez le guide du composant chatbot React et comment ajouter un chatbot à Next.js avec next/script.