Как да добавите Asyntai AI чатбот в Docusaurus

Ръководство стъпка по стъпка за документационни сайтове на Docusaurus

Платформа:

Стъпка 1: Вземете вашия код за вграждане

Първо отидете на вашето Табло за управление на Asyntai и превъртете надолу до секцията "Код за вграждане". Копирайте уникалния си код за вграждане, който ще изглежда така:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Забележка: Кодът по-горе е само пример. Трябва да копирате собствения си уникален код за вграждане от вашето Табло за управление, тъй като съдържа вашия личен ID на уиджета.

Стъпка 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 head секцията на всяка страница. Това е най-чистият и лесен за поддръжка метод за Docusaurus сайтове.

Алтернативен метод 1: Формат с низ (По-опростен синтаксис)

Ако предпочитате по-опростен подход, можете да използвате формат с низ в масива scripts:

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

Забележка: Когато използвате формат с низ, ще трябва да модифицирате URL адреса на скрипта, за да включите ID на уиджета като параметър на заявката, или да използвате обектния формат, показан в Стъпка 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 предоставя повече контрол над точните 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 с вашия действителен ID на уиджета от таблото за управление. Изчистете кеша на браузъра или разгледайте в инкогнито режим. Отворете конзолата на браузъра (F12), за да проверите за JavaScript грешки.

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