1. Accueil
  2. Intégrations
  3. Vue et Nuxt

Chatbot IA pour Vue et Nuxt : comment l’installer

Avec Vue, le fichier HTML de départ suffit ; avec Nuxt, on passe par la configuration.

Vous le trouvez tout prêt dans le panneau, avec votre clé, et vous le copiez en un clic. Il se présente ainsi :

<script src="https://app.interlyo.com/widget/chatbot.js" data-api-key="votre-cle" defer></script>

1Nuxt 3

  1. Ouvrez nuxt.config.ts.
  2. Ajoutez le script dans la section head.
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://app.interlyo.com/widget/chatbot.js',
          'data-api-key': 'votre-cle',
          defer: true,
        },
      ],
    },
  },
});

Cela marche aussi avec useHead ou useScript. Écrivez l’attribut 'data-api-key', avec les tirets.

2Vue 3 avec Vite

  1. Ouvrez index.html.
  2. Collez le code après le conteneur de l’appli.
<body>
  <div id="app"></div>
  <script src="https://app.interlyo.com/widget/chatbot.js" data-api-key="votre-cle" defer></script>
</body>

Chargez chatbot.js depuis notre adresse, comme dans le code ci-dessus. Ne le téléchargez pas dans le projet, ne le renommez pas et ne l’incluez pas dans le bundle du site : le widget ne trouverait plus la clé ni notre serveur.

Prêt à l’installer ?

Vous vous inscrivez gratuitement et le panneau vous donne le code et les instructions pour votre plateforme.