1. Inicio
  2. Integraciones
  3. Vue y Nuxt

Chatbot IA para Vue y Nuxt: cómo instalarlo

Con Vue basta el archivo HTML de partida; con Nuxt se usa la configuración.

Lo encuentras listo en el panel, con tu clave, y lo copias con un clic. Tiene este aspecto:

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

1Nuxt 3

  1. Abre nuxt.config.ts.
  2. Añade el script en la sección head.
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://app.interlyo.com/widget/chatbot.js',
          'data-api-key': 'tu-clave',
          defer: true,
        },
      ],
    },
  },
});

También funciona con useHead o useScript. Escribe el atributo como 'data-api-key', con guiones.

2Vue 3 con Vite

  1. Abre index.html.
  2. Pega el código después del contenedor de la app.
<body>
  <div id="app"></div>
  <script src="https://app.interlyo.com/widget/chatbot.js" data-api-key="tu-clave" defer></script>
</body>

Carga chatbot.js desde nuestra dirección, como en el código de arriba. No lo descargues en el proyecto, no le cambies el nombre y no lo incluyas en el bundle de la web: el widget ya no encontraría la clave ni nuestro servidor.

¿Listo para instalarlo?

Te registras gratis y el panel te da el código y las instrucciones para tu plataforma.