Ako pridať Asyntai AI chatbota do DatoCMS
Návod krok za krokom pre webové stránky poháňané 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 je headless CMS, ktory doručuje obsah cez API. Kod chatbota je potrebne pridat do vasej frontendovej aplikacie (Next.js, Gatsby, Nuxt atd.), nie do dashboardu DatoCMS.
Krok 1: Získajte svoj vkladací kód
Najprv prejdite na svoj Asyntai Dashboard a prejdite nadol k sekcii „Vkladací kód“. Skopírujte svoj jedinečný vkladací kód, ktorý bude vyzerať takto:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Poznámka: Kód vyššie je len príklad. Musíte skopírovať svoj vlastný jedinečný vkladací kód zo svojho Dashboardu, pretože obsahuje vaše osobné ID widgetu.
Krok 2: Pridanie do frontendu Next.js (najbežnejšie)
Next.js je najpopularnejsi frontendovy framework používaný s DatoCMS. Pridajte chatbota pomocou komponentu Script:
App Router (app/layout.tsx):
- Otvorte svoj korenovy súbor rozloženia:
app/layout.tsx - Importujte komponent Script a pridajte chatbota:
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>
)
} - Nahraďte
YOUR_WIDGET_IDvaším skutočným ID widgetu - Uložte súbor a restartujte svoj vývojový server
Pages Router (pages/_app.tsx):
- Otvorte svoj súbor
pages/_app.tsx - Pridajte komponent 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"
/>
</>
)
}
Tip: Použitie strategy="afterInteractive" zabezpeci, ze sa chatbot nacita hned po tom, co sa stranka stane interaktivnou, co poskytuje dobru rovnovahu medzi vykonom a dostupnostou.
Alternativna metoda 1: Frontend Gatsby
Pre stránky Gatsby cerpajuce obsah z DatoCMS cez gatsby-source-datocms:
- Vytvorte alebo upravte
gatsby-ssr.jsv koreni vasho projektu: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"
/>
])
} - Nahraďte
YOUR_WIDGET_IDvaším skutočným ID widgetu - Restartujte svoj vývojový server Gatsby
Alternativna metoda 2: Frontend Nuxt.js
Pre aplikácie Nuxt.js spotrebúvajúce obsah DatoCMS:
- Pridajte do svojho
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'
}
]
}
}
}) - Nahraďte
YOUR_WIDGET_IDvaším skutočným ID widgetu - Restartujte svoj vývojový server Nuxt
Alternatívna metóda 3: Čisté HTML / Statická stránka
Ak používate Content Delivery API od DatoCMS so statickou HTML stránkou alebo generatorom statickych stránok:
- Pridajte vkladací kod do vasho HTML súboru pred uzatvaraci tag
</body>:<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> - Nahraďte
YOUR_WIDGET_IDvaším skutočným ID widgetu - Uložte súbor a nahrajte na vas hosting
Alternativna metoda 4: React (Vite/CRA)
Pre štandardné React aplikácie (Create React App, Vite) používajúce DatoCMS API:
Možnosť A: Pridat do public/index.html
- Otvorte svoj súbor
public/index.html(CRA) aleboindex.html(Vite) - Pridajte vkladací kod pred uzatvaraci tag
</body>:<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> - Uložte súbor
Možnosť B: useEffect v korenovom komponente
- Vytvorte komponent chatbota alebo pridajte do svojho korenoveho 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
} - Importujte a vykreslete komponent vo vasom
App.jsxalebo korenovom rozložení
Krok 3: Nasadenie a overenie
Po pridani kodu chatbota na vasu stránku pohananu DatoCMS nasadte alebo spustite svoj vývojový server. Navštívte svoju webovú stránku v novej karte prehliadača alebo v okne inkognito. Mali by ste vidiet tlačidlo chatoveho widgetu v pravom dolnom rohu. Kliknite nan, aby ste sa uistili, ze sa otvara a funguje správne.
Nevidíte widget? Uistite sa, ze ste pridali skript do spravneho súboru pre vas framework. Skontrolujte vyvojarsku konzolu vasho prehliadača kvoli pripadnym chybam. Ak používate serverove vykreslovanie, uistite sa, ze skript bezi na strane klienta. Skuste vyčistiť vyrovnávaciu pamat prehliadača alebo zobrazit web v okne inkognito.
Premenne prostredia: Pre lepšiu bezpecnost a flexibilitu zvazite uloženie vasho ID widgetu do premennej prostredia (napr. NEXT_PUBLIC_ASYNTAI_ID pre Next.js alebo VITE_ASYNTAI_ID pre Vite) namiesto jeho priameho zapisania do kodu.