Como adicionar um chatbot com IA a um app Vue ou Nuxt

Você precisa de uma conta na Nexoply e da chave do seu chatbot. Cadastre-se grátis (o plano Free inclui 100 conversas por mês, sem cartão), adicione as informações do negócio ou importe-as do site, depois abra Chatbot no painel e copie o código de instalação. Ele é assim:

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

O valor de data-chatbot é a sua chave. Ela é pública, não um segredo: só diz ao widget a qual negócio ele pertence, então pode ficar no código do cliente e no seu repositório. Mantenha o nome do atributo e um src que contenha widget.js exatamente como mostrado, porque o widget lê as configurações da própria tag script.

A opção mais simples é colar a tag no index.html da raiz do projeto, logo antes de </body>. Ela carrega de forma assíncrona e nunca bloqueia a renderização:

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

Prefere adicionar pelo código, por exemplo para ler a chave de uma variável de ambiente ou carregar só depois que o visitante aceitar o seu aviso de consentimento? Crie a tag script no onMounted do App.vue. Coloque a chave no .env como VITE_NEXOPLY_KEY=YOUR-KEY:

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

onMounted(() => {
  // Já está na página? Não há nada a fazer.
  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>

No Nuxt, adicione o script ao site inteiro no nuxt.config.ts. tagPosition: "bodyClose" coloca a tag logo antes de </body>:

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

Ou adicione com useHead no app.vue. Se preferir manter a chave em uma variável de ambiente, declare runtimeConfig: { public: { nexoplyKey: "" } } no nuxt.config.ts e defina NUXT_PUBLIC_NEXOPLY_KEY; caso contrário, escreva a chave diretamente:

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

A renderização no servidor não é problema: o Nuxt coloca a tag no HTML e o widget só roda no navegador. Ele não mexe na marcação do seu app, então não há erros de hidratação.

• Fora do seu app. Ele é montado no document.body, fora do #app (ou da raiz do Nuxt), então re-renderizações, mudanças de layout e de rota nunca o removem.
• Navegação com Vue Router. A conversa continua enquanto os visitantes trocam de página no lado do cliente, e as regras de página (como uma aba lateral só em /pricing) são verificadas de novo quando a URL muda, sem código extra.
• Shadow DOM. O seu CSS, as classes do Tailwind ou a sua biblioteca de componentes não afetam o chat, e os estilos dele não afetam o seu app.
• Leve. Carrega de forma assíncrona, não usa cookies e só guarda um identificador anônimo de visitante no localStorage e a conversa atual no sessionStorage.

Quer um botão de "Dúvidas? Pergunte para a gente" na página inicial ou na tabela de preços? Dispare o evento nexoply:open-chat em um handler de clique:

<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 o chat assim que a página carregar, adicione data-open="true" à tag script (ou "data-open": "true" no Nuxt).

• Sites permitidos. Se você preencheu Permitir apenas nestes sites na página Chatbot, adicione também o seu host de desenvolvimento com a porta: localhost:5173 para Vite, localhost:3000 para Nuxt. Ou deixe a lista vazia enquanto testa.
• Content-Security-Policy. Se o seu app envia um cabeçalho CSP, permita https://nexoply.com em script-src, connect-src e img-src.
• Teste. Inicie o servidor de desenvolvimento, abra o app, faça uma pergunta real e confira se a conversa aparece em Conversas no painel.

Se o botão não aparecer:

• Confira a tag. Nas ferramentas de desenvolvedor do navegador, procure um script com o atributo data-chatbot e um src que contenha widget.js. Se não estiver lá, a chave pode estar vazia: confira se VITE_NEXOPLY_KEY ou NUXT_PUBLIC_NEXOPLY_KEY estão definidas e reinicie o servidor de desenvolvimento depois de editar o .env.
• Confira o console e a aba de rede. Um erro de CSP significa que nexoply.com ainda não está permitido; uma requisição bloqueada também pode vir de um bloqueador de anúncios, então teste em uma janela anônima sem extensões.
• Confira o painel. Verifique se a chave Chatbot ativado está ligada e se o seu domínio (ou localhost com a porta) está na lista de permitidos, se você usa uma.
• Escondido de propósito? Uma regra de página com "Sem botão" o esconde nas páginas correspondentes.

Com a tag instalada, todo o resto é feito no painel, e as alterações chegam ao site em cerca de um minuto, sem novo deploy. Em Chatbot → Personalizar você ajusta o botão de mensagem (ícone ou imagem sua, texto, formato, tamanho, cores, posição) ou usa no lugar uma aba lateral na borda da tela. Defina um visual diferente no celular e use regras de página para mudar ou esconder o botão em páginas específicas (por exemplo /blog/*). Adapte a janela de chat à marca e adicione botões na tela inicial como Agendar, Ligar ou WhatsApp.

Veja como funciona e os recursos, ou compare os planos. Trabalha com outro framework? Há guias para React e Next.js.