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

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

Платформа:

Headless CMS: DatoCMS - це headless CMS, що надає контент через API. Код чат-бота потрiбно додати до вашого фронтенд-застосунку (Next.js, Gatsby, Nuxt тощо), а не до панелi керування DatoCMS.

Крок 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: Додавання до фронтенду Next.js (Найпоширеніший)

Next.js - найпопулярнiший фронтенд-фреймворк, що використовується з DatoCMS. Додайте чат-бот за допомогою компонента Script:

App Router (app/layout.tsx):

Відкрийте кореневий файл макету: app/layout.tsx
Iмпортуйте компонент Script та додайте чат-бот:
import Script from 'next/script' export default function RootLayout({ children }) { return ( <html> <body> {children} <Script src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID" strategy="afterInteractive" /> </body> </html> ) }
Замініть YOUR_WIDGET_ID на ваш фактичний ID віджету
Збережіть файл та перезапустіть сервер розробки

Pages Router (pages/_app.tsx):

Відкрийте файл pages/_app.tsx
Додайте компонент Script:
import Script from 'next/script' import type { AppProps } from 'next/app' export default function App({ Component, pageProps }: AppProps) { return ( <> <Component {...pageProps} /> <Script src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID" strategy="afterInteractive" /> </> ) }

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

Альтернативний метод 1: Фронтенд Gatsby

Для сайтiв Gatsby, що отримують контент з DatoCMS через gatsby-source-datocms:

Створіть або відредагуйте gatsby-ssr.js у кореневій директорії проекту:
import React from 'react' export const onRenderBody = ({ setPostBodyComponents }) => { setPostBodyComponents([ <script key="asyntai-chatbot" async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID" /> ]) }
Замініть YOUR_WIDGET_ID на ваш фактичний ID віджету
Перезапустіть сервер розробки Gatsby

Альтернативний метод 2: Фронтенд Nuxt.js

Для застосунків Nuxt.js, що споживають контент DatoCMS:

Додайте до вашого nuxt.config.ts:
export default defineNuxtConfig({ app: { head: { script: [ { src: 'https://asyntai.com/static/js/chat-widget.js', async: true, 'data-asyntai-id': 'YOUR_WIDGET_ID' } ] } } })
Замініть YOUR_WIDGET_ID на ваш фактичний ID віджету
Перезапустіть сервер розробки Nuxt

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

Якщо ви використовуєте Content Delivery API DatoCMS зi статичним HTML-сайтом або генератором статичних сайтiв:

Додайте код вбудовування до вашого HTML-файлу перед закриваючим тегом </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Замініть YOUR_WIDGET_ID на ваш фактичний ID віджету
Збережіть файл та завантажте на хостинг

Альтернативний метод 4: React (Vite/CRA)

Для стандартних React-застосунків (Create React App, Vite тощо), що використовують DatoCMS API:

Варіант A: Додайте до public/index.html

Вiдкрийте файл public/index.html (CRA) або index.html (Vite)
Додайте код вбудовування перед закриваючим тегом </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Збережіть файл

Варіант B: useEffect в кореневому компоненті

Створіть компонент чат-бота або додайте до кореневого компонента:
// components/Chatbot.jsx import { useEffect } from 'react' export default function Chatbot() { useEffect(() => { const script = document.createElement('script') script.src = 'https://asyntai.com/static/js/chat-widget.js' script.async = true script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID') document.body.appendChild(script) return () => document.body.removeChild(script) }, []) return null }
Iмпортуйте та вiдрендерiть компонент у вашому App.jsx або кореневому макетi

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

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

Не бачите віджет? Переконайтеся, що ви додали скрипт до правильного файлу для вашого фреймворку. Перевiрте консоль розробника у браузерi на наявнiсть помилок. Якщо ви використовуєте серверний рендеринг, переконайтеся, що скрипт виконується на клiєнтськiй сторонi. Спробуйте очистити кеш браузера або переглянути в режимi iнкогнiто.

Змінні середовища: Для кращої безпеки та гнучкостi рекомендується зберiгати ID вiджету у змiннiй середовища (наприклад, NEXT_PUBLIC_ASYNTAI_ID для Next.js або VITE_ASYNTAI_ID для Vite) замiсть жорсткого кодування.

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