Vue-chatbot: voeg een AI-chatbot toe aan een Vue 3- of Nuxt-app

Je hebt een Nexoply-account en de sleutel van je chatbot nodig. Meld je gratis aan (het Gratis-abonnement bevat 50 gesprekken per maand, zonder creditcard), voeg de bedrijfsinformatie toe of importeer die van de website, open daarna Chatbot in het dashboard en kopieer de installatiecode. Die ziet er zo uit:

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

De waarde van data-chatbot is je sleutel. Die is openbaar, geen geheim: hij vertelt de widget alleen bij welk bedrijf hij hoort, dus hij mag gewoon in client-side code en in je repository staan. Houd de attribuutnaam en een src die widget.js bevat precies zoals hierboven, want de widget leest zijn instellingen uit zijn eigen scripttag.

Maak src/components/Chatbot.vue aan. Het component rendert zelf niets: zodra het gemount wordt, voegt het het Nexoply-script één keer aan de pagina toe, en de widget tekent de chatknop en het chatvenster.

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

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

onMounted(() => {
  // Geen sleutel, of het script staat al op de pagina: niets te doen.
  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>

Render het één keer in App.vue, dat tijdens het hele bezoek gemount blijft. Zet de sleutel in .env als 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>
  <!-- je layout en routes -->
  <Chatbot :chatbot-key="nexoplyKey" />
</template>

In een JavaScript-project laat je lang="ts" weg en schrijf je defineProps({ chatbotKey: String }) in plaats van het typeargument. Omdat het een gewoon component is, kun je het ook met v-if renderen, bijvoorbeeld v-if="hasConsent", zodat de chat pas laadt nadat een bezoeker je toestemmingsbanner heeft geaccepteerd.

Geen component nodig? De eenvoudigste installatie is de tag in index.html in de hoofdmap van je project plakken, vlak voor </body>. Hij laadt asynchroon en blokkeert het renderen nooit:

<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 heb je geen component nodig: voeg het script voor de hele site toe in nuxt.config.ts. Met tagPosition: "bodyClose" komt het vlak voor </body> te staan:

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

Of voeg het toe met useHead in app.vue. Wil je de sleutel liever in een omgevingsvariabele bewaren, declareer dan runtimeConfig: { public: { nexoplyKey: "" } } in nuxt.config.ts en stel NUXT_PUBLIC_NEXOPLY_KEY in; anders schrijf je de sleutel gewoon direct in de code:

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

Server-side rendering is geen probleem: Nuxt rendert de tag in de HTML, en de widget draait alleen in de browser. Hij raakt de markup van je app niet aan, dus er zijn geen hydration mismatches.

Wie naar een Vue-chatbot zoekt, vindt twee soorten tools, en die lossen verschillende problemen op:

• Een chat-UI-bibliotheek geeft je Vue-componenten voor de chat zelf: een berichtenlijst, een invoerveld, tekstballonnen en soms vooraf geschreven gespreksstappen. Alles achter de interface bouw je zelf: vaste scripts, of een backend die een AI-model aanroept met je eigen API-sleutel, plus de inhoud waarmee hij antwoordt, de opslag van gesprekken en bescherming tegen misbruik. Dat past als chat onderdeel is van je product, bijvoorbeeld een assistent die met de eigen gegevens van je gebruikers werkt.
• Een gehoste AI-chatbot zoals Nexoply levert de interface, de AI en de backend samen. Hij beantwoordt vragen van bezoekers alleen met de bedrijfsinformatie die je toevoegt of importeert (diensten en prijzen, veelgestelde vragen, voorwaarden, openingstijden) en zegt het als hij iets niet weet. Er is geen AI-sleutel en geen servercode; gesprekken, onbeantwoorde vragen en spambescherming regel je in het dashboard. Dat past bij een website voor klanten die vragen over het bedrijf moet beantwoorden.

Wil je volledige controle over de interface en het model, begin dan met een bibliotheek. Is het doel vragen van bezoekers beantwoorden zonder een backend te bouwen of te beheren, dan is de gehoste widget minder werk. Zie hoe Nexoply antwoordt met je bedrijfsinformatie.

• Buiten je app. Hij wordt aan document.body gekoppeld, buiten #app (of de root van Nuxt), dus re-renders, layoutwijzigingen en routewijzigingen verwijderen hem nooit.
• Navigatie met Vue Router. Het gesprek loopt door terwijl bezoekers client-side tussen pagina's wisselen, en paginaregels (zoals een zijtab alleen op /pricing) worden opnieuw gecontroleerd als de URL verandert, zonder extra code.
• Shadow DOM. Je CSS, Tailwind-klassen of UI-bibliotheek lekken niet in de chat, en zijn stijlen lekken niet in je app.
• Licht gewicht. Hij laadt asynchroon, plaatst geen cookies en bewaart alleen een anonieme bezoekers-id in localStorage en het huidige gesprek in sessionStorage.

Wil je een knop "Vragen? Vraag het ons" in je hero-sectie of prijstabel? Verstuur het event nexoply:open-chat vanuit een klikhandler:

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

<template>
  <button type="button" @click="openChat">Stel ons een vraag</button>
</template>

Wil je de chat openen zodra de pagina laadt, voeg dan data-open="true" toe aan de scripttag (of "data-open": "true" in Nuxt).

• Toegestane websites. Heb je op de pagina Chatbot Alleen toestaan op deze websites ingevuld, voeg dan ook je ontwikkelhost met poort toe: localhost:5173 voor Vite, localhost:3000 voor Nuxt. Of laat de lijst leeg zolang je test.
• Content-Security-Policy. Stuurt je app een CSP-header mee, sta dan https://nexoply.com toe in script-src, connect-src en img-src.
• Test het. Start de dev-server, open de app, stel een echte vraag en controleer of het gesprek onder Gesprekken in het dashboard verschijnt.

Verschijnt de knop niet?

• Controleer de tag. Zoek in de ontwikkelaarstools van je browser naar een script met een data-chatbot-attribuut en een src die widget.js bevat. Ontbreekt hij, dan is de sleutel misschien leeg: controleer of VITE_NEXOPLY_KEY of NUXT_PUBLIC_NEXOPLY_KEY is ingesteld, en start de dev-server opnieuw na het bewerken van .env.
• Controleer de console en het tabblad Network. Een CSP-fout betekent dat nexoply.com nog niet is toegestaan; een geblokkeerd verzoek kan ook van een adblocker komen, dus probeer een privévenster zonder extensies.
• Controleer het dashboard. Zorg dat de schakelaar Chatbot ingeschakeld aan staat en dat je domein (of localhost met poort) in de lijst met toegestane websites staat, als je die gebruikt.
• Bewust verborgen? Een paginaregel die op "Geen knop" staat, verbergt hem op de pagina's waarop die regel van toepassing is.

Staat de tag er eenmaal in, dan gebeurt al het andere in het dashboard, en wijzigingen staan binnen ongeveer een minuut op de site, zonder opnieuw te deployen. Onder Chatbot → Aanpassen geef je de berichtknop vorm (icoon of je eigen afbeelding, label, vorm, grootte, kleuren, positie) of gebruik je in plaats daarvan een zijtab aan de rand van het scherm. Stel een andere look in voor telefoons en gebruik paginaregels om de knop op bepaalde pagina's te veranderen of te verbergen (bijvoorbeeld /blog/*). Stem het chatvenster af op de huisstijl en voeg knoppen op het startscherm toe zoals Boeken, Bellen of WhatsApp.

Lees hoe de assistent je bedrijf leert kennen en bekijk alle aanpassingsopties, of vergelijk de abonnementen en gesprekslimieten. Werk je met een ander framework? Zie de handleiding voor het React-chatbotcomponent en hoe je een chatbot toevoegt aan Next.js met next/script.