Chatbot in Vue: aggiungi un chatbot IA a un’app Vue 3 o Nuxt

Ti servono un account Nexoply e la chiave del tuo chatbot. Registrati gratis (il piano Gratuito include 50 conversazioni al mese, senza carta di credito), aggiungi le informazioni sull’attività o importale dal sito web, poi apri Chatbot nella dashboard e copia il codice di installazione. Ha questo aspetto:

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

Il valore di data-chatbot è la tua chiave. È pubblica, non un segreto: serve solo a dire al widget a quale attività appartiene, quindi può stare tranquillamente nel codice lato client e nel tuo repository. Mantieni il nome dell’attributo e un src che contenga widget.js esattamente come mostrato, perché il widget legge le impostazioni dal proprio tag script.

Crea src/components/Chatbot.vue. Il componente non renderizza nulla di suo: quando viene montato, aggiunge una sola volta lo script di Nexoply alla pagina, e il widget disegna il pulsante e la finestra della chat.

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

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

onMounted(() => {
  // Nessuna chiave, o lo script è già nella pagina: non c’è niente da fare.
  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>

Renderizzalo una sola volta in App.vue, che resta montato per tutta la visita. Metti la chiave in .env come 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>
  <!-- il tuo layout e le tue route -->
  <Chatbot :chatbot-key="nexoplyKey" />
</template>

In un progetto JavaScript, togli lang="ts" e scrivi defineProps({ chatbotKey: String }) al posto dell’argomento di tipo. Essendo un normale componente, puoi anche renderizzarlo con v-if, per esempio v-if="hasConsent", per caricare la chat solo dopo che il visitatore ha accettato il banner del consenso.

Non ti serve un componente? L’installazione più semplice è incollare il tag in index.html, nella radice del progetto, subito prima di </body>. Si carica in modo asincrono e non blocca mai il rendering:

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

In Nuxt non ti serve un componente: aggiungi lo script a tutto il sito in nuxt.config.ts. tagPosition: "bodyClose" lo posiziona subito prima di </body>:

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

Oppure aggiungilo con useHead in app.vue. Se preferisci tenere la chiave in una variabile d’ambiente, dichiara runtimeConfig: { public: { nexoplyKey: "" } } in nuxt.config.ts e imposta NUXT_PUBLIC_NEXOPLY_KEY; altrimenti scrivi direttamente la chiave al suo posto:

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

Il rendering lato server non è un problema: Nuxt inserisce il tag nell’HTML, e il widget funziona solo nel browser. Non tocca il markup della tua app, quindi non ci sono errori di hydration mismatch.

Cercando un chatbot per Vue si trovano due tipi di strumenti, che risolvono problemi diversi:

• Una libreria di UI per chatbot ti fornisce i componenti Vue della chat: elenco dei messaggi, campo di testo, fumetti, a volte passaggi di conversazione predefiniti. Tutto ciò che sta dietro l’interfaccia lo costruisci tu: script fissi, oppure un backend che chiama un modello IA con la tua chiave API, più i contenuti da cui risponde, l’archiviazione delle conversazioni e la protezione dagli abusi. È adatta quando la chat fa parte del tuo prodotto, per esempio un assistente che lavora con i dati dei tuoi utenti.
• Un chatbot IA in hosting come Nexoply include insieme interfaccia, IA e backend. Risponde alle domande dei visitatori solo in base alle informazioni sull’attività che aggiungi o importi (servizi e prezzi, FAQ, politiche, orari di apertura) e lo dice quando non conosce la risposta. Non servono chiavi IA né codice lato server; conversazioni, domande senza risposta e protezione antispam si gestiscono nella dashboard. È adatto a un sito rivolto ai clienti che deve rispondere a domande sull’attività.

Se vuoi il pieno controllo su interfaccia e modello, parti da una libreria. Se l’obiettivo è rispondere alle domande dei visitatori senza costruire né gestire un backend, il widget in hosting richiede meno lavoro. Scopri come Nexoply risponde in base alle informazioni sulla tua attività.

• Fuori dalla tua app. Si monta su document.body, fuori da #app (o dalla radice di Nuxt), quindi re-render, cambi di layout e cambi di route non lo rimuovono mai.
• Navigazione con Vue Router. La conversazione continua mentre i visitatori passano da una pagina all’altra lato client, e le regole per pagina (per esempio una linguetta laterale solo su /pricing) vengono ricontrollate quando cambia l’URL, senza codice in più.
• Shadow DOM. Il tuo CSS, le classi Tailwind o la tua libreria di UI non entrano nella chat, e gli stili della chat non entrano nella tua app.
• Impatto minimo. Si carica in modo asincrono, non imposta cookie e salva solo un identificativo anonimo del visitatore in localStorage e la conversazione in corso in sessionStorage.

Vuoi un pulsante "Domande? Chiedi a noi" nella sezione hero o nella tabella dei prezzi? Invia l’evento nexoply:open-chat da un gestore del clic:

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

<template>
  <button type="button" @click="openChat">Fai una domanda</button>
</template>

Per aprire la chat appena la pagina si carica, aggiungi data-open="true" al tag script (oppure "data-open": "true" in Nuxt).

• Siti web consentiti. Se nella pagina Chatbot hai compilato Consenti solo su questi siti web, aggiungi anche l’host di sviluppo con la porta: localhost:5173 per Vite, localhost:3000 per Nuxt. Oppure lascia l’elenco vuoto durante i test.
• Content-Security-Policy. Se la tua app invia un header CSP, consenti https://nexoply.com in script-src, connect-src e img-src.
• Provalo. Avvia il server di sviluppo, apri l’app, fai una domanda vera e verifica che la conversazione compaia in Conversazioni nella dashboard.

Se il pulsante non compare:

• Controlla il tag. Negli strumenti per sviluppatori del browser, cerca uno script con un attributo data-chatbot e un src che contenga widget.js. Se manca, la chiave potrebbe essere vuota: verifica che VITE_NEXOPLY_KEY o NUXT_PUBLIC_NEXOPLY_KEY sia impostata, e riavvia il server di sviluppo dopo aver modificato .env.
• Controlla la console e la scheda Network. Un errore CSP significa che nexoply.com non è ancora consentito; una richiesta bloccata può dipendere anche da un ad blocker, quindi prova in una finestra privata senza estensioni.
• Controlla la dashboard. Assicurati che l’interruttore Chatbot attivo sia acceso e che il tuo dominio (o localhost con la porta) sia nell’elenco dei siti consentiti, se ne usi uno.
• Nascosto di proposito? Una regola per pagina impostata su "Nessun pulsante" lo nasconde nelle pagine corrispondenti.

Una volta inserito il tag, tutto il resto si fa nella dashboard, e le modifiche arrivano sul sito in circa un minuto, senza ripubblicare. In Chatbot → Personalizza puoi definire lo stile del pulsante dei messaggi (icona o immagine personalizzata, testo, forma, dimensione, colori, posizione) oppure usare al suo posto una linguetta laterale sul bordo dello schermo. Imposta un aspetto diverso sugli smartphone e usa le regole per pagina per cambiare o nascondere il pulsante su pagine specifiche (per esempio /blog/*). Adatta la finestra della chat al tuo brand e aggiungi alla schermata iniziale pulsanti come Prenota, Chiama o WhatsApp.

Leggi come l’assistente impara a conoscere la tua attività e tutte le opzioni di personalizzazione, oppure confronta piani e limiti di conversazioni. Lavori con un altro framework? Consulta la guida al componente chatbot per React e come aggiungere un chatbot a Next.js con next/script.