Как добавить ИИ-чат-бот Asyntai в DatoCMS
Пошаговое руководство для сайтов на DatoCMS
HTML/Custom
WordPress
Shopify
WooCommerce
BigCommerce
Ecwid
Wix
Squarespace
Webflow
Weebly
HubSpot
Tilda
Adobe Experience Manager
Duda
Google Sites
Bludit
Plesk
Concrete CMS
Craft CMS
Contentful
Docusaurus
Strapi
Joomla
Kentico
Drupal
Magento
Blogger
Bitrix
TYPO3
PrestaShop
OpenCart
Ghost
Hugo
Statamic
Umbraco
Volusion
Moodle
SilverStripe
Grav
October CMS
ProcessWire
Sanity
ExpressionEngine
Sylius
Backdrop CMS
MODX
Bagisto
PayloadCMS
e107
CrafterCMS
Kirby
MedusaCMS
DatoCMS
GoDaddy
Framer
Bubble
Carrd
Jimdo
Strikingly
Kajabi
Teachable
Thinkific
ClickFunnels
Hostinger
Unbounce
Leadpages
Systeme.io
Instapage
Headless CMS: DatoCMS — это headless CMS, которая доставляет контент через API. Код чат-бота нужно добавить в ваше фронтенд-приложение (Next.js, Gatsby, Nuxt и т.д.), а не в панель управления DatoCMS.
Шаг 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>
Примечание: Код выше — всего лишь пример. Вы должны скопировать свой уникальный код для встраивания с вашей Панели управления, так как он содержит ваш персональный идентификатор виджета.
Шаг 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>(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> - Замените
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>(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> - Сохраните файл
Вариант 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), а не прописывать его напрямую.