Cum să adăugați Chatbot-ul AI Asyntai în Docusaurus

Ghid pas cu pas pentru site-urile de documentație Docusaurus

Platformă:

Pasul 1: Obțineți codul de încorporare

Mai întâi, accesați Tabloul de bord Asyntai și derulați în jos până la secțiunea "Cod de încorporare". Copiați codul unic de încorporare care va arăta astfel:

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

Notă: Codul de mai sus este doar un exemplu. Trebuie să copiați propriul cod unic de încorporare din Tabloul de bord, deoarece conține ID-ul personal al widgetului dvs.

Pasul 2: Adăugați scriptul în docusaurus.config.js (Recomandat)

Cel mai bun mod de a adăuga chatbot-ul pe toate paginile site-ului Docusaurus este prin fișierul de configurare:

Deschideți proiectul Docusaurus în editorul de cod
Localizați și deschideți fișierul docusaurus.config.js din rădăcina proiectului
Găsiți obiectul const config = { }
Adăugați sau actualizați câmpul scripts cu widget-ul 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
};

Salvați fișierul docusaurus.config.js
Reconstruiți site-ul rulând npm run build sau yarn build
Reporniți serverul de dezvoltare dacă rulați local

Sfat: Câmpul scripts acceptă un array de surse JavaScript. Eticheta script va fi inserată automat în head-ul HTML al fiecărei pagini. Aceasta este metoda cea mai curată și mai ușor de întreținut pentru site-urile Docusaurus.

Metoda alternativă 1: Format string (Sintaxă mai simplă)

Dacă preferați o abordare mai simplă, puteți utiliza formatul string în array-ul de scripturi:

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

Notă: Când utilizați formatul string, va trebui să modificați URL-ul scriptului pentru a include ID-ul widget-ului ca parametru de interogare, sau să utilizați formatul obiect prezentat în Pasul 2 care vă permite să setați atributul data-asyntai-id direct.

Metoda alternativă 2: Etichete Head personalizate

De asemenea, puteți adăuga scriptul folosind câmpul headTags în 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,
      },
    },
  ],
};

Sfat: Câmpul headTags oferă mai mult control asupra etichetelor HTML exacte inserate în secțiunea <head>. Această metodă este funcțional echivalentă cu utilizarea câmpului scripts.

Metoda alternativă 3: Șablon HTML personalizat (Avansat)

Pentru utilizatorii avansați care au nevoie de control complet asupra șablonului HTML:

Creați un director nou: src/theme (dacă nu există)
Creați un fișier: src/theme/Root.js
Adăugați următorul cod pentru a injecta scriptul dinamic:

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

Salvați fișierul și reconstruiți site-ul

Important: Componenta Root.js învelește întreaga aplicație. Această metodă avansată ar trebui utilizată doar dacă aveți nevoie de logică JavaScript personalizată sau aveți cerințe specifice care nu pot fi îndeplinite cu abordarea prin fișierul de configurare.

Metoda alternativă 4: Componenta Swizzle Footer

Puteți personaliza subsolul pentru a include scriptul:

Rulați comanda swizzle: npm run swizzle @docusaurus/theme-classic Footer -- --eject
Aceasta creează o copie a componentei Footer în src/theme/Footer/
Editați componenta Footer pentru a include eticheta script
Adăugați scriptul înainte de eticheta de închidere a subsolului
Salvați și reconstruiți site-ul

Notă: Swizzling-ul vă oferă control complet asupra componentelor Docusaurus, dar înseamnă că va trebui să întrețineți acea componentă singuri. Actualizările Docusaurus nu vor actualiza automat componentele modificate prin swizzle.

Pasul 3: Construiți și implementați

După ce ați adăugat codul, construiți și implementați site-ul Docusaurus:

# Build the site
npm run build

# Or with Yarn
yarn build

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

Sfat: În timpul dezvoltării, rulați npm start sau yarn start pentru a previzualiza modificările local. Chatbot-ul ar trebui să apară în colțul din dreapta jos pe toate paginile.

Pasul 4: Verificați instalarea

După implementarea modificărilor, deschideți site-ul de documentație într-o filă nouă de browser. Ar trebui să vedeți butonul widget-ului de chat în colțul din dreapta jos. Faceți clic pe el pentru a vă asigura că se deschide și funcționează corect.

Nu vedeți widgetul? Asigurați-vă că ați reconstruit site-ul după ce ați făcut modificări. Verificați că ați înlocuit YOUR_WIDGET_ID cu ID-ul real al widget-ului din tabloul de bord. Goliți cache-ul browserului sau vizualizați în modul incognito. Deschideți consola browserului (F12) pentru a verifica eventualele erori JavaScript.

Documentație