Hoe voegt u de Asyntai AI-chatbot toe aan Strapi

Stapsgewijze handleiding voor websites op basis van Strapi

Platform:

Headless CMS: Strapi is een headless CMS dat inhoud levert via een API maar geen ingebouwde frontend bevat. De chatbotinstallatie hangt af van welk frontend-framework u gebruikt om uw Strapi-inhoud weer te geven. 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 Strapi (aanbevolen)

Als u Next.js gebruikt als uw Strapi-frontend (de meest voorkomende configuratie), voeg dan de chatbot toe met het 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 biedt voor uw Strapi-site.

Methode 2: Gatsby met Strapi

Voor Gatsby-sites die gatsby-source-strapi gebruiken:

Create or edit gatsby-ssr.js in your project root:
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" /> ]) }
Vervang YOUR_WIDGET_ID door uw werkelijke widget-ID
Herstart uw Gatsby-ontwikkelserver

Methode 3: Nuxt.js met Strapi

Voor Nuxt.js-applicaties die @nuxtjs/strapi 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' } ] } } })

Nuxt 2:

Voeg toe aan uw nuxt.config.js:
export default { head: { script: [ { src: 'https://asyntai.com/static/js/chat-widget.js', async: true, 'data-asyntai-id': 'YOUR_WIDGET_ID' } ] } }

Methode 4: React met Strapi

For standard React apps (Create React App, Vite) consuming Strapi API:

Open uw bestand public/index.html (CRA) of index.html (Vite)
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 maak een React-component aan:

// 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 5: SvelteKit met Strapi

Voor SvelteKit-applicaties die Strapi-inhoud consumeren:

Bewerk uw src/app.html-bestand
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

Methode 6: Statische site met Strapi API

If you're using Strapi's REST or GraphQL API with a static HTML site:

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

Na het toevoegen van de chatbotcode aan uw Strapi-site, implementeer of start uw ontwikkelserver. Bezoek uw website in een nieuw browsertabblad of incognitovenster. U zou de chatwidget-knop 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: Voor betere beveiliging en flexibiliteit kunt u overwegen uw widget-ID op te slaan in een omgevingsvariabele (bijv. NEXT_PUBLIC_ASYNTAI_ID voor Next.js of VITE_ASYNTAI_ID voor Vite) in plaats van deze hard te coderen.

Documentatie