Ako pridať Asyntai AI chatbota do Docusaurus

Návod krok za krokom pre dokumentačné stránky Docusaurus

Platforma:

Krok 1: Získajte svoj vkladací kód

Najprv prejdite na svoj Asyntai Dashboard a prejdite nadol k sekcii „Vkladací kód“. Skopírujte svoj jedinečný vkladací kód, ktorý bude vyzerať takto:

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

Poznámka: Kód vyššie je len príklad. Musíte skopírovať svoj vlastný jedinečný vkladací kód zo svojho Dashboardu, pretože obsahuje vaše osobné ID widgetu.

Krok 2: Pridanie skriptu do docusaurus.config.js (odporúčané)

Najlepší sposob pridania chatbota na všetky stránky vasej stránky Docusaurus je cez konfiguračný súbor:

Otvorte svoj projekt Docusaurus vo vasom editore kodu
Najdite a otvorte súbor docusaurus.config.js v koreni vasho projektu
Najdite objekt const config = { }
Pridajte alebo aktualizujte pole scripts s vasim widgetom Asyntai:

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

Uložte súbor docusaurus.config.js
Prestavajte svoju stránku spustenim npm run build alebo yarn build
Restartujte vývojový server, ak bežíte lokálne

Tip: Pole scripts prijima pole zdrojov JavaScriptu. Tag skriptu bude automaticky vložený do HTML hlavičky kazdej stránky. Toto je najcistejsia a najlahsie udrzovatelna metoda pre stránky Docusaurus.

Alternativna metoda 1: Retazcovy format (jednoduchsia syntax)

Ak uprednostnujete jednoduchší prístup, môžete pouzit retazcovy format v poli scripts:

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

Poznámka: Pri pouziti retazcoveho formatu budete musiet upravit URL skriptu tak, aby zahrnovala vase ID widgetu ako parameter dotazu, alebo použite format objektu zobrazeny v Kroku 2, ktory vam umoznuje priamo nastavit atribut data-asyntai-id.

Alternativna metoda 2: Vlastné tagy hlavičky

Skript môžete tiež pridat pomocou pola headTags v 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: Pole headTags poskytuje väčšiu kontrolu nad presnymi HTML tagmi vlozenymi do sekcie <head>. Tato metoda je funkčne ekvivalentna pouzitiu pola scripts.

Alternativna metoda 3: Vlastna HTML šablóna (pokročilé)

Pre pokročilých používateľov, ktorí potrebujú úplnú kontrolu nad HTML šablónou:

Vytvorte novy priečinok: src/theme (ak neexistuje)
Vytvorte súbor: src/theme/Root.js
Pridajte nasledujuci kod na dynamicke vloženie skriptu:

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

Uložte súbor a prestavajte svoju stránku

Dôležité: Komponent Root.js obaluje celu vasu aplikaciu. Tato pokrocila metoda by sa mala pouzivat len v pripade, ze potrebujete vlastnú logiku JavaScriptu alebo mate specificke poziadavky, ktore sa nedaju splnit prístupom s konfiguracnym súborom.

Alternativna metoda 4: Swizzle komponentu paty

Môžete prispôsobiť patu tak, aby zahrnovala skript:

Spustite prikaz swizzle: npm run swizzle @docusaurus/theme-classic Footer -- --eject
Toto vytvori kopiu komponentu paty v src/theme/Footer/
Upravte komponent paty tak, aby zahrnoval vas tag skriptu
Pridajte skript pred uzatvaraci tag paty
Uložte a prestavajte svoju stránku

Poznámka: Swizzling vam dava plnu kontrolu nad komponentmi Docusaurus, ale znamena, ze budete musiet tento komponent udržovať sami. Aktualizacie Docusaurus nebudu automaticky aktualizovat swizzlovane komponenty.

Krok 3: Zostavenie a nasadenie

Po pridani kodu zostavte a nasadte svoju stránku Docusaurus:

# Build the site
npm run build

# Or with Yarn
yarn build

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

Tip: Pocas vyvoja spustite npm start alebo yarn start na lokalny nahlad vasich zmien. Chatbot by sa mal zobrazit v pravom dolnom rohu na všetkých strankach.

Krok 4: Overenie inštalácie

Po nasadeni vasich zmien otvorte svoju dokumentacnu stránku v novej karte prehliadača. Mali by ste vidiet tlačidlo chatoveho widgetu v pravom dolnom rohu. Kliknite nan, aby ste sa uistili, ze sa otvara a funguje správne.

Nevidíte widget? Uistite sa, ze ste prestavali svoju stránku po vykonani zmien. Skontrolujte, ze ste nahradili YOUR_WIDGET_ID vasim skutocnym ID widgetu z dashboardu. Vymažte vyrovnávaciu pamat prehliadača alebo zobrazite web v rezime inkognito. Otvorte konzolu prehliadača (F12) a skontrolujte pripadne chyby JavaScriptu.

Dokumentácia