Hur du lägger till Asyntai AI-chattbot i Strapi

Steg-för-steg-guide för Strapi-drivna webbplatser

Plattform:

Headless CMS: Strapi är ett headless CMS som tillhandahåller innehåll via API men inte inkluderar ett inbyggt frontend. Installationen av chattboten beror på vilket frontend-ramverk du använder för att rendera ditt Strapi-innehåll. Välj metoden nedan som matchar din konfiguration.

Steg 1: Hämta din inbäddningskod

Gå först till din Asyntai-instrumentpanel och scrolla ner till avsnittet "Inbäddningskod". Kopiera din unika inbäddningskod som ser ut så här:

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

Obs! Koden ovan är bara ett exempel. Du måste kopiera din egen unika inbäddningskod från din instrumentpanel eftersom den innehåller ditt personliga widget-ID.

Metod 1: Next.js med Strapi (rekommenderas)

Om du använder Next.js som din Strapi-frontend (den vanligaste konfigurationen) lägger du till chattboten med Script-komponenten:

Öppna din huvudlayoutfil: app/layout.tsx (App Router) eller pages/_app.tsx (Pages Router)
Importera Script-komponenten och lägg till chattboten:
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> ) }
Ersätt YOUR_WIDGET_ID med ditt faktiska widget-ID
Spara filen och starta om din utvecklingsserver

Tips: Att använda strategy="lazyOnload" säkerställer att chattboten laddas efter att sidan är fullt interaktiv, vilket ger bästa prestanda för din Strapi-drivna webbplats.

Metod 2: Gatsby med Strapi

För Gatsby-webbplatser som använder gatsby-source-strapi:

Skapa eller redigera gatsby-ssr.js i din projektrot:
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" /> ]) }
Ersätt YOUR_WIDGET_ID med ditt faktiska widget-ID
Starta om din Gatsby-utvecklingsserver

Metod 3: Nuxt.js med Strapi

För Nuxt.js-applikationer som använder @nuxtjs/strapi:

Nuxt 3:

Lägg till i 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' } ] } } })

Nuxt 2:

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

Metod 4: React med Strapi

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

Öppna din public/index.html-fil (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>
Spara filen

Eller skapa 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
}

Metod 5: SvelteKit med Strapi

För SvelteKit-applikationer som använder Strapi-innehåll:

Redigera din src/app.html-fil
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>
Spara filen

Metod 6: Statisk webbplats med Strapi API

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

Lägg till inbäddningskoden i din HTML-fil före det avslutande </body>-taggen:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Spara filen och ladda upp till ditt webbhotell

Steg 2: Verifiera installationen

När du har lagt till chattbotkoden på din Strapi-drivna webbplats, distribuera eller kör din utvecklingsserver. Besök din webbplats i en ny webbläsarflik eller inkognitofönster. Du bör se chattwidgetknappen i det nedre högra hörnet. Klicka på den för att kontrollera att den öppnas och fungerar korrekt.

Ser du inte widgeten? Se till att du lagt till skriptet i rätt fil för ditt ramverk. Kontrollera webbläsarens utvecklarkonsol för eventuella fel. Om du använder server-side rendering, se till att skriptet körs på klientsidan. Prova att rensa webbläsarens cache eller visa sidan i ett inkognitofönster.

Miljövariabler: För bättre säkerhet och flexibilitet, överväg att lagra ditt widget-ID i en miljövariabel (t.ex. NEXT_PUBLIC_ASYNTAI_ID för Next.js eller VITE_ASYNTAI_ID för Vite) istället för att hårdkoda det.

Dokumentation