Sådan tilføjer du Asyntai AI-chatbot til Contentful

Trin-for-trin-guide til Contentful-drevne websteder

Platform:

Headless CMS: Contentful er et headless CMS, hvilket betyder, at det leverer indhold via API, men ikke inkluderer en indbygget frontend. Installation af chatbotten afhænger af, hvilket frontend-framework du bruger til at vise dit Contentful-indhold. Vælg den metode nedenfor, der passer til din opsætning.

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.

Metode 1: Next.js med Contentful (anbefalet)

Hvis du bruger Next.js til at vise dit Contentful-indhold, kan du tilføje chatbotten ved hjælp af Script-komponenten:

Åbn din hoveddistributionsfil: app/layout.tsx (App Router) eller pages/_app.tsx (Pages Router)
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="lazyOnload" /> </body> </html> ) }
Erstat YOUR_WIDGET_ID med dit faktiske widget-ID
Gem filen og genstart din udviklingsserver

Tip: Brug af strategy="lazyOnload" sikrer, at chatbotten indlæses, efter at siden er fuldt interaktiv, hvilket giver den bedste ydeevne.

Metode 2: Gatsby med Contentful

For Gatsby-websteder, der henter indhold fra Contentful:

Installer gatsby-plugin-load-script (valgfrit, men anbefalet):
npm install gatsby-plugin-load-script
Tilføj til din 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 kan du bruge 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" /> ]) }
Genstart din Gatsby-udviklingsserver

Metode 3: React med Contentful

For standard React-apps (Create React App, Vite osv.) der bruger Contentful:

Åbn din public/index.html-fil
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

Eller brug 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-applikationer, der bruger Contentful:

Nuxt 3:

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

Vue 3:

Tilføj til din 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 bruger Contentfuls Content Delivery API med almindeligt JavaScript:

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>
Gem filen og upload til dit webhotel

Trin 2: Verificer installationen

Efter at have tilføjet chatbot-koden til dit Contentful-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) i stedet for at hardkode det.

Dokumentation