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> ) }
Ersetzen Sie YOUR_WIDGET_ID durch Ihre tatsächliche 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:

Erstellen oder bearbeiten Sie gatsby-ssr.js im Stammverzeichnis Ihres Projekts:
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" /> ]) }
Ersetzen Sie YOUR_WIDGET_ID durch Ihre tatsächliche 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

Für Standard-React-Apps (Create React App, Vite), die die Strapi-API nutzen:

Öffnen Sie Ihre Datei public/index.html (CRA) oder index.html (Vite)
Fügen Sie den Einbettungscode vor dem schließenden </body>-Tag ein:
<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
Fügen Sie den Einbettungscode vor dem schließenden </body>-Tag ein:
<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

Wenn Sie Strapis REST- oder GraphQL-API mit einer statischen HTML-Website verwenden:

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