Hoe u de Asyntai AI-chatbot toevoegt aan Contentful

Stapsgewijze handleiding voor websites die Contentful gebruiken

Platform:

Headless CMS: Contentful is een headless CMS, wat betekent dat het inhoud via een API levert maar geen ingebouwde frontend bevat. De chatbot-installatie is afhankelijk van welk frontend-framework u gebruikt om uw Contentful-inhoud te renderen. Kies hieronder de methode die bij uw configuratie past.

Stap 1: Uw insluitcode ophalen

Ga eerst naar uw Asyntai Dashboard en scroll naar het gedeelte "Insluitcode". Kopieer uw unieke insluitcode die er als volgt uitziet:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Opmerking: De bovenstaande code is slechts een voorbeeld. U moet uw eigen unieke insluitcode kopiëren vanuit uw Dashboard omdat deze uw persoonlijke widget-ID bevat.

Methode 1: Next.js met Contentful (aanbevolen)

Als u Next.js gebruikt om uw Contentful-inhoud te renderen, voeg dan de chatbot toe met de Script-component:

Open uw hoofdlay-outbestand: app/layout.tsx (App Router) of pages/_app.tsx (Pages Router)
Importeer de Script-component en voeg de chatbot toe:
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> ) }
Vervang YOUR_WIDGET_ID door uw werkelijke widget-ID
Sla het bestand op en herstart uw ontwikkelserver

Tip: Het gebruik van strategy="lazyOnload" zorgt ervoor dat de chatbot wordt geladen nadat de pagina volledig interactief is, wat de beste prestaties oplevert.

Methode 2: Gatsby met Contentful

Voor Gatsby-sites die inhoud ophalen uit Contentful:

Installeer gatsby-plugin-load-script (optioneel maar aanbevolen):
npm install gatsby-plugin-load-script
Voeg toe aan uw 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 } } } ] }
Gebruik als alternatief 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" /> ]) }
Herstart uw Gatsby-ontwikkelserver

Methode 3: React met Contentful

Voor standaard React-apps (Create React App, Vite, enz.) die Contentful gebruiken:

Open uw bestand 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>
Sla het bestand op

Of gebruik een React-component met 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
}

Methode 4: Vue/Nuxt met Contentful

Voor Vue- of Nuxt.js-applicaties die Contentful gebruiken:

Nuxt 3:

Voeg toe aan uw 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:

Add to your index.html before </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Methode 5: Statische HTML met Contentful API

Als u de Content Delivery API van Contentful gebruikt met standaard JavaScript:

Voeg de insluitcode toe aan uw HTML-bestand vóór de afsluitende </body>-tag:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Sla het bestand op en upload het naar uw hosting

Stap 2: Installatie verifiëren

Deploy of start na het toevoegen van de chatbotcode aan uw Contentful-website uw ontwikkelserver. Bezoek uw website in een nieuw browsertabblad of incognitovenster. U zou de chatwidgetknop in de rechteronderhoek moeten zien. Klik erop om te controleren of deze correct opent en werkt.

Ziet u de widget niet? Zorg ervoor dat u het script aan het juiste bestand voor uw framework hebt toegevoegd. Controleer de ontwikkelaarsconsole van uw browser op fouten. Als u server-side rendering gebruikt, zorg er dan voor dat het script aan de clientzijde wordt uitgevoerd. Probeer uw browsercache te wissen of te bekijken in een incognitovenster.

Omgevingsvariabelen: Overweeg voor betere beveiliging en flexibiliteit om uw widget-ID op te slaan in een omgevingsvariabele (bijv. NEXT_PUBLIC_ASYNTAI_ID voor Next.js) in plaats van deze hard te coderen.

Documentatie