Slik legger du til Asyntai AI-chatbot i Docusaurus

Trinn-for-trinn-guide for Docusaurus-dokumentasjonssider

Plattform:

Trinn 1: Hent innbyggingskoden din

Gå først til Asyntai-dashbordet ditt og bla ned til «Innbyggingskode»-seksjonen. Kopier din unike innbyggingskode som vil se slik ut:

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

Merk: Koden ovenfor er bare et eksempel. Du må kopiere din egen unike innbyggingskode fra Dashbordet ditt, da den inneholder din personlige widget-ID.

Trinn 2: Legg til skript i docusaurus.config.js (anbefalt)

Den beste måten å legge til chatboten på alle sider av Docusaurus-nettstedet ditt er gjennom konfigurasjonsfilen:

Åpne Docusaurus-prosjektet ditt i koderedigeringsprogrammet
Finn og åpne filen docusaurus.config.js i prosjektets rotmappe
Finn const config = { }-objektet
Legg til eller oppdater scripts-feltet med Asyntai-widgeten din:

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

Lagre filen docusaurus.config.js
Bygg nettstedet på nytt ved å kjøre npm run build eller yarn build
Start utviklingsserveren på nytt hvis du kjører lokalt

Tips: Scripts-feltet godtar en liste med JavaScript-kilder. Script-taggen vil bli satt inn i HTML-hodet på hver side automatisk. Dette er den reneste og mest vedlikeholdbare metoden for Docusaurus-nettsteder.

Alternativ metode 1: Strengformat (enklere syntaks)

Hvis du foretrekker en enklere tilnærming, kan du bruke strengformat i scripts-listen:

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

Merk: Når du bruker strengformat, må du endre skript-URL-en for å inkludere widget-ID-en din som en spørreparameter, eller bruke objektformatet vist i trinn 2 som lar deg sette data-asyntai-id-attributtet direkte.

Alternativ metode 2: Egendefinerte head-tagger

Du kan også legge til skriptet ved hjelp av headTags-feltet 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: HeadTags-feltet gir mer kontroll over de nøyaktige HTML-taggene som settes inn i <head>-seksjonen. Denne metoden er funksjonelt lik bruk av scripts-feltet.

Alternativ metode 3: Egendefinert HTML-mal (avansert)

For avanserte brukere som trenger full kontroll over HTML-malen:

Opprett en ny mappe: src/theme (hvis den ikke finnes)
Opprett en fil: src/theme/Root.js
Legg til følgende kode for å injisere skriptet dynamisk:

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

Lagre filen og bygg nettstedet på nytt

Viktig: Root.js-komponenten omslutter hele applikasjonen din. Denne avanserte metoden bør kun brukes hvis du trenger egendefinert JavaScript-logikk eller har spesifikke krav som ikke kan oppfylles med konfigurasjonsfilm-tilnærmingen.

Alternativ metode 4: Swizzle Footer-komponent

Du kan tilpasse bunnteksten for å inkludere skriptet:

Kjør swizzle-kommandoen: npm run swizzle @docusaurus/theme-classic Footer -- --eject
Dette oppretter en kopi av Footer-komponenten i src/theme/Footer/
Rediger Footer-komponenten for å inkludere skript-taggen din
Legg til skriptet før den avsluttende taggen i bunnteksten
Lagre og bygg nettstedet på nytt

Merk: Swizzling gir deg full kontroll over Docusaurus-komponenter, men det betyr at du selv må vedlikeholde den komponenten. Oppdateringer av Docusaurus vil ikke automatisk oppdatere swizzlede komponenter.

Trinn 3: Bygg og distribuer

Etter at du har lagt til koden, bygg og distribuer Docusaurus-nettstedet ditt:

# Build the site
npm run build

# Or with Yarn
yarn build

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

Tips: Under utvikling, kjør npm start eller yarn start for å forhåndsvise endringene lokalt. Chatboten bør vises i nedre høyre hjørne på alle sider.

Trinn 4: Bekreft installasjonen

Etter at du har distribuert endringene, åpne dokumentasjonsnettstedet i en ny nettleserfane. Du bør se chatwidget-knappen i nedre høyre hjørne. Klikk på den for å sikre at den åpnes og fungerer riktig.

Ser du ikke widgeten? Sørg for at du har bygget nettstedet på nytt etter endringer. Sjekk at du har erstattet YOUR_WIDGET_ID med din faktiske widget-ID fra dashbordet. Tøm nettleserens hurtigbuffer eller se i inkognitomodus. Åpne nettleserkonsollen (F12) for å sjekke eventuelle JavaScript-feil.

Dokumentasjon