Kuidas lisada Asyntai tehisintellekti vestlusrobot Docusaurusele

Samm-sammuline juhend Docusauruse dokumentatsioonisaitide jaoks

Platvorm:

1. samm: hankige oma manuskood

Esmalt minge oma Asyntai juhtpaneelile ja kerige alla jaotiseni "Manuskood". Kopeerige oma unikaalne manuskood, mis näeb välja selline:

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

Märkus: Ülalolev kood on vaid näide. Peate kopeerima oma unikaalse manuskoodi oma juhtpaneelilt, kuna see sisaldab teie isiklikku vidina ID-d.

2. samm: lisage skript faili docusaurus.config.js (soovitatav)

Parim viis vestlusroboti lisamiseks kõikidele oma Docusauruse saidi lehtedele on konfiguratsioonifaili kaudu:

Avage oma Docusauruse projekt koodiredaktoris
Leidke ja avage fail docusaurus.config.js oma projekti juurkaustas
Leidke objekt const config = { }
Lisage või uuendage väli scripts oma Asyntai vidinaga:

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

Salvestage fail docusaurus.config.js
Ehitage oma sait uuesti, käivitades npm run build või yarn build
Taaskäivitage arendusserver, kui see töötab kohapeal

Vihje: Väli scripts aktsepteerib JavaScripti allikate massiivi. Skriptisilt lisatakse automaatselt iga lehe HTML-päisesse. See on puhtaim ja kõige paremini hooldatav meetod Docusauruse saitide jaoks.

Alternatiivne meetod 1: stringivorming (lihtsam süntaks)

Kui eelistate lihtsamat lähenemist, saate kasutada stringivormingut skriptide massiivis:

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

Märkus: Stringivormingu kasutamisel peate muutma skripti URL-i, et lisada oma vidina ID päringuparameetrina, või kasutama 2. sammus näidatud objektivormingut, mis võimaldab määrata atribuudi data-asyntai-id otse.

Alternatiivne meetod 2: kohandatud päisesildid

Saate skripti lisada ka kasutades headTags välja failis 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,
      },
    },
  ],
};

Vihje: Väli headTags pakub rohkem kontrolli <head> jaotisesse sisestatud täpsete HTML-siltide üle. See meetod on funktsionaalselt samaväärne välja scripts kasutamisega.

Alternatiivne meetod 3: kohandatud HTML-mall (edasijõudnutele)

Edasijõudnud kasutajatele, kes vajavad täielikku kontrolli HTML-malli üle:

Looge uus kataloog: src/theme (kui seda ei eksisteeri)
Looge fail: src/theme/Root.js
Lisage järgmine kood skripti dünaamiliseks süstimiseks:

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

Salvestage fail ja ehitage oma sait uuesti

Oluline: Komponent Root.js mähib kogu teie rakendust. Seda edasijõudnud meetodit tuleks kasutada ainult siis, kui vajate kohandatud JavaScripti loogikat või teil on konkreetsed nõuded, mida konfiguratsioonifaili lähenemisega ei saa täita.

Alternatiivne meetod 4: jalusekomponendi swizzle

Saate jalust kohandada skripti lisamiseks:

Käivitage swizzle käsk: npm run swizzle @docusaurus/theme-classic Footer -- --eject
See loob jaluse komponendi koopia kausta src/theme/Footer/
Muutke jalusekomponenti, et lisada oma skriptimärgis
Lisage skript enne jaluse sulevat märgist
Salvestage ja ehitage oma sait uuesti üles

Märkus: Swizzle annab teile täieliku kontrolli Docusauruse komponentide üle, kuid see tähendab, et peate seda komponenti ise hooldama. Docusauruse uuendused ei uuenda automaatselt swizzle'itud komponente.

3. samm: Ehitage ja juurutage

Pärast koodi lisamist ehitage ja juurutage oma Docusauruse sait:

# Build the site
npm run build

# Or with Yarn
yarn build

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

Vihje: Arenduse ajal käivitage npm start või yarn start, et vaadata oma muudatusi kohapeal. Vestlusrobot peaks ilmuma kõikide lehtede alumises paremas nurgas.

4. samm: kontrollige paigaldust

Pärast muudatuste juurutamist avage oma dokumentatsioonisait uues brauseri vahekaardil. Peaksite nägema vestlusvidina nuppu alumises paremas nurgas. Klõpsake sellel, et veenduda, et see avaneb ja töötab korrektselt.

Ei näe vidinat? Veenduge, et olete oma saidi pärast muudatuste tegemist uuesti ehitanud. Kontrollige, et asendasite YOUR_WIDGET_ID oma tegeliku vidina ID-ga juhtpaneelilt. Tühjendage brauseri vahemälu või vaadake inkognito režiimis. Avage brauseri konsool (F12), et kontrollida JavaScripti vigasid.

Dokumentatsioon