Installationsanleitungen

Installieren Sie ChattyBox, indem Sie ein öffentliches Widget-Skript auf den Seiten laden, auf denen Besucher Fragen stellen können sollen.

Beginnen Sie mit dem Snippet in Ihrem ChattyBox-Dashboard. Es enthält den öffentlichen Widget-Schlüssel API und die URL API für Ihr Projekt:

<script
  src="https://chattybox.ai/widget.js"
  data-api-key="YOUR_API_KEY"
  data-api-url="https://app.chattybox.ai"
  async
></script>

Ersetzen Sie YOUR_API_KEY durch den öffentlichen Widget-Schlüssel aus Ihrem Dashboard. Wenn Ihr Dashboard einen anderen data-api-url anzeigt, behalten Sie den Dashboard-Wert genau bei.

Was ins Drehbuch gehört

Verwenden Sie Skriptattribute für Werte, die verfügbar sein müssen, bevor das Widget gestartet werden kann:

Attribut	Erforderlich	Benutze es für
`src`	Ja	Laden des JavaScript-Widgets ChattyBox.
`data-api-key`	Ja	Identifizieren des öffentlichen Widget-Schlüssels für Ihr Projekt.
`data-api-url`	Ja	Senden von Widget-Anfragen an ChattyBox API.
`data-locale`	Nein	Erzwingen der Widget-UI-Sprache auf einer bestimmten Seite.

Verwenden Sie Dashboard-Einstellungen für alles, was verwaltet werden soll, ohne Ihre Site erneut bereitzustellen:

Widget-Farben, Position, Symbol, Titel und Willkommensnachricht.
Standardsprachmodus und ob data-locale-Überschreibungen zulässig sind.
Erstellung und Löschung öffentlicher Schlüssel sowie alle für Ihr Projekt konfigurierten zulässigen Ursprungseinschränkungen.
Scraping, erneutes Scraping, Test-Chat, Analysen und Inhaltslücken.

Einfach HTML

Fügen Sie das Snippet einmal am Ende von body ein, kurz vor </body>. Dies funktioniert für statische HTML, handcodierte Websites und Vorlagen, die eine globale Fußzeile bereitstellen.

<!doctype html>
<html lang="en">
  <head>
    <title>Example Site</title>
  </head>
  <body>
    <main>
      <!-- Page content -->
    </main>

    <script
      src="https://chattybox.ai/widget.js"
      data-api-key="YOUR_API_KEY"
      data-api-url="https://app.chattybox.ai"
      async
    ></script>
  </body>
</html>

Next.js / React App Shell

Fügen Sie für eine Next.js App Router-Site das Widget zu app/layout.tsx mit next/script hinzu, damit es einmal für die gesamte App geladen wird.

import Script from "next/script";
import type { ReactNode } from "react";

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://chattybox.ai/widget.js"
          data-api-key="YOUR_API_KEY"
          data-api-url="https://app.chattybox.ai"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Für eine React Single-Page-App fügen Sie das Skript einmal in Ihrer App-Shell oder HTML-Vorlage der obersten Ebene hinzu. Injizieren Sie es nicht von jeder Routenkomponente.

import { useEffect } from "react";

export function ChattyBoxWidget() {
  useEffect(() => {
    if (document.querySelector("script[data-chattybox-widget]")) return;

    const script = document.createElement("script");
    script.src = "https://chattybox.ai/widget.js";
    script.async = true;
    script.setAttribute("data-api-key", "YOUR_API_KEY");
    script.setAttribute("data-api-url", "https://app.chattybox.ai");
    script.setAttribute("data-chattybox-widget", "true");
    document.body.appendChild(script);

    return () => script.remove();
  }, []);

  return null;
}

Docusaurus

Erstellen oder aktualisieren Sie für Docusaurus src/theme/Root.tsx, damit das Widget auf allen Dokumentseiten verfügbar ist.

import React, { useEffect } from "react";

export default function Root({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    if (document.querySelector("script[data-chattybox-widget]")) return;

    const script = document.createElement("script");
    script.src = "https://chattybox.ai/widget.js";
    script.async = true;
    script.setAttribute("data-api-key", "YOUR_API_KEY");
    script.setAttribute("data-api-url", "https://app.chattybox.ai");
    script.setAttribute("data-chattybox-widget", "true");
    document.body.appendChild(script);

    return () => script.remove();
  }, []);

  return <>{children}</>;
}

