Sådan tilføjer du Asyntai AI-chatbot til DatoCMS
Trin-for-trin-guide til DatoCMS-drevne websteder
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, der leverer indhold via API'er. Chatbot-koden skal tilføjes til din frontend-applikation (Next.js, Gatsby, Nuxt osv.), ikke til DatoCMS-dashboardet.
Trin 1: Hent din indlejringskode
Gå først til dit Asyntai Dashboard og rul ned til sektionen "Indlejringskode". Kopiér din unikke indlejringskode, der vil se sådan ud:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Bemærk: Koden ovenfor er blot et eksempel. Du skal kopiere din egen unikke indlejringskode fra dit Dashboard, da den indeholder dit personlige widget-ID.
Trin 2: Tilføj til Next.js-frontend (mest almindeligt)
Next.js er det mest populære frontend-framework, der bruges med DatoCMS. Tilføj chatbotten ved hjælp af Script-komponenten:
App Router (app/layout.tsx):
- Åbn din rodlayoutfil:
app/layout.tsx - Importer Script-komponenten og tilføj chatbotten:
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>
)
} - Erstat
YOUR_WIDGET_IDmed dit faktiske widget-ID - Gem filen og genstart din udviklingsserver
Pages Router (pages/_app.tsx):
- Åbn din
pages/_app.tsx-fil - Tilføj 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"
/>
</>
)
}
Tip: Brug af strategy="afterInteractive" sikrer, at chatbotten indlæses umiddelbart efter, at siden bliver interaktiv, hvilket giver en god balance mellem ydeevne og tilgængelighed.
Alternativ metode 1: Gatsby-frontend
For Gatsby-websteder, der henter indhold fra DatoCMS via gatsby-source-datocms:
- Opret eller rediger
gatsby-ssr.jsi din projektrod: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"
/>
])
} - Erstat
YOUR_WIDGET_IDmed dit faktiske widget-ID - Genstart din Gatsby-udviklingsserver
Alternativ metode 2: Nuxt.js-frontend
For Nuxt.js-applikationer, der bruger DatoCMS-indhold:
- Tilføj til din
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'
}
]
}
}
}) - Erstat
YOUR_WIDGET_IDmed dit faktiske widget-ID - Genstart din Nuxt-udviklingsserver
Alternativ metode 3: Almindeligt HTML / statisk websted
Hvis du bruger DatoCMS's Content Delivery API med et statisk HTML-websted eller en statisk webstedsgenerator:
- Tilføj indlejringskoden til din HTML-fil før det afsluttende
</body>-tag:<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> - Erstat
YOUR_WIDGET_IDmed dit faktiske widget-ID - Gem filen og upload til dit webhotel
Alternativ metode 4: React (Vite/CRA)
For standard React-apps (Create React App, Vite), der bruger DatoCMS API:
Mulighed A: Tilføj til public/index.html
- Åbn din
public/index.html-fil (CRA) ellerindex.html(Vite) - Tilføj indlejringskoden før det afsluttende
</body>-tag:<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> - Gem filen
Mulighed B: useEffect i rodkomponent
- Opret en chatbot-komponent eller tilføj til din rodkomponent:
// 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 render komponenten i din
App.jsxeller rodlayout
Trin 3: Deploy og verificer
Efter at have tilføjet chatbot-koden til dit DatoCMS-drevne websted skal du deploye eller køre din udviklingsserver. Besøg dit websted i en ny browserfane eller et inkognitovindue. Du bør se chat-widget-knappen i nederste højre hjørne. Klik på den for at sikre, at den åbner og fungerer korrekt.
Ser du ikke widget'en? Sørg for, at du har tilføjet scriptet til den korrekte fil til dit framework. Tjek din browsers udviklerkonsol for fejl. Hvis du bruger server-side rendering, skal du sikre, at scriptet kører på klientsiden. Prøv at rydde din browsercache eller se siden i et inkognitovindue.
Miljøvariabler: For bedre sikkerhed og fleksibilitet bør du overveje at gemme dit widget-ID i en miljøvariabel (f.eks. NEXT_PUBLIC_ASYNTAI_ID for Next.js eller VITE_ASYNTAI_ID for Vite) i stedet for at hardkode det.