Jak přidat Asyntai AI Chatbota na Docusaurus

Průvodce krok za krokem pro dokumentační weby Docusaurus

Platforma:

Krok 1: Získejte svůj vkládací kód

Nejprve přejděte na svůj Asyntai Dashboard a přejděte dolů k sekci „Embed Code". Zkopírujte svůj unikátní kód pro vložení, který bude vypadat takto:

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

Poznámka: Kód výše je pouze příklad. Musíte zkopírovat svůj vlastní unikátní kód pro vložení z vašeho Dashboardu, protože obsahuje vaše osobní ID widgetu.

Krok 2: Přidání skriptu do docusaurus.config.js (doporučeno)

Nejlepší způsob, jak přidat chatbota na všechny stránky vašeho Docusaurus webu, je prostřednictvím konfiguračního souboru:

Otevřete svůj Docusaurus projekt v editoru kódu
Najděte a otevřete soubor docusaurus.config.js v kořenovém adresáři projektu
Najděte objekt const config = { }
Přidejte nebo aktualizujte pole scripts s vaším Asyntai widgetem:

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 soubor docusaurus.config.js
Sestavte web znovu spuštěním npm run build nebo yarn build
Restartujte vývojový server, pokud běží lokálně

Tip: Pole scripts přijímá pole zdrojů JavaScriptu. Značka script bude automaticky vložena do HTML hlavičky každé stránky. Toto je nejčistší a nejudržovatelnější metoda pro Docusaurus weby.

Alternativní metoda 1: Formát řetězce (jednodušší syntaxe)

Pokud preferujete jednodušší přístup, můžete použít formát řetězce v poli scripts:

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

Poznámka: Při použití formátu řetězce budete muset upravit URL skriptů tak, aby obsahovalo ID widgetu jako parametr dotazu, nebo použijte formát objektu uvedený v kroku 2, který umožňuje přímo nastavit atribut data-asyntai-id.

Alternativní metoda 2: Vlastní značky hlavičky

Skript můžete také přidat pomocí pole 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ětší kontrolu nad přesnými HTML značkami vkládanými do sekce <head>. Tato metoda je funkčně ekvivalentní použití pole scripts.

Alternativní metoda 3: Vlastní HTML šablona (pokročilé)

Pro pokročilé uživatele, kteří potřebují úplnou kontrolu nad HTML šablonou:

Vytvořte nový adresář: src/theme (pokud neexistuje)
Vytvořte soubor: src/theme/Root.js
Přidejte následující kód pro dynamické vložení 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 soubor a znovu sestavte svůj web

Důležité: Komponenta Root.js obaluje celou vaši aplikaci. Tato pokročilá metoda by měla být použita pouze v případě, že potřebujete vlastní JavaScript logiku nebo máte specifické požadavky, které nelze splnit pomocí přístupu s konfiguračním souborem.

Alternativní metoda 4: Swizzle komponenty Footer

Footer si můžete přizpůsobit tak, aby obsahoval skript:

Spusťte příkaz swizzle: npm run swizzle @docusaurus/theme-classic Footer -- --eject
Tím se vytvoří kopie komponenty Footer v src/theme/Footer/
Upravte komponentu Footer tak, aby obsahovala vaši značku script
Přidejte skript před uzavírací značku footeru
Uložte a znovu sestavte svůj web

Poznámka: Swizzling vám dává plnou kontrolu nad komponentami Docusaurus, ale znamená to, že budete muset danou komponentu udržovat sami. Aktualizace Docusaurus nebudou automaticky aktualizovat swizzlované komponenty.

Krok 3: Sestavení a nasazení

Po přidání kódu sestavte a nasaďte svůj Docusaurus web:

# Build the site
npm run build

# Or with Yarn
yarn build

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

Tip: Během vývoje spusťte npm start nebo yarn start pro lokální náhled změn. Chatbot by se měl zobrazit v pravém dolním rohu na všech stránkách.

Krok 4: Ověření instalace

Po nasazení změn otevřete svůj dokumentační web v nové záložce prohlížeče. V pravém dolním rohu byste měli vidět tlačítko chatovacího widgetu. Klikněte na něj a ověřte, že se správně otevírá a funguje.

Nevidíte widget? Vymažte mezipaměť prohlížeče nebo stránku zobrazte v anonymním režimu. Otevřete konzoli prohlížeče (F12) a zkontrolujte, zda neobsahuje nějaké JavaScript chyby.

Dokumentace