Как добавить ИИ-чат-бот Asyntai в DatoCMS

Пошаговое руководство для сайтов на DatoCMS

Платформа:

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

Шаг 1: Получите код встраивания

Сначала перейдите на Панель управления Asyntai и прокрутите вниз до раздела «Код для встраивания». Скопируйте уникальный код, который выглядит так:

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

Примечание: Код выше — всего лишь пример. Вы должны скопировать свой уникальный код для встраивания с вашей Панели управления, так как он содержит ваш персональный идентификатор виджета.

Шаг 2: Добавьте во фронтенд Next.js (самый распространённый способ)

Next.js — самый популярный фронтенд-фреймворк для работы с DatoCMS. Добавьте чат-бот с помощью компонента Script:

App Router (app/layout.tsx):

Откройте корневой файл макета: app/layout.tsx
Импортируйте компонент 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" гарантирует, что чат-бот загрузится сразу после того, как страница станет интерактивной, обеспечивая хороший баланс между производительностью и доступностью.

Альтернативный способ 1: Фронтенд на Gatsby

Для сайтов 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 со статическим HTML-сайтом или генератором статических сайтов:

Добавьте код вставки в 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

Откройте файл 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 }
Импортируйте и отрендерьте компонент в App.jsx или корневом макете

Шаг 3: Развёртывание и проверка

После добавления кода чат-бота на сайт на базе DatoCMS выполните деплой или запустите сервер разработки. Откройте сайт в новой вкладке браузера или в режиме инкогнито. Вы должны увидеть кнопку виджета чата в правом нижнем углу. Нажмите на неё, чтобы убедиться, что всё работает.

Виджет не отображается? Убедитесь, что вы добавили скрипт в правильный файл для вашего фреймворка. Проверьте консоль разработчика браузера на наличие ошибок. При использовании серверного рендеринга убедитесь, что скрипт выполняется на стороне клиента. Попробуйте очистить кэш браузера или открыть сайт в режиме инкогнито.

Переменные среды: Для повышения безопасности и гибкости рекомендуется хранить ID виджета в переменной окружения (например, NEXT_PUBLIC_ASYNTAI_ID для Next.js или VITE_ASYNTAI_ID для Vite), а не прописывать его напрямую.

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