So fügen Sie den Asyntai AI Chatbot zu Strapi hinzu

Schritt-für-Schritt-Anleitung für Strapi-basierte Websites

Plattform:

Headless CMS: Strapi ist ein Headless CMS, das Inhalte über API bereitstellt, aber kein integriertes Frontend enthält. Die Chatbot-Installation hängt davon ab, welches Frontend-Framework Sie zum Rendern Ihrer Strapi-Inhalte verwenden. Wählen Sie die nachfolgende Methode, die zu Ihrem Setup passt.

Schritt 1: Ihren Einbettungscode erhalten

Gehen Sie zunächst zu Ihrem Asyntai Dashboard und scrollen Sie zum Abschnitt "Einbettungscode". Kopieren Sie Ihren einzigartigen Einbettungscode, der so aussieht:

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

Hinweis: Der obige Code ist nur ein Beispiel. Sie müssen Ihren eigenen einzigartigen Einbettungscode von Ihrem Dashboard kopieren, da er Ihre persönliche Widget-ID enthält.

Methode 1: Next.js mit Strapi (empfohlen)

Wenn Sie Next.js als Ihr Strapi-Frontend verwenden (das häufigste Setup), fügen Sie den Chatbot mit der Script-Komponente hinzu:

Öffnen Sie Ihre Haupt-Layout-Datei: app/layout.tsx (App Router) oder pages/_app.tsx (Pages Router)
Importieren Sie die Script-Komponente und fügen Sie den Chatbot hinzu:
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> ) }
Replace YOUR_WIDGET_ID with your actual widget ID
Speichern Sie die Datei und starten Sie Ihren Entwicklungsserver neu

Tipp: Die Verwendung von strategy="lazyOnload" stellt sicher, dass der Chatbot nach vollständiger Interaktivität der Seite geladen wird und so die beste Leistung für Ihre Strapi-basierte Website bietet.

Methode 2: Gatsby mit Strapi

Für Gatsby-Websites, die gatsby-source-strapi verwenden:

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" /> ]) }
Replace YOUR_WIDGET_ID with your actual widget ID
Starten Sie Ihren Gatsby-Entwicklungsserver neu

Methode 3: Nuxt.js mit Strapi

Für Nuxt.js-Anwendungen, die @nuxtjs/strapi verwenden:

Nuxt 3:

Fügen Sie es zu Ihrer nuxt.config.ts hinzu:
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:

Fügen Sie Folgendes zu Ihrer nuxt.config.js hinzu:
export default { head: { script: [ { src: 'https://asyntai.com/static/js/chat-widget.js', async: true, 'data-asyntai-id': 'YOUR_WIDGET_ID' } ] } }

Methode 4: React mit Strapi

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

Öffnen Sie Ihre Datei public/index.html (CRA) oder 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>
Speichern Sie die Datei

Oder erstellen Sie eine React-Komponente:

// 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 mit Strapi

Für SvelteKit-Anwendungen, die Strapi-Inhalte nutzen:

Bearbeiten Sie Ihre src/app.html-Datei
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>
Speichern Sie die Datei

Methode 6: Statische Website mit Strapi-API

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

Fügen Sie den Einbettungscode zu Ihrer HTML-Datei vor dem schließenden </body>-Tag hinzu:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Speichern Sie die Datei und laden Sie sie auf Ihr Hosting hoch

Schritt 2: Installation überprüfen

Nachdem Sie den Chatbot-Code zu Ihrer Strapi-basierten Website hinzugefügt haben, stellen Sie sie bereit oder starten Sie Ihren Entwicklungsserver. Besuchen Sie Ihre Website in einem neuen Browser-Tab oder Inkognito-Fenster. Sie sollten den Chat-Widget-Button in der unteren rechten Ecke sehen. Klicken Sie darauf, um sicherzustellen, dass er sich öffnet und korrekt funktioniert.

Widget nicht sichtbar? Stellen Sie sicher, dass Sie das Skript zur richtigen Datei für Ihr Framework hinzugefügt haben. Prüfen Sie die Entwicklerkonsole Ihres Browsers auf Fehler. Wenn Sie serverseitiges Rendering verwenden, stellen Sie sicher, dass das Skript auf der Client-Seite ausgeführt wird. Versuchen Sie, Ihren Browser-Cache zu leeren oder in einem Inkognito-Fenster anzuzeigen.

Umgebungsvariablen: Für bessere Sicherheit und Flexibilität sollten Sie Ihre Widget-ID in einer Umgebungsvariable speichern (z.B. NEXT_PUBLIC_ASYNTAI_ID für Next.js oder VITE_ASYNTAI_ID für Vite), anstatt sie fest im Code zu hinterlegen.

Dokumentation