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

Ръководство стъпка по стъпка за уебсайтове, задвижвани от DatoCMS

Платформа:

Headless CMS: DatoCMS е headless CMS, който доставя съдържание чрез API-та. Кодът на чатбота трябва да бъде добавен към вашето frontend приложение (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>

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

Стъпка 2: Добавете към Next.js Frontend (Най-често срещано)

Next.js е най-популярният frontend фреймуърк, използван с 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 Frontend

За 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 Frontend

За 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) вместо да го записвате директно в кода.

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