Slik legger du til Asyntai AI-chatbot i Strapi

Trinn-for-trinn-guide for Strapi-drevne nettsteder

Plattform:

Headless CMS: Strapi er et hodeløst CMS som leverer innhold via API, men som ikke inkluderer en innebygd frontend. Chatbot-installasjonen avhenger av hvilket frontend-rammeverk du bruker for å vise Strapi-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 Strapi (anbefalt)

Hvis du bruker Next.js som Strapi-frontend (det vanligste oppsettet), legg til chatboten med 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 for ditt Strapi-drevne nettsted.

Metode 2: Gatsby med Strapi

For Gatsby-nettsteder som bruker gatsby-source-strapi:

Opprett eller rediger gatsby-ssr.js i prosjektets rotmappe:
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" /> ]) }
Erstatt YOUR_WIDGET_ID med din faktiske widget-ID
Start Gatsby-utviklingsserveren på nytt

Metode 3: Nuxt.js med Strapi

For Nuxt.js-applikasjoner som bruker @nuxtjs/strapi:

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

Nuxt 2:

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

Metode 4: React med Strapi

For standard React-apper (Create React App, Vite) som bruker Strapi API:

Åpne filen public/index.html (CRA) eller 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>
Lagre filen

Eller opprett en React-komponent:

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

For SvelteKit-applikasjoner som bruker Strapi-innhold:

Rediger src/app.html-filen din
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

Metode 6: Statisk nettsted med Strapi API

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

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å det Strapi-drevne nettstedet ditt, distribuer eller kjør utviklingsserveren din. Besøk nettstedet ditt i en ny nettleserfane eller inkognitovindu. Du bør se chatwidget-knappen i nedre høyre hjørne. Klikk på den for å forsikre deg om 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 eller VITE_ASYNTAI_ID for Vite) i stedet for å hardkode den.

Dokumentasjon