Kako dodati Asyntai AI chatbot na Docusaurus

Vodič korak po korak za Docusaurus dokumentacijske stranice

Platforma:

Korak 1: Nabavite svoj kod za ugradnju

Prvo idite na svoju Asyntai nadzornu ploču i pomaknite se prema dolje do odjeljka "Kod za ugradnju". Kopirajte svoj jedinstveni kod za ugradnju koji će izgledati ovako:

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

Napomena: Gornji kod je samo primjer. Morate kopirati svoj vlastiti jedinstveni kod za ugradnju sa svoje Nadzorne ploče jer sadrži vaš osobni ID widgeta.

Korak 2: Dodajte skriptu u docusaurus.config.js (Preporučeno)

Najbolji nacin za dodavanje chatbota na sve stranice vase Docusaurus stranice je putem konfiguracijske datoteke:

Otvorite svoj Docusaurus projekt u uređivaču koda
Pronadite i otvorite datoteku docusaurus.config.js u korijenu projekta
Pronađite objekt const config = { }
Dodajte ili azurirajte polje scripts sa svojim Asyntai widgetom:

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

Spremite datoteku docusaurus.config.js
Ponovno izgradite stranicu pokretanjem npm run build ili yarn build
Ponovno pokrenite razvojni poslužitelj ako radite lokalno

Savjet: Polje scripts prihvaca niz JavaScript izvora. Oznaka skripte automatski ce biti umetnuta u HTML zaglavlje svake stranice. Ovo je najcisci i najodrživiji nacin za Docusaurus stranice.

Alternativna metoda 1: Format niza znakova (Jednostavnija sintaksa)

Ako preferirate jednostavniji pristup, mozete koristiti format niza znakova u polju scripts:

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

Napomena: Kada koristite format niza znakova, morat cete izmijeniti URL skripte da ukljuci vas ID widgeta kao parametar upita, ili koristiti format objekta prikazan u Koraku 2 koji vam omogucuje izravno postavljanje atributa data-asyntai-id.

Alternativna metoda 2: Prilagodene oznake zaglavlja

Skriptu mozete dodati i koristeci polje headTags u 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,
      },
    },
  ],
};

Savjet: Polje headTags pruza vise kontrole nad tocnim HTML oznakama umetnutima u odjeljak <head>. Ova metoda je funkcionalno jednaka koristenju polja scripts.

Alternativna metoda 3: Prilagodeni HTML predložak (Napredno)

Za napredne korisnike kojima je potrebna potpuna kontrola nad HTML predloškom:

Izradite novi direktorij: src/theme (ako ne postoji)
Izradite datoteku: src/theme/Root.js
Dodajte sljedeći kod za dinamičko ubacivanje skripte:

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

Spremite datoteku i ponovno izgradite stranicu

Važno: Komponenta Root.js omotava cijelu vasu aplikaciju. Ova napredna metoda trebala bi se koristiti samo ako trebate prilagodenu JavaScript logiku ili imate posebne zahtjeve koji se ne mogu ispuniti pristupom konfiguracijske datoteke.

Alternativna metoda 4: Swizzle komponenta podnožja

Možete prilagoditi podnožje da uključi skriptu:

Pokrenite naredbu swizzle: npm run swizzle @docusaurus/theme-classic Footer -- --eject
Ovo stvara kopiju komponente Footer u src/theme/Footer/
Uredite komponentu Footer da uključi vašu oznaku skripte
Dodajte skriptu prije završne oznake podnožja
Spremite i ponovno izgradite stranicu

Napomena: Swizzling vam daje potpunu kontrolu nad Docusaurus komponentama, ali to znači da ćete tu komponentu morati sami održavati. Ažuriranja Docusaurusa neće automatski ažurirati swizzlane komponente.

Korak 3: Izgradite i postavite

Nakon dodavanja koda, izgradite i postavite svoju Docusaurus stranicu:

# Build the site
npm run build

# Or with Yarn
yarn build

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

Savjet: Tijekom razvoja pokrenite npm start ili yarn start za lokalni pregled promjena. Chatbot bi se trebao pojaviti u donjem desnom kutu na svim stranicama.

Korak 4: Provjerite instalaciju

Nakon postavljanja promjena, otvorite svoju dokumentacijsku stranicu u novoj kartici preglednika. Trebali biste vidjeti gumb widgeta za razgovor u donjem desnom kutu. Kliknite ga kako biste provjerili otvara li se i radi li ispravno.

Ne vidite widget? Provjerite jeste li ponovno izgradili stranicu nakon promjena. Provjerite jeste li zamijenili YOUR_WIDGET_ID svojim stvarnim ID-jem widgeta s nadzorne ploče. Očistite predmemoriju preglednika ili pregledavajte u anonimnom načinu. Otvorite konzolu preglednika (F12) da provjerite postoje li JavaScript greške.

Dokumentacija