Како додати Asyntai АИ четбот у Docusaurus

Водич корак по корак за Docusaurus сајтове документације

Платформа:

Корак 1: Набавите свој код за уграђивање

Прво, идите на своју Asyntai контролну таблу и померите се до одељка „Код за уграђивање". Копирајте свој јединствени код за уграђивање који ће изгледати овако:

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

Напомена: Код изнад је само пример. Морате копирати свој јединствени код за уграђивање са своје Контролне табле јер садржи ваш лични ИД виџета.

Корак 2: Додајте скрипту у docusaurus.config.js (препоручено)

Најбољи начин за додавање четбота на све странице вашег Docusaurus сајта је кроз конфигурациони фајл:

Отворите свој Docusaurus пројекат у уређивачу кода
Пронађите и отворите docusaurus.config.js фајл у корену пројекта
Пронађите const config = { } објекат
Додајте или ажурирајте поље scripts са својим Asyntai виџетом:

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

Сачувајте docusaurus.config.js фајл
Поново изградите сајт покретањем npm run build или yarn build
Рестартујте развојни сервер ако радите локално

Савет: Поље scripts прихвата низ JavaScript извора. Ознака скрипте ће бити аутоматски убачена у HTML заглавље сваке странице. Ово је најчистији и најодрживији метод за Docusaurus сајтове.

Алтернативни метод 1: Формат стринга (једноставнија синтакса)

Ако преферирате једноставнији приступ, можете користити формат стринга у низу scripts:

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

Напомена: Када користите формат стринга, мораћете да измените URL скрипте да укључи ИД виџета као параметар упита, или користите формат објекта приказан у кораку 2 који вам омогућава да директно подесите data-asyntai-id атрибут.

Алтернативни метод 2: Прилагођене ознаке заглавља

Такође можете додати скрипту користећи поље headTags у 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,
      },
    },
  ],
};

Савет: Поље headTags обезбеђује више контроле над тачним HTML ознакама убаченим у <head> одељак. Овај метод је функционално еквивалентан коришћењу поља scripts.

Алтернативни метод 3: Прилагођени HTML шаблон (напредно)

За напредне кориснике који требају потпуну контролу над HTML шаблоном:

Креирајте нови директоријум: src/theme (ако не постоји)
Креирајте фајл: src/theme/Root.js
Додајте следећи код за динамичко убацивање скрипте:

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

Сачувајте фајл и поново изградите свој сајт

Важно: Root.js компонента обавија целу апликацију. Овај напредни метод треба користити само ако вам је потребна прилагођена JavaScript логика или имате специфичне захтеве који се не могу испунити приступом конфигурационог фајла.

Алтернативни метод 4: Swizzle Footer компонента

Можете прилагодити подножје да укључи скрипту:

Покрените swizzle команду: npm run swizzle @docusaurus/theme-classic Footer -- --eject
Ово креира копију Footer компоненте у src/theme/Footer/
Уредите Footer компоненту да укључи вашу ознаку скрипте
Додајте скрипту пре затварајуће ознаке подножја
Сачувајте и поново изградите свој сајт

Напомена: Swizzling вам даје потпуну контролу над Docusaurus компонентама, али то значи да ћете морати сами да одржавате ту компоненту. Ажурирања Docusaurus-а неће аутоматски ажурирати swizzle-оване компоненте.

Корак 3: Изградите и деплојујте

Након додавања кода, изградите и деплојујте свој Docusaurus сајт:

# Build the site
npm run build

# Or with Yarn
yarn build

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

Савет: Током развоја, покрените npm start или yarn start да прегледате своје промене локално. Четбот би требало да се појави у доњем десном углу на свим страницама.

Корак 4: Верификујте инсталацију

Након деплојмента промена, отворите свој сајт документације у новој картици претраживача. Требало би да видите дугме виџета за ћаскање у доњем десном углу. Кликните на њега да бисте се уверили да се отвара и функционише исправно.

Не видите виџет? Уверите се да сте поново изградили сајт након извршавања промена. Проверите да сте заменили YOUR_WIDGET_ID стварним ИД-ом виџета са контролне табле. Обришите кеш претраживача или прегледајте у инкогнито режиму. Отворите конзолу претраживача (F12) да проверите да ли има JavaScript грешака.

Документација