Kaip pridėti Asyntai DI pokalbių robotą prie Docusaurus

Žingsnis po žingsnio vadovas Docusaurus dokumentacijos svetainėms

Platforma:

1 žingsnis: Gaukite savo įterpimo kodą

Pirma, eikite į savo Asyntai valdymo skydelį ir slinkite žemyn iki "Įterpimo kodas" skyriaus. Nukopijuokite savo unikalų įterpimo kodą, kuris atrodys taip:

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

Pastaba: Aukščiau pateiktas kodas yra tik pavyzdys. Turite nukopijuoti savo unikalų įterpimo kodą iš savo Valdymo skydelio, nes jame yra jūsų asmeninis valdiklio ID.

2 žingsnis: Pridėkite skriptą prie docusaurus.config.js (Rekomenduojama)

Geriausias būdas pridėti pokalbių robotą prie visų Docusaurus svetainės puslapių yra per konfigūracijos failą:

Atidarykite Docusaurus projektą savo kodo redaktoriuje
Raskite ir atidarykite docusaurus.config.js failą projekto šaknyje
Raskite const config = { } objektą
Pridėkite arba atnaujinkite scripts lauką su savo Asyntai valdikliu:

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

Išsaugokite docusaurus.config.js failą
Perkurkite svetainę paleisdami npm run build arba yarn build
Paleiskite kūrimo serverį iš naujo, jei dirbate lokaliai

Patarimas: Scripts laukas priima JavaScript šaltinių masyvą. Skripto žyma bus automatiškai įterpta į kiekvieno puslapio HTML antraštę. Tai švariausias ir lengviausiai prižiūrimas metodas Docusaurus svetainėms.

Alternatyvus metodas 1: Eilutės formatas (Paprastesnė sintaksė)

Jei norite paprastesnio būdo, galite naudoti eilutės formatą scripts masyve:

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

Pastaba: Naudojant eilutės formatą, turėsite modifikuoti skripto URL, kad įtrauktumėte valdiklio ID kaip užklausos parametrą, arba naudokite 2 žingsnyje parodytą objekto formatą, kuris leidžia tiesiogiai nustatyti data-asyntai-id atributą.

Alternatyvus metodas 2: Pasirinktinės antraštės žymos

Taip pat galite pridėti skriptą naudodami headTags lauką 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,
      },
    },
  ],
};

Patarimas: headTags laukas suteikia daugiau kontrolės dėl tikslių HTML žymų, įterpiamų į <head> skyrių. Šis metodas funkciškai lygiavertis scripts lauko naudojimui.

Alternatyvus metodas 3: Pasirinktinis HTML šablonas (Pažengusiems)

Pažengusiems naudotojams, kuriems reikia pilnos HTML šablono kontrolės:

Sukurkite naują katalogą: src/theme (jei jo nėra)
Sukurkite failą: src/theme/Root.js
Pridėkite šį kodą, kad dinamiškai įterptumėte skriptą:

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

Išsaugokite failą ir perkurkite svetainę

Svarbu: Root.js komponentas apgaubia visą programą. Šis pažangus metodas turėtų būti naudojamas tik tada, kai reikia pasirinktinės JavaScript logikos arba turite specifinių reikalavimų, kurių negalima patenkinti konfigūracijos failo būdu.

Alternatyvus metodas 4: Poraštės komponento pergrupavimas

Galite pritaikyti poraštę, kad įtrauktų skriptą:

Paleiskite pergrupavimo komandą: npm run swizzle @docusaurus/theme-classic Footer -- --eject
Tai sukuria Footer komponento kopiją src/theme/Footer/
Redaguokite Footer komponentą, kad įtrauktumėte savo skripto žymą
Pridėkite skriptą prieš poraštės uždaromąją žymą
Išsaugokite ir perkurkite svetainę

Pastaba: Pergrupavimas suteikia pilną Docusaurus komponentų kontrolę, tačiau tai reiškia, kad turėsite patys prižiūrėti tą komponentą. Docusaurus atnaujinimai automatiškai neatnaujins pergrupuotų komponentų.

3 žingsnis: Sukurkite ir įdiekite

Pridėję kodą, sukurkite ir įdiekite Docusaurus svetainę:

# Build the site
npm run build

# Or with Yarn
yarn build

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

Patarimas: Kūrimo metu paleiskite npm start arba yarn start, kad peržiūrėtumėte pakeitimus lokaliai. Pokalbių robotas turėtų atsirasti apatiniame dešiniajame kampe visuose puslapiuose.

4 žingsnis: Patikrinkite diegimą

Įdiegę pakeitimus, atidarykite dokumentacijos svetainę naujame naršyklės skirtuke. Turėtumėte matyti pokalbių valdiklio mygtuką apatiniame dešiniajame kampe. Spustelėkite jį, kad įsitikintumėte, jog jis atsidaro ir veikia teisingai.

Nematote valdiklio? Įsitikinkite, kad perkūrėte svetainę atlikę pakeitimus. Patikrinkite, ar pakeitėte YOUR_WIDGET_ID savo tikruoju valdiklio ID iš valdymo skydelio. Išvalykite naršyklės talpyklą arba peržiūrėkite inkognito režimu. Atidarykite naršyklės konsolę (F12) ir patikrinkite, ar nėra JavaScript klaidų.

Dokumentacija