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

Trin-for-trin-vejledning til Strapi-drevne websteder

Platform:

Headless CMS: Strapi er et headless CMS, der leverer indhold via API, men inkluderer ikke en indbygget frontend. Chatbot-installationen afhænger af, hvilken frontend-ramme du bruger til at rendere dit Strapi-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 Strapi (anbefalet)

Hvis du bruger Next.js som din Strapi-frontend (den mest almindelige opsætning), skal 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 for dit Strapi-drevne websted.

Metode 2: Gatsby med Strapi

Til Gatsby-websteder, der bruger gatsby-source-strapi:

Opret eller rediger gatsby-ssr.js i din projektrod:
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" /> ]) }
Erstat YOUR_WIDGET_ID med dit faktiske widget-ID
Genstart din Gatsby-udviklingsserver

Metode 3: Nuxt.js med Strapi

Til Nuxt.js-applikationer, der bruger @nuxtjs/strapi:

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

Nuxt 2:

Tilføj til 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' } ] } }

Metode 4: React med Strapi

Til standard React-apps (Create React App, Vite), der bruger Strapi API:

Åbn din public/index.html-fil (CRA) eller index.html (Vite)
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 opret 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

Til SvelteKit-applikationer, der bruger Strapi-indhold:

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

Metode 6: Statisk websted med Strapi API

Hvis du bruger Strapis REST- eller GraphQL-API med et statisk HTML-websted:

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 Strapi-drevne websted, skal du deploye eller køre din udviklingsserver. Besøg dit websted i en ny browserfane eller 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 eller VITE_ASYNTAI_ID for Vite) i stedet for at hardkode det.

Dokumentation