Slik legger du til Asyntai AI-chatbot i Contentful

Trinn-for-trinn-guide for Contentful-drevne nettsteder

Plattform:

Headless CMS: Contentful er et headless CMS, noe som betyr at det leverer innhold via API, men ikke inkluderer en innebygd frontend. Chatbot-installasjonen avhenger av hvilket frontend-rammeverk du bruker for å gjengi Contentful-innholdet ditt. Velg metoden nedenfor som passer ditt oppsett.

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.

Metode 1: Next.js med Contentful (anbefalt)

Hvis du bruker Next.js for å gjengi Contentful-innholdet ditt, legg til chatboten ved hjelp av Script-komponenten:

Åpne hovedlayoutfilen din: app/layout.tsx (App Router) eller pages/_app.tsx (Pages Router)
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="lazyOnload" /> </body> </html> ) }
Erstatt YOUR_WIDGET_ID med din faktiske widget-ID
Lagre filen og start utviklingsserveren på nytt

Tips: Bruk av strategy="lazyOnload" sikrer at chatboten lastes inn etter at siden er fullt interaktiv, noe som gir best ytelse.

Metode 2: Gatsby med Contentful

For Gatsby-nettsteder som henter innhold fra Contentful:

Installer gatsby-plugin-load-script (valgfritt, men anbefalt):
npm install gatsby-plugin-load-script
Legg til i gatsby-config.js:
module.exports = { plugins: [ { resolve: 'gatsby-plugin-load-script', options: { src: 'https://asyntai.com/static/js/chat-widget.js', attributes: { 'data-asyntai-id': 'YOUR_WIDGET_ID', async: true } } } ] }
Alternativt, bruk gatsby-ssr.js:
// gatsby-ssr.js 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" /> ]) }
Start Gatsby-utviklingsserveren på nytt

Metode 3: React med Contentful

For standard React-apper (Create React App, Vite osv.) som bruker Contentful:

Åpne filen public/index.html
Add the embed code before the closing </body> tag:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Lagre filen

Eller bruk en React-komponent med useEffect:

// 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
}

Metode 4: Vue/Nuxt med Contentful

For Vue- eller Nuxt.js-applikasjoner som bruker Contentful:

Nuxt 3:

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' } ] } } })

Vue 3:

Legg til i index.html før </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Metode 5: Statisk HTML med Contentful API

Hvis du bruker Contentfuls Content Delivery API med vanlig JavaScript:

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>
Lagre filen og last opp til hostingen din

Trinn 2: Bekreft installasjonen

Etter at du har lagt til chatbot-koden på ditt Contentful-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) i stedet for å hardkode den.

Dokumentasjon