Vue-Chatbot: einen KI-Chatbot in eine Vue-3- oder Nuxt-App einbauen

Sie brauchen ein Nexoply-Konto und den Schlüssel Ihres Chatbots. Registrieren Sie sich kostenlos (der kostenlose Tarif umfasst 50 Unterhaltungen pro Monat, ohne Kreditkarte), fügen Sie die Informationen des Unternehmens hinzu oder importieren Sie sie von dessen Website, öffnen Sie dann Chatbot im Dashboard und kopieren Sie den Installationscode. Er sieht so aus:

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

Der Wert von data-chatbot ist Ihr Schlüssel. Er ist öffentlich, kein Geheimnis: Er sagt dem Widget nur, zu welchem Unternehmen es gehört, und darf daher im clientseitigen Code und in Ihrem Repository stehen. Behalten Sie den Attributnamen und ein src mit widget.js genau wie gezeigt bei, denn das Widget liest seine Einstellungen aus dem eigenen Script-Tag.

Legen Sie src/components/Chatbot.vue an. Die Komponente rendert selbst nichts: Beim Mounten fügt sie das Nexoply-Script einmal zur Seite hinzu, und das Widget zeichnet den Chat-Button und das Chatfenster.

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

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

onMounted(() => {
  // Kein Schlüssel oder das Script ist schon auf der Seite: nichts zu tun.
  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>

Rendern Sie sie einmal in App.vue, das während des gesamten Besuchs gemountet bleibt. Tragen Sie den Schlüssel in .env als VITE_NEXOPLY_KEY=YOUR-KEY ein:

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

const nexoplyKey = import.meta.env.VITE_NEXOPLY_KEY;
</script>

<template>
  <!-- Ihr Layout und Ihre Routen -->
  <Chatbot :chatbot-key="nexoplyKey" />
</template>

In einem JavaScript-Projekt lassen Sie lang="ts" weg und schreiben defineProps({ chatbotKey: String }) statt des Typarguments. Da es eine gewöhnliche Komponente ist, können Sie sie auch mit v-if rendern, etwa v-if="hasConsent", um den Chat erst zu laden, wenn ein Besucher Ihr Einwilligungsbanner akzeptiert hat.

Keine Komponente nötig? Am einfachsten fügen Sie den Tag in die index.html im Stammverzeichnis Ihres Projekts ein, direkt vor </body>. Er lädt asynchron und blockiert das Rendern nie:

<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 brauchen Sie keine Komponente: Fügen Sie das Script in nuxt.config.ts für die ganze Website hinzu. tagPosition: "bodyClose" setzt es direkt vor </body>:

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

Oder fügen Sie es mit useHead in app.vue hinzu. Wenn Sie den Schlüssel lieber in einer Umgebungsvariablen ablegen, deklarieren Sie runtimeConfig: { public: { nexoplyKey: "" } } in nuxt.config.ts und setzen NUXT_PUBLIC_NEXOPLY_KEY; andernfalls schreiben Sie den Schlüssel einfach direkt hinein:

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

Server-Rendering ist kein Problem: Nuxt rendert den Tag ins HTML, und das Widget läuft nur im Browser. Es berührt das Markup Ihrer App nicht, daher gibt es keine Hydration-Mismatches.

Wer nach einem Vue-Chatbot sucht, findet zwei Arten von Werkzeugen, und sie lösen unterschiedliche Probleme:

• Eine Chatbot-UI-Bibliothek liefert Vue-Komponenten für den Chat selbst: eine Nachrichtenliste, ein Eingabefeld, Sprechblasen, manchmal vorgegebene Gesprächsschritte. Alles hinter der Oberfläche bauen Sie selbst: feste Skripte oder ein Backend, das ein KI-Modell mit Ihrem eigenen API-Schlüssel aufruft, dazu die Inhalte, aus denen es antwortet, die Speicherung der Unterhaltungen und den Schutz vor Missbrauch. Das passt, wenn der Chat Teil Ihres Produkts ist, etwa ein Assistent, der mit den eigenen Daten Ihrer Nutzer arbeitet.
• Ein gehosteter KI-Chatbot wie Nexoply liefert Oberfläche, KI und Backend zusammen. Er beantwortet die Fragen der Besucher nur mit den Unternehmensinformationen, die Sie hinzufügen oder importieren (Leistungen und Preise, FAQs, Richtlinien, Öffnungszeiten), und sagt es, wenn er etwas nicht weiß. Es gibt keinen KI-Schlüssel und keinen Servercode; Unterhaltungen, unbeantwortete Fragen und Spamschutz verwalten Sie im Dashboard. Das passt zu einer Website für Kunden, die Fragen zum Unternehmen beantworten soll.

Wenn Sie volle Kontrolle über Oberfläche und Modell wollen, beginnen Sie mit einer Bibliothek. Wenn es darum geht, Fragen von Besuchern zu beantworten, ohne ein Backend zu bauen oder zu betreiben, macht das gehostete Widget weniger Arbeit. Lesen Sie, wie Nexoply mit Ihren Unternehmensinformationen antwortet.

• Außerhalb Ihrer App. Es wird an document.body angehängt, außerhalb von #app (oder dem Root-Element von Nuxt), sodass Re-Renders, Layoutwechsel und Routenwechsel es nie entfernen.
• Navigation mit Vue Router. Die Unterhaltung läuft weiter, während Besucher clientseitig zwischen Seiten wechseln, und Seitenregeln (etwa ein Seitenreiter nur auf /pricing) werden bei einer URL-Änderung erneut geprüft, ohne zusätzlichen Code.
• Shadow DOM. Ihr CSS, Ihre Tailwind-Klassen oder Ihre UI-Bibliothek wirken nicht in den Chat hinein, und seine Styles wirken nicht in Ihre App hinein.
• Geringer Fußabdruck. Es lädt asynchron, setzt keine Cookies und speichert nur eine anonyme Besucher-ID in localStorage und die aktuelle Unterhaltung in sessionStorage.

Sie möchten einen Button „Fragen? Schreiben Sie uns“ im Hero-Bereich oder in der Preistabelle? Lösen Sie das Event nexoply:open-chat in einem Klick-Handler aus:

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

<template>
  <button type="button" @click="openChat">Stellen Sie uns eine Frage</button>
</template>

Um den Chat direkt beim Laden der Seite zu öffnen, ergänzen Sie data-open="true" im Script-Tag (oder "data-open": "true" in Nuxt).

• Erlaubte Websites. Wenn Sie auf der Seite Chatbot Nur auf diesen Websites erlauben ausgefüllt haben, tragen Sie auch Ihren Entwicklungshost mit Port ein: localhost:5173 für Vite, localhost:3000 für Nuxt. Oder lassen Sie die Liste beim Testen leer.
• Content-Security-Policy. Wenn Ihre App einen CSP-Header sendet, erlauben Sie https://nexoply.com in script-src, connect-src und img-src.
• Testen. Starten Sie den Dev-Server, öffnen Sie die App, stellen Sie eine echte Frage und prüfen Sie, ob die Unterhaltung im Dashboard unter Unterhaltungen erscheint.

Wenn der Button nicht erscheint:

• Prüfen Sie den Tag. Suchen Sie in den Entwicklertools Ihres Browsers nach einem Script mit einem data-chatbot-Attribut und einem src mit widget.js. Fehlt er, ist der Schlüssel womöglich leer: Prüfen Sie, ob VITE_NEXOPLY_KEY bzw. NUXT_PUBLIC_NEXOPLY_KEY gesetzt ist, und starten Sie den Dev-Server nach einer Änderung an .env neu.
• Prüfen Sie Konsole und Netzwerk-Tab. Ein CSP-Fehler bedeutet, dass nexoply.com noch nicht erlaubt ist; eine blockierte Anfrage kann auch von einem Werbeblocker stammen, versuchen Sie es also in einem privaten Fenster ohne Erweiterungen.
• Prüfen Sie das Dashboard. Stellen Sie sicher, dass der Schalter Chatbot aktiviert eingeschaltet ist und Ihre Domain (oder localhost mit Port) in der Liste der erlaubten Websites steht, falls Sie eine nutzen.
• Absichtlich ausgeblendet? Eine Seitenregel mit „Kein Button“ blendet ihn auf passenden Seiten aus.

Ist der Tag einmal eingebunden, passiert alles Weitere im Dashboard, und Änderungen erreichen die Website innerhalb von etwa einer Minute, ohne neues Deployment. Unter Chatbot → Anpassen gestalten Sie den Chat-Button (Symbol oder eigenes Bild, Beschriftung, Form, Größe, Farben, Position) oder verwenden stattdessen einen Seitenreiter am Bildschirmrand. Legen Sie ein eigenes Aussehen für Smartphones fest und ändern oder verbergen Sie den Button mit Seitenregeln auf ausgewählten Seiten (zum Beispiel /blog/*). Gestalten Sie das Chatfenster passend zur Marke und fügen Sie Buttons für den Startbildschirm wie Buchen, Anrufen oder WhatsApp hinzu.

Lesen Sie, wie der Assistent Ihr Unternehmen kennenlernt, sehen Sie sich alle Anpassungsoptionen an oder vergleichen Sie Tarife und Unterhaltungslimits. Sie arbeiten mit einem anderen Framework? Lesen Sie die Anleitung zur React-Chatbot-Komponente und wie Sie Next.js mit next/script einen Chatbot hinzufügen.