Sådan tilføjer du Asyntai AI-chatbot til Docusaurus

Trin-for-trin-guide til Docusaurus-dokumentationswebsteder

Platform:

Trin 1: Hent din indlejringskode

Gå først til dit Asyntai Dashboard og rul ned til sektionen "Indlejringskode". Kopiér din unikke indlejringskode, der vil se sådan ud:

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

Bemærk: Koden ovenfor er blot et eksempel. Du skal kopiere din egen unikke indlejringskode fra dit Dashboard, da den indeholder dit personlige widget-ID.

Trin 2: Tilføj script til docusaurus.config.js (anbefalet)

Den bedste måde at tilføje chatbotten til alle sider på dit Docusaurus-websted er via konfigurationsfilen:

Åbn dit Docusaurus-projekt i din kodeeditor
Find og åbn filen docusaurus.config.js i din projektrod
Find objektet const config = { }
Tilføj eller opdater feltet 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
};

Gem filen docusaurus.config.js
Genbyg dit websted ved at køre npm run build eller yarn build
Genstart udviklingsserveren, hvis den kører lokalt

Tip: Feltet scripts accepterer en array af JavaScript-kilder. Script-tagget indsættes automatisk i HTML-headeren på hver side. Dette er den reneste og mest vedligeholdelsesvenlige metode til Docusaurus-websteder.

Alternativ metode 1: Strengformat (enklere syntaks)

Hvis du foretrækker en enklere tilgang, kan du bruge strengformat i scripts-arrayen:

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

Bemærk: Når du bruger strengformat, skal du ændre script-URL'en for at inkludere dit widget-ID som en forespørgselsparameter, eller bruge objektformatet vist i Trin 2, som giver dig mulighed for at angive data-asyntai-id-attributten direkte.

Alternativ metode 2: Brugerdefinerede head-tags

Du kan også tilføje scriptet ved hjælp af 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,
      },
    },
  ],
};

Tip: Feltet headTags giver mere kontrol over de præcise HTML-tags, der indsættes i <head>-sektionen. Denne metode er funktionelt ækvivalent med at bruge scripts-feltet.

Alternativ metode 3: Brugerdefineret HTML-skabelon (avanceret)

For avancerede brugere, der har brug for fuld kontrol over HTML-skabelonen:

Opret en ny mappe: src/theme (hvis den ikke allerede eksisterer)
Opret en fil: src/theme/Root.js
Tilføj følgende kode for at injicere scriptet 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}</>;
}

Gem filen og genbyg dit websted

Vigtigt: Root.js-komponenten omslutter hele din applikation. Denne avancerede metode bør kun bruges, hvis du har brug for brugerdefineret JavaScript-logik eller har specifikke krav, der ikke kan opfyldes med konfigurationsfiltilgangen.

Alternativ metode 4: Swizzle Footer-komponent

Du kan tilpasse footeren til at inkludere scriptet:

Kør swizzle-kommandoen: npm run swizzle @docusaurus/theme-classic Footer -- --eject
Dette opretter en kopi af Footer-komponenten i src/theme/Footer/
Rediger Footer-komponenten for at inkludere dit script-tag
Tilføj scriptet før det afsluttende tag i footeren
Gem og genbyg dit websted

Bemærk: Swizzling giver dig fuld kontrol over Docusaurus-komponenter, men det betyder, at du selv skal vedligeholde den pågældende komponent. Opdateringer til Docusaurus vil ikke automatisk opdatere swizzled komponenter.

Trin 3: Byg og deploy

Efter at have tilføjet koden skal du bygge og deploye dit Docusaurus-websted:

# Build the site
npm run build

# Or with Yarn
yarn build

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

Tip: Under udvikling kan du køre npm start eller yarn start for at forhåndsvise dine ændringer lokalt. Chatbotten bør vises i nederste højre hjørne på alle sider.

Trin 4: Verificer installationen

Efter at have deployet dine ændringer skal du åbne dit dokumentationswebsted i en ny browserfane. Du bør se chat-widget-knappen i nederste højre hjørne. Klik på den for at sikre, at den åbner og fungerer korrekt.

Ser du ikke widget'en? Sørg for, at du har genbygget dit websted efter at have foretaget ændringer. Kontroller, at du erstattede YOUR_WIDGET_ID med dit faktiske widget-ID fra dashboardet. Ryd din browsercache eller se siden i inkognitotilstand. Åbn browserkonsollen (F12) for at tjekke for JavaScript-fejl.

Dokumentation