Asyntai AI -chatbotin lisääminen Docusaurus-alustalle

Vaiheittainen opas Docusaurus-dokumentaatiosivustoille

Alusta:

Vaihe 1: Hanki upotuskoodisi

Siirry ensin Asyntai-hallintapaneeliin ja vieritä alas "Upotuskoodi"-osioon. Kopioi yksilöllinen upotuskoodisi, joka näyttää tältä:

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

Huomautus: Yllä oleva koodi on vain esimerkki. Sinun on kopioitava oma yksilöllinen upotuskoodisi Hallintapaneelistasi, sillä se sisältää henkilökohtaisen widget-tunnuksesi.

Vaihe 2: Lisää skripti docusaurus.config.js-tiedostoon (suositeltu)

Paras tapa lisätä chatbot kaikille Docusaurus-sivustosi sivuille on konfiguraatiotiedoston kautta:

Avaa Docusaurus-projektisi koodieditorissa
Etsi ja avaa docusaurus.config.js-tiedosto projektisi juuresta
Etsi const config = { } -objekti
Lisää tai päivitä scripts-kenttä Asyntai-widgetilläsi:

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

Tallenna docusaurus.config.js-tiedosto
Rakenna sivustosi uudelleen suorittamalla npm run build tai yarn build
Käynnistä kehityspalvelin uudelleen, jos ajat sitä paikallisesti

Vinkki: Scripts-kenttä hyväksyy taulukon JavaScript-lähteitä. Script-tagi lisätään automaattisesti jokaisen sivun HTML-otsikkoon. Tämä on siistein ja helpoimmin ylläpidettävä tapa Docusaurus-sivustoille.

Vaihtoehtoinen tapa 1: Merkkijonomuoto (yksinkertaisempi syntaksi)

Jos haluat yksinkertaisemman lähestymistavan, voit käyttää merkkijonomuotoa scripts-taulukossa:

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

Huomautus: Merkkijonomuotoa käytettäessä sinun on muokattava skriptin URL sisältämään widget-tunnuksesi kyselyparametrina, tai käytettävä vaiheessa 2 esitettyä objektimuotoa, joka mahdollistaa data-asyntai-id-attribuutin asettamisen suoraan.

Vaihtoehtoinen tapa 2: Mukautetut Head-tagit

Voit myös lisätä skriptin headTags-kentän avulla docusaurus.config.js-tiedostossa:

const config = {
  headTags: [
    {
      tagName: 'script',
      attributes: {
        src: 'https://asyntai.com/static/js/chat-widget.js',
        'data-asyntai-id': 'YOUR_WIDGET_ID',
        async: true,
      },
    },
  ],
};

Vinkki: HeadTags-kenttä tarjoaa enemmän hallintaa <head>-osioon lisättävistä HTML-tageista. Tämä tapa on toiminnallisesti sama kuin scripts-kentän käyttö.

Vaihtoehtoinen tapa 3: Mukautettu HTML-malli (edistynyt)

Edistyneille käyttäjille, jotka tarvitsevat täyden hallinnan HTML-mallista:

Luo uusi hakemisto: src/theme (jos sitä ei ole)
Luo tiedosto: src/theme/Root.js
Lisää seuraava koodi skriptin dynaamiseen lisäämiseen:

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

Tallenna tiedosto ja rakenna sivustosi uudelleen

Tärkeää: Root.js-komponentti käärii koko sovelluksesi. Tätä edistynyttä tapaa tulisi käyttää vain, jos tarvitset mukautettua JavaScript-logiikkaa tai sinulla on erityisvaatimuksia, joita konfiguraatiotiedostolla ei voi täyttää.

Vaihtoehtoinen tapa 4: Swizzle Footer -komponentti

Voit mukauttaa alatunnisteen sisältämään skriptin:

Suorita swizzle-komento: npm run swizzle @docusaurus/theme-classic Footer -- --eject
Tämä luo kopion Footer-komponentista kansioon src/theme/Footer/
Muokkaa Footer-komponenttia sisältämään script-tagisi
Lisää skripti ennen alatunnisteen sulkevaa tagia
Tallenna ja rakenna sivustosi uudelleen

Huomautus: Swizzling antaa sinulle täyden hallinnan Docusaurus-komponenteista, mutta se tarkoittaa, että sinun on ylläpidettävä kyseistä komponenttia itse. Docusauruksen päivitykset eivät automaattisesti päivitä swizzlattuja komponentteja.

Vaihe 3: Rakenna ja julkaise

Kun olet lisännyt koodin, rakenna ja julkaise Docusaurus-sivustosi:

# Build the site
npm run build

# Or with Yarn
yarn build

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

Vinkki: Kehityksen aikana suorita npm start tai yarn start esikatsellaksesi muutoksiasi paikallisesti. Chatbotin pitäisi näkyä oikeassa alakulmassa kaikilla sivuilla.

Vaihe 4: Vahvista asennus

Kun olet julkaissut muutoksesi, avaa dokumentaatiosivustosi uudessa selaimen välilehdessä. Chat-painikkeen pitäisi näkyä oikeassa alakulmassa. Napsauta sitä varmistaaksesi, että se avautuu ja toimii oikein.

Etkö näe widgetiä? Varmista, että olet rakentanut sivustosi uudelleen muutosten jälkeen. Tarkista, että korvasit YOUR_WIDGET_ID todellisella widget-tunnuksellasi hallintapaneelista. Tyhjennä selaimen välimuisti tai katso sivua incognito-tilassa. Avaa selaimen konsoli (F12) tarkistaaksesi mahdolliset JavaScript-virheet.

Dokumentaatio