Cómo agregar un chatbot con IA a una app de Vue o Nuxt

Necesitas una cuenta de Nexoply y la clave de tu chatbot. Regístrate gratis (el plan Free incluye 100 conversaciones al mes, sin tarjeta), agrega la información del negocio o impórtala desde su sitio web, y luego abre Chatbot en el panel y copia el código de instalación. Se ve así:

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

El valor de data-chatbot es tu clave. Es pública, no un secreto: solo le indica al widget a qué negocio pertenece, así que puede ir en el código del cliente y en tu repositorio. Mantén el nombre del atributo y un src que contenga widget.js tal como se muestra, porque el widget lee su configuración desde su propia etiqueta script.

La opción más simple es pegar la etiqueta en el index.html de la raíz del proyecto, justo antes de </body>. Carga de forma asíncrona y nunca bloquea el renderizado:

<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>

¿Prefieres agregarlo desde el código, por ejemplo para leer la clave de una variable de entorno o cargarlo solo cuando el visitante acepta tu aviso de consentimiento? Crea la etiqueta script en onMounted dentro de App.vue. Pon la clave en .env como VITE_NEXOPLY_KEY=YOUR-KEY:

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

onMounted(() => {
  // ¿Ya está en la página? No hay nada que hacer.
  if (document.querySelector("script[data-chatbot]")) return;
  const s = document.createElement("script");
  s.src = "https://nexoply.com/widget.js";
  s.async = true;
  s.dataset.chatbot = import.meta.env.VITE_NEXOPLY_KEY;
  document.body.appendChild(s);
});
</script>

En Nuxt, agrega el script a todo el sitio en nuxt.config.ts. tagPosition: "bodyClose" lo coloca justo antes de </body>:

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

O agrégalo con useHead en app.vue. Si prefieres tener la clave en una variable de entorno, declara runtimeConfig: { public: { nexoplyKey: "" } } en nuxt.config.ts y define NUXT_PUBLIC_NEXOPLY_KEY; si no, escribe la clave directamente:

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

El renderizado en el servidor no es problema: Nuxt incluye la etiqueta en el HTML y el widget solo se ejecuta en el navegador. No toca el marcado de tu app, así que no hay errores de hidratación.

• Fuera de tu app. Se monta en document.body, fuera de #app (o de la raíz de Nuxt), así que los re-renderizados, los cambios de layout y de ruta nunca lo eliminan.
• Navegación con Vue Router. La conversación sigue mientras los visitantes cambian de página del lado del cliente, y las reglas de página (como una pestaña lateral solo en /pricing) se vuelven a revisar cuando cambia la URL, sin código extra.
• Shadow DOM. Tu CSS, las clases de Tailwind o tu librería de componentes no afectan el chat, y sus estilos no afectan tu app.
• Ligero. Carga de forma asíncrona, no usa cookies y solo guarda un identificador anónimo de visitante en localStorage y la conversación actual en sessionStorage.

¿Quieres un botón de "¿Dudas? Pregúntanos" en la portada o en la tabla de precios? Dispara el evento nexoply:open-chat desde un manejador de clic:

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

<template>
  <button type="button" @click="openChat">Ask us a question</button>
</template>

Para abrir el chat en cuanto carga la página, agrega data-open="true" a la etiqueta script (o "data-open": "true" en Nuxt).

• Sitios permitidos. Si completaste Permitir solo en estos sitios web en la página Chatbot, agrega también tu host de desarrollo con su puerto: localhost:5173 para Vite, localhost:3000 para Nuxt. O deja la lista vacía mientras pruebas.
• Content-Security-Policy. Si tu app envía un encabezado CSP, permite https://nexoply.com en script-src, connect-src e img-src.
• Pruébalo. Inicia el servidor de desarrollo, abre la app, haz una pregunta real y comprueba que la conversación aparece en Conversaciones en el panel.

Si el botón no aparece:

• Revisa la etiqueta. En las herramientas de desarrollo del navegador, busca un script con el atributo data-chatbot y un src que contenga widget.js. Si no está, puede que la clave esté vacía: verifica que VITE_NEXOPLY_KEY o NUXT_PUBLIC_NEXOPLY_KEY estén definidas y reinicia el servidor de desarrollo después de editar .env.
• Revisa la consola y la pestaña de red. Un error de CSP significa que nexoply.com todavía no está permitido; una solicitud bloqueada también puede venir de un bloqueador de anuncios, así que prueba en una ventana privada sin extensiones.
• Revisa el panel. Asegúrate de que el interruptor Chatbot activado esté encendido y de que tu dominio (o localhost con su puerto) esté en la lista de permitidos, si usas una.
• ¿Oculto a propósito? Una regla de página con "Sin botón" lo oculta en las páginas que coinciden.

Con la etiqueta instalada, todo lo demás se hace en el panel, y los cambios llegan al sitio en aproximadamente un minuto, sin volver a desplegar. En Chatbot → Personalizar puedes ajustar el botón de mensaje (ícono o tu propia imagen, texto, forma, tamaño, colores, posición) o usar en su lugar una pestaña lateral en el borde de la pantalla. Define un aspecto distinto en celulares y usa reglas de página para cambiar u ocultar el botón en páginas concretas (por ejemplo /blog/*). Adapta la ventana de chat a la marca y agrega botones en la pantalla de inicio como Reservar, Llamar o WhatsApp.

Mira cómo funciona y las funciones, o compara los planes. ¿Trabajas con otro framework? Hay guías para React y Next.js.