So fügen Sie den Asyntai AI Chatbot zu Docusaurus hinzu

Schritt-für-Schritt-Anleitung für Docusaurus-Dokumentationswebsites

Plattform:

Schritt 1: Ihren Einbettungscode erhalten

Gehen Sie zunächst zu Ihrem Asyntai Dashboard und scrollen Sie zum Abschnitt "Einbettungscode". Kopieren Sie Ihren einzigartigen Einbettungscode, der so aussieht:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Hinweis: Der obige Code ist nur ein Beispiel. Sie müssen Ihren eigenen einzigartigen Einbettungscode von Ihrem Dashboard kopieren, da er Ihre persönliche Widget-ID enthält.

Schritt 2: Skript zur docusaurus.config.js hinzufügen (Empfohlen)

Der beste Weg, den Chatbot zu allen Seiten Ihrer Docusaurus-Website hinzuzufügen, ist über die Konfigurationsdatei:

Öffnen Sie Ihr Docusaurus-Projekt in Ihrem Code-Editor
Suchen und öffnen Sie die Datei docusaurus.config.js in Ihrem Projektstammverzeichnis
Suchen Sie das Objekt const config = { }
Fügen Sie das Feld scripts mit Ihrem Asyntai-Widget hinzu oder aktualisieren Sie es:

const config = {
  // ... other config options

  scripts: [
    // Other scripts if any
    {
      src: 'https://asyntai.com/static/js/chat-widget.js',
      'data-asyntai-id': 'YOUR_WIDGET_ID',
      async: true,
    },
  ],

  // ... rest of config
};

Speichern Sie die Datei docusaurus.config.js
Erstellen Sie Ihre Website neu, indem Sie npm run build oder yarn build ausführen
Starten Sie den Entwicklungsserver neu, falls er lokal läuft

Tipp: Das Feld scripts akzeptiert ein Array von JavaScript-Quellen. Das Script-Tag wird automatisch im HTML-Head jeder Seite eingefügt. Dies ist die sauberste und wartungsfreundlichste Methode für Docusaurus-Websites.

Alternative Methode 1: String-Format (einfachere Syntax)

Wenn Sie einen einfacheren Ansatz bevorzugen, können Sie das String-Format im scripts-Array verwenden:

const config = {
  scripts: [
    'https://asyntai.com/static/js/chat-widget.js',
  ],
};

Hinweis: Bei Verwendung des String-Formats müssen Sie die Script-URL anpassen, um Ihre Widget-ID als Query-Parameter einzufügen, oder das in Schritt 2 gezeigte Objektformat verwenden, mit dem Sie das Attribut data-asyntai-id direkt setzen können.

Alternative Methode 2: Benutzerdefinierte Head-Tags

Sie können das Script auch über das Feld headTags in docusaurus.config.js hinzufügen:

const config = {
  headTags: [
    {
      tagName: 'script',
      attributes: {
        src: 'https://asyntai.com/static/js/chat-widget.js',
        'data-asyntai-id': 'YOUR_WIDGET_ID',
        async: true,
      },
    },
  ],
};

Tipp: Das Feld headTags bietet mehr Kontrolle über die genauen HTML-Tags, die in den <head>-Bereich eingefügt werden. Diese Methode ist funktional gleichwertig mit der Verwendung des scripts-Feldes.

Alternative Methode 3: Benutzerdefiniertes HTML-Template (Fortgeschritten)

Für fortgeschrittene Benutzer, die vollständige Kontrolle über das HTML-Template benötigen:

Erstellen Sie ein neues Verzeichnis: src/theme (falls es noch nicht existiert)
Erstellen Sie eine Datei: src/theme/Root.js
Fügen Sie folgenden Code hinzu, um das Skript dynamisch einzubinden:

import React, { useEffect } from 'react';

export default function Root({children}) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://asyntai.com/static/js/chat-widget.js';
    script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
    script.async = true;
    document.head.appendChild(script);

    return () => {
      // Cleanup when component unmounts
      document.head.removeChild(script);
    };
  }, []);

  return <>{children}</>;
}

Speichern Sie die Datei und erstellen Sie Ihre Website neu

Wichtig: Die Root.js-Komponente umschließt Ihre gesamte Anwendung. Diese fortgeschrittene Methode sollte nur verwendet werden, wenn Sie benutzerdefinierte JavaScript-Logik benötigen oder spezifische Anforderungen haben, die mit dem Konfigurationsdatei-Ansatz nicht erfüllt werden können.

Alternative Methode 4: Footer-Komponente swizzlen

Sie können den Footer anpassen, um das Script einzubinden:

Führen Sie den Swizzle-Befehl aus: npm run swizzle @docusaurus/theme-classic Footer -- --eject
Dadurch wird eine Kopie der Footer-Komponente in src/theme/Footer/ erstellt
Bearbeiten Sie die Footer-Komponente, um Ihr Script-Tag einzufügen
Fügen Sie das Script vor dem schließenden Tag des Footers ein
Speichern Sie und erstellen Sie Ihre Website neu

Hinweis: Swizzling gibt Ihnen volle Kontrolle über Docusaurus-Komponenten, bedeutet aber, dass Sie diese Komponente selbst pflegen müssen. Aktualisierungen von Docusaurus werden geschwizzelte Komponenten nicht automatisch aktualisieren.

Schritt 3: Erstellen und Bereitstellen

Nachdem Sie den Code hinzugefügt haben, erstellen und veröffentlichen Sie Ihre Docusaurus-Website:

# Build the site
npm run build

# Or with Yarn
yarn build

# Deploy to your hosting platform
# (Vercel, Netlify, GitHub Pages, etc.)

Tipp: Während der Entwicklung führen Sie npm start oder yarn start aus, um Ihre Änderungen lokal in der Vorschau zu sehen. Der Chatbot sollte in der unteren rechten Ecke auf allen Seiten erscheinen.

Schritt 4: Installation überprüfen

Öffnen Sie nach dem Deployment Ihre Dokumentationswebsite in einem neuen Browser-Tab. Sie sollten den Chat-Widget-Button in der unteren rechten Ecke sehen. Klicken Sie darauf, um sicherzustellen, dass er sich öffnet und korrekt funktioniert.

Widget nicht sichtbar? Stellen Sie sicher, dass Sie Ihre Website nach den Änderungen neu erstellt haben. Überprüfen Sie, ob Sie YOUR_WIDGET_ID durch Ihre tatsächliche Widget-ID aus dem Dashboard ersetzt haben. Leeren Sie Ihren Browser-Cache oder verwenden Sie den Inkognito-Modus. Öffnen Sie die Browser-Konsole (F12), um nach JavaScript-Fehlern zu suchen.