Hoe u de Asyntai AI-chatbot toevoegt aan DatoCMS
Stapsgewijze handleiding voor websites die DatoCMS gebruiken
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 is een headless CMS dat inhoud via API's levert. De chatbotcode moet worden toegevoegd aan uw frontend-applicatie (Next.js, Gatsby, Nuxt, enz.), niet aan het DatoCMS-dashboard.
Stap 1: Uw insluitcode ophalen
Ga eerst naar uw Asyntai Dashboard en scroll naar het gedeelte "Insluitcode". Kopieer uw unieke insluitcode die er als volgt uitziet:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Opmerking: De bovenstaande code is slechts een voorbeeld. U moet uw eigen unieke insluitcode kopiëren vanuit uw Dashboard omdat deze uw persoonlijke widget-ID bevat.
Stap 2: Toevoegen aan Next.js-frontend (meest voorkomend)
Next.js is het populairste frontend-framework dat met DatoCMS wordt gebruikt. Voeg de chatbot toe met de Script-component:
App Router (app/layout.tsx):
- Open uw hoofd-lay-outbestand:
app/layout.tsx - Importeer de Script-component en voeg de chatbot toe:
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>
)
} - Vervang
YOUR_WIDGET_IDdoor uw werkelijke widget-ID - Sla het bestand op en herstart uw ontwikkelserver
Pages Router (pages/_app.tsx):
- Open uw bestand
pages/_app.tsx - Voeg de Script-component toe:
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: Het gebruik van strategy="afterInteractive" zorgt ervoor dat de chatbot wordt geladen direct nadat de pagina interactief wordt, wat een goede balans biedt tussen prestaties en beschikbaarheid.
Alternatieve methode 1: Gatsby-frontend
Voor Gatsby-sites die inhoud ophalen uit DatoCMS via gatsby-source-datocms:
- Maak of bewerk
gatsby-ssr.jsin uw projectroot: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"
/>
])
} - Vervang
YOUR_WIDGET_IDdoor uw werkelijke widget-ID - Herstart uw Gatsby-ontwikkelserver
Alternatieve methode 2: Nuxt.js-frontend
Voor Nuxt.js-applicaties die DatoCMS-inhoud gebruiken:
- Voeg toe aan uw
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'
}
]
}
}
}) - Vervang
YOUR_WIDGET_IDdoor uw werkelijke widget-ID - Herstart uw Nuxt-ontwikkelserver
Alternatieve methode 3: Gewone HTML / statische site
Als u de Content Delivery API van DatoCMS gebruikt met een statische HTML-site of statische sitegenerator:
- Voeg de insluitcode toe aan uw HTML-bestand vóór de afsluitende
</body>-tag:<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> - Vervang
YOUR_WIDGET_IDdoor uw werkelijke widget-ID - Sla het bestand op en upload het naar uw hosting
Alternatieve methode 4: React (Vite/CRA)
Voor standaard React-apps (Create React App, Vite) die DatoCMS API gebruiken:
Optie A: Toevoegen aan public/index.html
- Open uw bestand
public/index.html(CRA) ofindex.html(Vite) - Voeg de insluitcode toe v\u00f3\u00f3r de afsluitende
</body>-tag:<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> - Sla het bestand op
Optie B: useEffect in het hoofdcomponent
- Maak een chatbotcomponent of voeg toe aan uw hoofdcomponent:
// 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
} - Importeer en render de component in uw
App.jsxof root-layout
Stap 3: Deployen en verifiëren
Nadat u de chatbotcode aan uw DatoCMS-website hebt toegevoegd, deployt u of start u uw ontwikkelingsserver. Bezoek uw website in een nieuw browsertabblad of incognitovenster. U zou de chatwidgetknop in de rechteronderhoek moeten zien. Klik erop om te controleren of deze correct opent en werkt.
Ziet u de widget niet? Zorg ervoor dat u het script aan het juiste bestand voor uw framework hebt toegevoegd. Controleer de ontwikkelaarsconsole van uw browser op fouten. Als u server-side rendering gebruikt, zorg er dan voor dat het script aan de clientzijde wordt uitgevoerd. Probeer uw browsercache te wissen of te bekijken in een incognitovenster.
Omgevingsvariabelen: Voor betere beveiliging en flexibiliteit kunt u overwegen uw widget-ID op te slaan in een omgevingsvariabele (bijv. NEXT_PUBLIC_ASYNTAI_ID voor Next.js of VITE_ASYNTAI_ID voor Vite) in plaats van deze hard te coderen.