Kako dodati Asyntai AI chatbot na DatoCMS
Vodič korak po korak za web stranice pokretane DatoCMS-om
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 je headless CMS koji isporučuje sadržaj putem API-ja. Kod chatbota treba dodati u vašu frontend aplikaciju (Next.js, Gatsby, Nuxt itd.), a ne u DatoCMS nadzornu ploču.
Korak 1: Nabavite svoj kod za ugradnju
Prvo idite na svoju Asyntai nadzornu ploču i pomaknite se prema dolje do odjeljka "Kod za ugradnju". Kopirajte svoj jedinstveni kod za ugradnju koji će izgledati ovako:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Napomena: Gornji kod je samo primjer. Morate kopirati svoj vlastiti jedinstveni kod za ugradnju sa svoje Nadzorne ploče jer sadrži vaš osobni ID widgeta.
Korak 2: Dodajte u Next.js frontend (Najčešći)
Next.js je najpopularniji frontend okvir koji se koristi s DatoCMS-om. Dodajte chatbot pomocu komponente Script:
App Router (app/layout.tsx):
- Otvorite svoju korijensku datoteku rasporeda:
app/layout.tsx - Uvezite komponentu Script i dodajte chatbot:
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>
)
} - Zamijenite
YOUR_WIDGET_IDsvojim stvarnim ID-jem widgeta - Spremite datoteku i ponovno pokrenite razvojni poslužitelj
Pages Router (pages/_app.tsx):
- Otvorite svoju datoteku
pages/_app.tsx - Dodajte komponentu 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"
/>
</>
)
}
Savjet: Koristenje strategy="afterInteractive" osigurava da se chatbot ucitava odmah nakon sto stranica postane interaktivna, pruzajuci dobru ravnotezu izmedu performansi i dostupnosti.
Alternativna metoda 1: Gatsby frontend
Za Gatsby stranice koje povlace sadrzaj iz DatoCMS-a putem gatsby-source-datocms:
- Izradite ili uredite
gatsby-ssr.jsu korijenu projekta: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"
/>
])
} - Zamijenite
YOUR_WIDGET_IDsvojim stvarnim ID-jem widgeta - Ponovno pokrenite svoj Gatsby razvojni poslužitelj
Alternativna metoda 2: Nuxt.js frontend
Za Nuxt.js aplikacije koje konzumiraju DatoCMS sadržaj:
- Dodajte u svoj
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'
}
]
}
}
}) - Zamijenite
YOUR_WIDGET_IDsvojim stvarnim ID-jem widgeta - Ponovno pokrenite svoj Nuxt razvojni poslužitelj
Alternativna metoda 3: Obicni HTML / Statična stranica
Ako koristite DatoCMS Content Delivery API sa staticnom HTML stranicom ili generatorom staticnih stranica:
- Dodajte ugradni kod u svoju HTML datoteku prije zavrsne oznake
</body>:<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> - Zamijenite
YOUR_WIDGET_IDsvojim stvarnim ID-jem widgeta - Spremite datoteku i prenesite na svoj hosting
Alternativna metoda 4: React (Vite/CRA)
Za standardne React aplikacije (Create React App, Vite itd.) koje koriste DatoCMS API:
Opcija A: Dodajte u public/index.html
- Otvorite svoju datoteku
public/index.html(CRA) iliindex.html(Vite) - Dodajte ugradni kod prije završne oznake
</body>:<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> - Spremite datoteku
Opcija B: useEffect u korijenskoj komponenti
- Izradite komponentu chatbota ili dodajte u svoju korijensku komponentu:
// 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
} - Uvezite i renderirajte komponentu u svom
App.jsxili korijenskom rasporedu
Korak 3: Postavite i provjerite
Nakon sto dodate kod chatbota na svoju stranicu pokretanu DatoCMS-om, postavite ili pokrenite razvojni posluzitelj. Posjetite svoju web stranicu u novoj kartici preglednika ili anonimnom prozoru. Trebali biste vidjeti gumb widgeta za razgovor u donjem desnom kutu. Kliknite ga kako biste provjerili otvara li se i radi li ispravno.
Ne vidite widget? Provjerite jeste li dodali skriptu u ispravnu datoteku za svoj okvir. Provjerite konzolu za programere u pregledniku za greske. Ako koristite renderiranje na strani posluzitelja, osigurajte da se skripta izvrsava na strani klijenta. Pokusajte ocistiti predmemoriju preglednika ili pregledavati u anonimnom prozoru.
Varijable okruženja: Za bolju sigurnost i fleksibilnost, razmislite o pohranjivanju ID-ja widgeta u varijablu okruzenja (npr. NEXT_PUBLIC_ASYNTAI_ID za Next.js ili VITE_ASYNTAI_ID za Vite) umjesto da ga upisite izravno u kod.