Hoe voegt u de Asyntai AI-chatbot toe aan Docusaurus

Stapsgewijze handleiding voor Docusaurus-documentatiesites

Platform:

Stap 1: Uw insluitcode ophalen

Ga eerst naar uw Asyntai Dashboard en scroll naar het gedeelte "Insluitcode". Kopieer uw unieke insluitcode die er als volgt uitziet:

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

Opmerking: De bovenstaande code is slechts een voorbeeld. U moet uw eigen unieke insluitcode kopiëren vanuit uw Dashboard omdat deze uw persoonlijke widget-ID bevat.

Stap 2: Script toevoegen aan docusaurus.config.js (aanbevolen)

De beste manier om de chatbot aan alle pagina's van uw Docusaurus-site toe te voegen is via het configuratiebestand:

Open uw Docusaurus-project in uw code-editor
Zoek en open het bestand docusaurus.config.js in uw projecthoofdmap
Zoek het const config = { }-object
Voeg het scripts-veld toe of werk het bij met uw Asyntai-widget:

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

Sla het bestand docusaurus.config.js op
Bouw uw site opnieuw door npm run build of yarn build uit te voeren
Herstart de ontwikkelingsserver als u lokaal draait

Tip: Het scripts-veld accepteert een array van JavaScript-bronnen. De scripttag wordt automatisch in de HTML-head van elke pagina ingevoegd. Dit is de schoonste en best onderhoudbare methode voor Docusaurus-sites.

Alternatieve methode 1: Tekenreeksformaat (eenvoudigere syntax)

Als u de voorkeur geeft aan een eenvoudigere aanpak, kunt u tekenreeksformaat gebruiken in de scripts-array:

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

Opmerking: Bij gebruik van tekenreeksformaat moet u de script-URL aanpassen om uw widget-ID als queryparameter op te nemen, of het objectformaat gebruiken dat in stap 2 wordt getoond, waarmee u het data-asyntai-id-attribuut rechtstreeks kunt instellen.

Alternatieve methode 2: Aangepaste head-tags

U kunt het script ook toevoegen met het headTags-veld in docusaurus.config.js:

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

Tip: Het headTags-veld biedt meer controle over de exacte HTML-tags die in de <head>-sectie worden ingevoegd. Deze methode is functioneel equivalent aan het gebruik van het scripts-veld.

Alternatieve methode 3: Aangepast HTML-sjabloon (geavanceerd)

Voor gevorderde gebruikers die volledige controle over het HTML-sjabloon nodig hebben:

Maak een nieuwe map aan: src/theme (als deze nog niet bestaat)
Maak een bestand aan: src/theme/Root.js
Voeg de volgende code toe om het script dynamisch te injecteren:

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}</>;
}

Sla het bestand op en bouw uw site opnieuw

Belangrijk: De Root.js-component omhult uw volledige applicatie. Deze geavanceerde methode mag alleen worden gebruikt als u aangepaste JavaScript-logica nodig hebt of specifieke vereisten hebt die niet met de configuratiebestandaanpak kunnen worden vervuld.

Alternatieve methode 4: Footer-component swizzlen

U kunt de footer aanpassen om het script op te nemen:

Voer het swizzle-commando uit: npm run swizzle @docusaurus/theme-classic Footer -- --eject
Dit maakt een kopie van de Footer-component in src/theme/Footer/
Bewerk de Footer-component om uw scripttag op te nemen
Voeg het script toe vóór de sluitende tag van de footer
Sla op en bouw uw site opnieuw

Opmerking: Swizzling geeft u volledige controle over Docusaurus-componenten, maar het betekent dat u dat component zelf moet onderhouden. Updates van Docusaurus werken geswizzlede componenten niet automatisch bij.

Stap 3: Bouwen en deployen

Na het toevoegen van de code, bouw en implementeer uw Docusaurus-site:

# Build the site
npm run build

# Or with Yarn
yarn build

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

Tip: Voer tijdens de ontwikkeling npm start of yarn start uit om uw wijzigingen lokaal te bekijken. De chatbot zou in de rechteronderhoek op alle pagina's moeten verschijnen.

Stap 4: Installatie verifiëren

Nadat u uw wijzigingen hebt gedeployed, opent u uw documentatiesite in een nieuw browsertabblad. U zou de chatwidgetknop in de rechteronderhoek moeten zien. Klik erop om te controleren of deze correct opent en functioneert.

Ziet u de widget niet? Zorg ervoor dat u uw site opnieuw hebt gebouwd na het aanbrengen van wijzigingen. Controleer of u YOUR_WIDGET_ID hebt vervangen door uw daadwerkelijke widget-ID uit het dashboard. Wis uw browsercache of bekijk in incognitomodus. Open de browserconsole (F12) om te controleren op JavaScript-fouten.

Documentatie