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

Покрокова інструкція для вебсайтів на базі PayloadCMS

Платформа:

Важливо: PayloadCMS - це headless CMS. Код чат-бота потрібно додати до вашого фронтенд-додатку, а не до панелі адміністрування Payload.

Крок 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>

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

Крок 2: Додавання до фронтенду Next.js (Найпоширеніший)

PayloadCMS зазвичай використовує Next.js як фронтенд-фреймворк. Додайте чат-бот до вашого кореневого макета:

App Router (Next.js 13+)

Відкрийте app/layout.tsx та додайте компонент Script:

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://asyntai.com/static/js/chat-widget.js"
          data-asyntai-id="YOUR_WIDGET_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Pages Router

Якщо використовуєте Pages Router, відкрийте pages/_app.tsx:

import Script from 'next/script'

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://asyntai.com/static/js/chat-widget.js"
        data-asyntai-id="YOUR_WIDGET_ID"
        strategy="afterInteractive"
      />
    </>
  )
}

Порада: Параметр strategy="afterInteractive" забезпечує завантаження чат-бота після того, як сторінка стане інтерактивною, що забезпечує найкращий досвід користувача без впливу на продуктивність завантаження сторінки.

Альтернативний метод 1: Власний фронтенд на React

Якщо ваш проект PayloadCMS використовує власний фронтенд на React замість Next.js, ви можете завантажити чат-бот динамічно за допомогою хука useEffect:

// App.tsx or App.jsx
import { useEffect } from 'react';

function App() {
  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.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    // ... your app content
  );
}

Примітка: Замініть YOUR_WIDGET_ID на ваш справжній ID віджета з панелі керування. Функція очищення в операторі return забезпечує видалення скрипта при демонтуванні компонента.

Альтернативний метод 2: Використання власних компонентів Payload (лише панель адміністрування)

Якщо ви хочете, щоб чат-бот з'являвся всередині панелі адміністрування Payload (для внутрішньої підтримки), ви можете зареєструвати власний компонент у вашому payload.config.ts:

// payload.config.ts
import { buildConfig } from 'payload/config';

export default buildConfig({
  admin: {
    components: {
      afterDashboard: ['/components/AsyntaiChatbot'],
    },
  },
  // ... rest of your config
})

Потім створіть файл компонента:

// components/AsyntaiChatbot.tsx
'use client'
import { useEffect } from 'react';

const AsyntaiChatbot = () => {
  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.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return null;
};

export default AsyntaiChatbot;

Порада: Цей метод призначений лише для додавання чат-бота до панелі адміністрування Payload. Для вашого публічного вебсайту використовуйте Крок 2 або Альтернативний метод 1.

Альтернативний метод 3: Простий HTML/статичний сайт

Якщо ваш сайт на базі PayloadCMS використовує простий HTML або статичний фронтенд, що використовує API Payload, додайте код вбудовування безпосередньо до вашого HTML:

Відкрийте ваш основний HTML-файл (зазвичай index.html)
Додайте код вбудовування безпосередньо перед закриваючим тегом </body>:

    <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>
  </body>
</html>

Крок 3: Розгортання та перевірка

Після додавання коду до вашого фронтенд-додатку:

Розгорніть ваш фронтенд на хостинг-провайдері (Vercel, Netlify тощо)
Відкрийте ваш робочий сайт у новій вкладці браузера
Ви повинні побачити кнопку віджета чату в правому нижньому куті
Натисніть на нього, щоб переконатися, що він відкривається та функціонує коректно

Не бачите віджет? Переконайтеся, що ви замінили YOUR_WIDGET_ID на ваш справжній ID віджета з панелі керування. Перевірте, що скрипт завантажується на вкладці Network браузера (F12 > Network). Перевірте, що фронтенд був повторно розгорнутий після додавання коду. Для Next.js переконайтеся, що ви використовуєте компонент Script з next/script, а не звичайний тег <script>. Очистіть кеш браузера або перевірте у режимі інкогніто.

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