Як додати AI чат-бот Asyntai до Docusaurus

Покрокова інструкція для документаційних сайтів Docusaurus

Платформа:

Крок 1: Отримайте код для вставки

Спочатку перейдiть до вашої Панелi керування Asyntai та прокрутiть вниз до роздiлу "Код для вставки". Скопiюйте унiкальний код для вставки, який виглядатиме так:

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

Примітка: Код вище є лише прикладом. Ви повиннi скопiювати власний унiкальний код для вставки з вашої Панелi керування, оскiльки вiн мiстить ваш особистий ID вiджета.

Крок 2: Додавання скрипту до docusaurus.config.js (Рекомендовано)

Найкращий спосiб додати чат-бот на всi сторiнки вашого сайту Docusaurus - через файл конфiгурацiї:

Відкрийте проект Docusaurus у вашому редакторі коду
Знайдiть та вiдкрийте файл docusaurus.config.js в коренi вашого проекту
Знайдіть об'єкт 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
Перезберiть сайт, виконавши npm run build або yarn build
Перезапустіть сервер розробки, якщо ви працюєте локально

Порада: Поле scripts приймає масив джерел JavaScript. Тег скрипту буде автоматично вставлений в HTML head кожної сторiнки. Це найчистiший та найзручнiший метод для сайтiв Docusaurus.

Альтернативний метод 1: Рядковий формат (Простіший синтаксис)

Якщо ви надаєте перевагу простiшому пiдходу, можна використовувати рядковий формат у масивi scripts:

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

Примітка: При використаннi рядкового формату вам потрiбно змiнити URL скрипту, щоб включити ID вiджету як параметр запиту, або використовувати об'єктний формат, показаний у кроцi 2, який дозволяє безпосередньо встановити атрибут data-asyntai-id.

Альтернативний метод 2: Власні теги Head

Також можна додати скрипт за допомогою поля 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 надає бiльше контролю над точними HTML-тегами, вставленими в роздiл <head>. Цей метод функцiонально еквiвалентний використанню поля 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 обгортає весь ваш застосунок. Цей розширений метод слiд використовувати лише тодi, коли вам потрiбна власна логiка JavaScript або є специфiчнi вимоги, якi не можна задовольнити за допомогою пiдходу з файлом конфiгурацiї.

Альтернативний метод 4: Свізлінг компонента Footer

Ви можете налаштувати футер, щоб включити скрипт:

Виконайте команду swizzle: npm run swizzle @docusaurus/theme-classic Footer -- --eject
Це створює копію компонента Footer в src/theme/Footer/
Відредагуйте компонент Footer, щоб включити ваш тег скрипту
Додайте скрипт перед закриваючим тегом футера
Збережіть та перезберіть сайт

Примітка: Свiзлiнг надає повний контроль над компонентами Docusaurus, але це означає, що вам потрiбно самостiйно пiдтримувати цей компонент. Оновлення Docusaurus не будуть автоматично оновлювати свiзлiнговi компоненти.

Крок 3: Збірка та розгортання

Після додавання коду зберіть та розгорніть ваш сайт Docusaurus:

# Build the site
npm run build

# Or with Yarn
yarn build

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

Порада: Пiд час розробки виконайте npm start або yarn start, щоб попередньо переглянути змiни локально. Чат-бот повинен з'явитися в нижньому правому кутi на всiх сторiнках.

Крок 4: Перевірка встановлення

Пiсля розгортання змiн вiдкрийте свiй документацiйний сайт у новiй вкладцi браузера. Ви повиннi побачити кнопку чат-вiджету в нижньому правому кутi. Натиснiть на неї, щоб переконатися, що вона вiдкривається та працює коректно.

Не бачите віджет? Переконайтеся, що ви перезбрали сайт пiсля внесення змiн. Перевiрте, що ви замiнили YOUR_WIDGET_ID на фактичний ID вiджету з панелi керування. Очистiть кеш браузера або перегляньте в режимi iнкогнiто. Вiдкрийте консоль браузера (F12), щоб перевiрити наявнiсть помилок JavaScript.

Документація