Wenn Ihre Docusaurus-Site über übersetzte Routen verfügt, legen Sie data-locale aus der aktuellen Seitensprache fest oder verlassen Sie sich auf den <html lang>-Wert der Seite.

Generisch CMS/Benutzerdefiniert HTML

Die meisten CMS-Plattformen verfügen über einen globalen benutzerdefinierten Code-, Fußzeilen- oder Themenvorlagenbereich. Fügen Sie dort das Skript hinzu, damit jede öffentliche Seite das Widget laden kann.

Verwenden Sie diesen Pfad für Webflow, Framer, Squarespace, benutzerdefinierte Codebereiche von Wix, Shopify-Themen, HubSpot-Vorlagen und benutzerdefinierte CMS-Plattformen, mit denen Sie globale HTML bearbeiten können.

<script
  src="https://chattybox.ai/widget.js"
  data-api-key="YOUR_API_KEY"
  data-api-url="https://app.chattybox.ai"
  async
></script>

Stellen Sie vor der Veröffentlichung sicher, dass CMS data-api-key, data-api-url oder async nicht aus benutzerdefinierten Skripten entfernt.

Google Tag Manager

Verwenden Sie Google Tag Manager, wenn Ihr Team bereits Skripts von Drittanbietern über GTM verwaltet.

Öffnen Sie Ihren GTM-Container.
Erstellen Sie ein neues Benutzerdefiniertes HTML-Tag.
Fügen Sie das Snippet ChattyBox ein.
Verwenden Sie einen Alle Seiten-Trigger oder einen engeren Trigger nur für die Seiten, auf denen das Widget angezeigt werden soll.
Sehen Sie sich den Container in der Vorschau an, prüfen Sie, ob das Widget geladen wird, und veröffentlichen Sie es dann.

<script
  src="https://chattybox.ai/widget.js"
  data-api-key="YOUR_API_KEY"
  data-api-url="https://app.chattybox.ai"
  async
></script>

Wenn Ihre Website den Zustimmungsmodus oder eine Tag-Zustimmungsrichtlinie verwendet, stellen Sie sicher, dass das Widget auf den Seiten geladen werden darf, auf denen Besucher Hilfe benötigen.

WordPress

ChattyBox erfordert kein WordPress-Plugin. Verwenden Sie einen der Skriptspeicherorte, die Ihr WordPress-Setup bereits unterstützt:

Designeinstellungen, die Kopf- oder Fußzeilenskripts bereitstellen.
Ein untergeordnetes Thema, das die Fußzeilenvorlage steuert.
Ein Kopf-/Fußzeilen-Skript-Plugin.
Google Tag Manager, wenn Ihre WordPress-Site es bereits verwendet.

Fügen Sie das Snippet an einer globalen Stelle in der Fußzeile ein, damit es auf veröffentlichten Seiten, Beiträgen, Dokumenten und Wissensdatenbankartikeln angezeigt wird, auf denen der Chatbot verfügbar sein sollte.

<script
  src="https://chattybox.ai/widget.js"
  data-api-key="YOUR_API_KEY"
  data-api-url="https://app.chattybox.ai"
  async
></script>

Vermeiden Sie das Hinzufügen des Widgets zu wp-admin-, Checkout-, Konto- oder privaten Mitgliedschaftsseiten, es sei denn, diese Seiten sind absichtlich öffentlich und werden unterstützt.

Überprüfung

Führen Sie nach der Installation die Startcheckliste aus, bevor Sie den Chatbot ankündigen:

Öffnen Sie eine öffentliche Seite in einem Inkognito-Fenster.
Bestätigen Sie, dass der Widget-Launcher angezeigt wird.
Öffnen Sie das Widget und stellen Sie eine echte Kundenfrage.
Stellen Sie sicher, dass die Antwort Quellenangaben enthält.
Überprüfen Sie die Browserkonsole auf fehlende data-api-key, fehlende data-api-url oder Schlüssel-/Ursprungsfehler.

Was ins Drehbuch gehört​

Einfach HTML​

Next.js / React App Shell​

Docusaurus​

Generisch CMS/Benutzerdefiniert HTML​

Google Tag Manager​

WordPress​

Überprüfung​