Kā pievienot Asyntai MI tērzēšanas robotu Docusaurus

Soli pa solim ceļvedis Docusaurus dokumentācijas vietnēm

Platforma:

1. solis: Iegūstiet savu iegulto kodu

Vispirms dodieties uz savu Asyntai vadības paneli un ritiniet uz leju līdz sadaļai "Iegultais kods". Nokopējiet savu unikālo iegulto kodu, kas izskatīsies šādi:

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

Piezīme: Iepriekš minētais kods ir tikai piemērs. Jums jānokopē savs unikālais iegultais kods no sava Vadības paneļa, jo tas satur jūsu personīgo logrīka ID.

2. solis: Pievienojiet skriptu docusaurus.config.js (ieteicams)

Labākais veids, kā pievienot tērzēšanas robotu visām jūsu Docusaurus vietnes lapām, ir caur konfigurācijas failu:

Atveriet savu Docusaurus projektu koda redaktorā
Atrodiet un atveriet failu docusaurus.config.js sava projekta saknē
Atrodiet objektu const config = { }
Pievienojiet vai atjauniniet lauku scripts ar savu Asyntai logrīku:

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

Saglabājiet failu docusaurus.config.js
Pārbūvējiet savu vietni, izpildot npm run build vai yarn build
Restartējiet izstrādes serveri, ja darbojaties lokāli

Padoms: Skriptu lauks pieņem JavaScript avotu masīvu. Skripta tags tiks automātiski ievietots katras lapas HTML galvenē. Šī ir tīrākā un visvieglāk uzturāmā metode Docusaurus vietnēm.

Alternatīvā metode 1: Virknes formāts (vienkāršāka sintakse)

Ja dodat priekšroku vienkāršākai pieejai, skriptu masīvā varat izmantot virknes formātu:

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

Piezīme: Izmantojot virknes formātu, jums būs jāmodificē skripta URL, lai iekļautu savu logrīka ID kā vaicājuma parametru, vai jāizmanto 2. solī parādītais objekta formāts, kas ļauj tieši iestatīt atribūtu data-asyntai-id.

Alternatīvā metode 2: Pielāgoti galvenes tagi

Varat arī pievienot skriptu, izmantojot headTags lauku 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,
      },
    },
  ],
};

Padoms: headTags lauks nodrošina lielāku kontroli pār precīziem HTML tagiem, kas tiek ievietoti <head> sadaļā. Šī metode funkcionāli ir līdzvērtīga skriptu lauka izmantošanai.

Alternatīvā metode 3: Pielāgota HTML veidne (uzlabota)

Pieredzējušiem lietotājiem, kuriem nepieciešama pilnīga kontrole pār HTML veidni:

Izveidojiet jaunu direktoriju: src/theme (ja tā neeksistē)
Izveidojiet failu: src/theme/Root.js
Pievienojiet šādu kodu, lai dinamiski injicētu skriptu:

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

Saglabājiet failu un pārbūvējiet savu vietni

Svarīgi: Root.js komponents aptver visu jūsu lietojumprogrammu. Šī papildu metode jāizmanto tikai tad, ja nepieciešama pielāgota JavaScript loģika vai ir specifiskas prasības, ko nevar izpildīt ar konfigurācijas faila pieeju.

Alternatīvā metode 4: Kājenes komponenta pārslēgšana (Swizzle)

Varat pielāgot kājeni, lai iekļautu skriptu:

Izpildiet swizzle komandu: npm run swizzle @docusaurus/theme-classic Footer -- --eject
Tas izveido kājenes komponenta kopiju src/theme/Footer/
Rediģējiet kājenes komponentu, lai iekļautu savu skripta tagu
Pievienojiet skriptu pirms kājenes noslēdzošā taga
Saglabājiet un pārbūvējiet savu vietni

Piezīme: Pārslēgšana (swizzling) dod pilnu kontroli pār Docusaurus komponentiem, bet tas nozīmē, ka šis komponents jāuztur pašam. Docusaurus atjauninājumi automātiski neatjauninās pārslēgtos komponentus.

3. solis: Būvējiet un izvietojiet

Pēc koda pievienošanas būvējiet un izvietojiet savu Docusaurus vietni:

# Build the site
npm run build

# Or with Yarn
yarn build

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

Padoms: Izstrādes laikā palaidiet npm start vai yarn start, lai priekšskatītu izmaiņas lokāli. Tērzēšanas robotam vajadzētu parādīties apakšējā labajā stūrī visās lapās.

4. solis: Pārbaudiet instalēšanu

Pēc izmaiņu izvietošanas atveriet savu dokumentācijas vietni jaunā pārlūkprogrammas cilnē. Jums vajadzētu redzēt tērzēšanas logrīka pogu apakšējā labajā stūrī. Noklikšķiniet uz tās, lai pārliecinātos, ka tā atveras un darbojas pareizi.

Neredzat logrīku? Pārliecinieties, ka pārbūvējāt savu vietni pēc izmaiņu veikšanas. Pārbaudiet, vai aizstājāt YOUR_WIDGET_ID ar savu reālo logrīka ID no vadības paneļa. Notīriet pārlūkprogrammas kešatmiņu vai skatiet inkognito režīmā. Atveriet pārlūkprogrammas konsoli (F12), lai pārbaudītu JavaScript kļūdas.

Dokumentācija