Hur du lägger till Asyntai AI-chattbot i DatoCMS
Steg-för-steg-guide för DatoCMS-drivna webbplatser
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 är ett headless CMS som levererar innehåll via API:er. Chattbotkoden måste läggas till i din frontendapplikation (Next.js, Gatsby, Nuxt osv.), inte i DatoCMS-instrumentpanelen.
Steg 1: Hämta din inbäddningskod
Gå först till din Asyntai-instrumentpanel och scrolla ner till avsnittet "Inbäddningskod". Kopiera din unika inbäddningskod som ser ut så här:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Obs! Koden ovan är bara ett exempel. Du måste kopiera din egen unika inbäddningskod från din Dashboard eftersom den innehåller ditt personliga widget-ID.
Steg 2: Lägg till i Next.js-frontend (vanligast)
Next.js är det mest populära frontendramverket som används med DatoCMS. Lägg till chattbotten med Script-komponenten:
App Router (app/layout.tsx):
- Öppna din rotlayoutfil:
app/layout.tsx - Importera Script-komponenten och lägg till chattboten:
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>
)
} - Ersätt
YOUR_WIDGET_IDmed ditt faktiska widget-ID - Spara filen och starta om din utvecklingsserver
Pages Router (pages/_app.tsx):
- Öppna din
pages/_app.tsx-fil - Lägg till 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: Att använda strategy="afterInteractive" säkerställer att chattboten laddas direkt efter att sidan blir interaktiv, vilket ger en bra balans mellan prestanda och tillgänglighet.
Alternativ metod 1: Gatsby-gränssnitt
För Gatsby-webbplatser som hämtar innehåll från DatoCMS via gatsby-source-datocms:
- Skapa eller redigera
gatsby-ssr.jsi din projektrot: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"
/>
])
} - Ersätt
YOUR_WIDGET_IDmed ditt faktiska widget-ID - Starta om din Gatsby-utvecklingsserver
Alternativ metod 2: Nuxt.js-gränssnitt
För Nuxt.js-applikationer som använder DatoCMS-innehåll:
- Lägg till i 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'
}
]
}
}
}) - Ersätt
YOUR_WIDGET_IDmed ditt faktiska widget-ID - Starta om din Nuxt-utvecklingsserver
Alternativ metod 3: Ren HTML / statisk webbplats
Om du använder DatoCMS:s Content Delivery API med en statisk HTML-webbplats eller statisk webbplatsgenerator:
- Lägg till inbäddningskoden i din HTML-fil före den avslutande
</body>-taggen:<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> - Ersätt
YOUR_WIDGET_IDmed ditt faktiska widget-ID - Spara filen och ladda upp till ditt webbhotell
Alternativ metod 4: React (Vite/CRA)
För standard React-appar (Create React App, Vite osv.) som använder DatoCMS API:
Alternativ A: Lägg till i public/index.html
- Öppna din
public/index.html-fil (CRA) ellerindex.html(Vite) - Lägg till inbäddningskoden före den avslutande
</body>-taggen:<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> - Spara filen
Alternativ B: useEffect i rotkomponenten
- Skapa en chattbotkomponent eller lägg till i din rotkomponent:
// 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
} - Importera och rendera komponenten i din
App.jsxeller rotlayout
Steg 3: Driftsätt och verifiera
När du har lagt till chattbotkoden på din DatoCMS-drivna webbplats, distribuera eller kör din utvecklingsserver. Besök din webbplats i en ny webbläsarflik eller inkognitofönster. Du bör se chattwidgetknappen i det nedre högra hörnet. Klicka på den för att kontrollera att den öppnas och fungerar korrekt.
Ser du inte widgeten? Se till att du lagt till skriptet i rätt fil för ditt ramverk. Kontrollera webbläsarens utvecklarkonsol för eventuella fel. Om du använder server-side rendering, se till att skriptet körs på klientsidan. Prova att rensa webbläsarens cache eller visa sidan i ett inkognitofönster.
Miljövariabler: För bättre säkerhet och flexibilitet, överväg att lagra ditt widget-ID i en miljövariabel (t.ex. NEXT_PUBLIC_ASYNTAI_ID för Next.js eller VITE_ASYNTAI_ID för Vite) istället för att hårdkoda det.