Како додати 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
Безглави CMS: DatoCMS је безглави 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стварним ИД-ом виџета - Сачувајте фајл и рестартујте развојни сервер
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стварним ИД-ом виџета - Рестартујте свој 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стварним ИД-ом виџета - Рестартујте свој Nuxt развојни сервер
Алтернативни метод 3: Чист HTML / статички сајт
Ако користите DatoCMS Content Delivery API са статичким 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стварним ИД-ом виџета - Сачувајте фајл и отпремите на свој хостинг
Алтернативни метод 4: React (Vite/CRA)
За стандардне React апликације (Create React App, Vite) које користе DatoCMS API:
Опција А: Додајте у 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> - Сачувајте фајл
Опција Б: 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-ом, деплојујте или покрените развојни сервер. Посетите веб-сајт у новој картици претраживача или инкогнито прозору. Требало би да видите дугме виџета за ћаскање у доњем десном углу. Кликните на њега да бисте се уверили да се отвара и исправно ради.
Не видите виџет? Уверите се да сте додали скрипту у тачан фајл за свој фрејмворк. Проверите развојну конзолу претраживача за евентуалне грешке. Ако користите рендеровање на серверској страни, осигурајте да скрипта ради на клијентској страни. Покушајте да обришете кеш претраживача или прегледате у инкогнито прозору.
Променљиве окружења: За бољу безбедност и флексибилност, размислите о чувању ИД-а виџета у променљивој окружења (нпр. NEXT_PUBLIC_ASYNTAI_ID за Next.js или VITE_ASYNTAI_ID за Vite) уместо да га тврдо кодирате.