Hur du lägger till Asyntai AI-chattbot i Docusaurus

Steg-för-steg-guide för Docusaurus-dokumentationswebbplatser

Plattform:

Steg 1: Hämta din inbäddningskod

Gå först till din Asyntai-instrumentpanel och scrolla ner till avsnittet "Inbäddningskod". Kopiera din unika inbäddningskod som ser ut så här:

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

Obs! Koden ovan är bara ett exempel. Du måste kopiera din egen unika inbäddningskod från din Dashboard eftersom den innehåller ditt personliga widget-ID.

Steg 2: Lägg till skript i docusaurus.config.js (rekommenderas)

Det bästa sättet att lägga till chattboten på alla sidor på din Docusaurus-webbplats är via konfigurationsfilen:

Öppna ditt Docusaurus-projekt i din kodredigerare
Hitta och öppna filen docusaurus.config.js i din projektrot
Hitta objektet const config = { }
Lägg till eller uppdatera fältet scripts med din 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
};

Spara filen docusaurus.config.js
Bygg om din webbplats genom att köra npm run build eller yarn build
Starta om utvecklingsservern om du kör lokalt

Tips: Fältet scripts accepterar en array av JavaScript-källor. Skripttaggen infogas automatiskt i HTML-head på varje sida. Det här är den renaste och mest underhållbara metoden för Docusaurus-webbplatser.

Alternativ metod 1: Strängformat (enklare syntax)

Om du föredrar ett enklare tillvägagångssätt kan du använda strängformat i skript-arrayen:

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

Obs! När du använder strängformat behöver du ändra script-URL:en för att inkludera ditt widget-ID som en frågeparameter, eller använda objektformatet som visas i steg 2 som låter dig ställa in attributet data-asyntai-id direkt.

Alternativ metod 2: Anpassade head-taggar

Du kan också lägga till scriptet med fältet headTags i 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,
      },
    },
  ],
};

Tips: Fältet headTags ger mer kontroll över de exakta HTML-taggarna som infogas i <head>-sektionen. Den här metoden är funktionellt likvärdig med att använda fältet scripts.

Alternativ metod 3: Anpassad HTML-mall (avancerat)

För avancerade användare som behöver full kontroll över HTML-mallen:

Skapa en ny katalog: src/theme (om den inte finns)
Skapa en fil: src/theme/Root.js
Lägg till följande kod för att injicera skriptet dynamiskt:

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

Spara filen och bygg om din webbplats

Viktigt: Root.js-komponenten omsluter hela din applikation. Den här avancerade metoden bör endast användas om du behöver anpassad JavaScript-logik eller har specifika krav som inte kan uppfyllas med konfigurationsfilsmetoden.

Alternativ metod 4: Swizzle-sidfotkomponent

Du kan anpassa sidfoten för att inkludera scriptet:

Kör swizzle-kommandot: npm run swizzle @docusaurus/theme-classic Footer -- --eject
Det här skapar en kopia av Footer-komponenten i src/theme/Footer/
Redigera sidfotkomponenten för att inkludera din script-tagg
Lägg till skriptet före den avslutande taggen i sidfoten
Spara och bygg om din webbplats

Obs! Swizzling ger dig full kontroll över Docusaurus-komponenter, men det innebär att du måste underhålla den komponenten själv. Uppdateringar av Docusaurus uppdaterar inte automatiskt swizzlade komponenter.

Steg 3: Bygg och driftsätt

När du har lagt till koden, bygg och driftsätt din Docusaurus-webbplats:

# Build the site
npm run build

# Or with Yarn
yarn build

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

Tips: Under utveckling, kör npm start eller yarn start för att förhandsgranska dina ändringar lokalt. Chattboten ska visas i det nedre högra hörnet på alla sidor.

Steg 4: Verifiera installationen

Efter att du har driftsatt dina ändringar, öppna din dokumentationswebbplats i en ny webbläsarflik. Du bör se widgetknappen för chatten i det nedre högra hörnet. Klicka på den för att säkerställa att den öppnas och fungerar korrekt.

Ser du inte widgeten? Se till att du byggt om din webbplats efter att ha gjort ändringar. Kontrollera att du ersatte YOUR_WIDGET_ID med ditt faktiska widget-ID från instrumentpanelen. Rensa webbläsarens cache eller visa sidan i inkognitoläge. Öppna webbläsarkonsolen (F12) för att kontrollera eventuella JavaScript-fel.

Dokumentation