Slik legger du til Asyntai AI-chatbot i DatoCMS
Trinn-for-trinn-guide for DatoCMS-drevne nettsteder
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 er et headless CMS som leverer innhold via API-er. Chatbot-koden må legges til i frontend-applikasjonen din (Next.js, Gatsby, Nuxt osv.), ikke i DatoCMS-dashbordet.
Trinn 1: Hent innbyggingskoden din
Gå først til Asyntai-dashbordet ditt og bla ned til «Innbyggingskode»-seksjonen. Kopier din unike innbyggingskode som vil se slik ut:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Merk: Koden ovenfor er bare et eksempel. Du må kopiere din egen unike innbyggingskode fra Dashbordet ditt, da den inneholder din personlige widget-ID.
Trinn 2: Legg til i Next.js-frontend (vanligst)
Next.js er det mest populære frontend-rammeverket brukt med DatoCMS. Legg til chatboten ved hjelp av Script-komponenten:
App Router (app/layout.tsx):
- Åpne rotlayoutfilen din:
app/layout.tsx - Importer Script-komponenten og legg til chatboten:
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>
)
} - Erstatt
YOUR_WIDGET_IDmed din faktiske widget-ID - Lagre filen og start utviklingsserveren på nytt
Pages Router (pages/_app.tsx):
- Åpne filen
pages/_app.tsx - Legg til Script-komponenten:
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"
/>
</>
)
}
Tips: Bruk av strategy="afterInteractive" sikrer at chatboten lastes inn rett etter at siden blir interaktiv, noe som gir en god balanse mellom ytelse og tilgjengelighet.
Alternativ metode 1: Gatsby-frontend
For Gatsby-nettsteder som henter innhold fra DatoCMS via gatsby-source-datocms:
- Opprett eller rediger
gatsby-ssr.jsi prosjektets rotmappe: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"
/>
])
} - Erstatt
YOUR_WIDGET_IDmed din faktiske widget-ID - Start Gatsby-utviklingsserveren på nytt
Alternativ metode 2: Nuxt.js-frontend
For Nuxt.js-applikasjoner som bruker DatoCMS-innhold:
- Legg til i
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'
}
]
}
}
}) - Erstatt
YOUR_WIDGET_IDmed din faktiske widget-ID - Start Nuxt-utviklingsserveren på nytt
Alternativ metode 3: Vanlig HTML / statisk nettsted
Hvis du bruker DatoCMS sitt Content Delivery API med et statisk HTML-nettsted eller en statisk nettstedsgenerator:
- Legg til innbyggingskoden i HTML-filen din før den avsluttende
</body>-taggen:<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> - Erstatt
YOUR_WIDGET_IDmed din faktiske widget-ID - Lagre filen og last opp til hostingen din
Alternativ metode 4: React (Vite/CRA)
For standard React-apper (Create React App, Vite) som bruker DatoCMS API:
Alternativ A: Legg til i public/index.html
- Åpne filen
public/index.html(CRA) ellerindex.html(Vite) - Legg til innbyggingskoden før den avsluttende
</body>-taggen:<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> - Lagre filen
Alternativ B: useEffect i rotkomponent
- Opprett en chatbot-komponent eller legg til i rotkomponenten din:
// 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
} - Importer og gjengi komponenten i
App.jsxeller rotlayouten din
Trinn 3: Distribuer og bekreft
Etter at du har lagt til chatbot-koden på ditt DatoCMS-drevne nettsted, distribuer eller start utviklingsserveren din. Besøk nettstedet ditt i en ny nettleserfane eller et inkognitovindu. Du bør se chatwidget-knappen i nedre høyre hjørne. Klikk på den for å sjekke at den åpnes og fungerer riktig.
Ser du ikke widgeten? Sørg for at du har lagt til skriptet i riktig fil for rammeverket ditt. Sjekk nettleserens utviklerkonsoll for eventuelle feil. Hvis du bruker server-side rendering, sørg for at skriptet kjøres på klientsiden. Prøv å tømme nettleserens hurtigbuffer eller se i et inkognitovindu.
Miljøvariabler: For bedre sikkerhet og fleksibilitet, vurder å lagre widget-ID-en din i en miljøvariabel (f.eks. NEXT_PUBLIC_ASYNTAI_ID for Next.js eller VITE_ASYNTAI_ID for Vite) i stedet for å hardkode den.