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

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

Plattform:

Headless CMS: Contentful ist ein Headless CMS, das heißt, es stellt Inhalte über API bereit, enthält aber kein eingebautes Frontend. Die Chatbot-Installation hängt davon ab, welches Frontend-Framework Sie zum Rendern Ihrer Contentful-Inhalte verwenden. Wählen Sie die Methode unten, 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 Contentful (Empfohlen)

Wenn Sie Next.js zum Rendern Ihrer Contentful-Inhalte verwenden, 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 geladen wird, nachdem die Seite vollständig interaktiv ist, was die beste Leistung bietet.

Methode 2: Gatsby mit Contentful

Für Gatsby-Websites, die Inhalte von Contentful beziehen:

Installieren Sie gatsby-plugin-load-script (optional, aber empfohlen):
npm install gatsby-plugin-load-script
Fügen Sie es zu Ihrer gatsby-config.js hinzu:
module.exports = { plugins: [ { resolve: 'gatsby-plugin-load-script', options: { src: 'https://asyntai.com/static/js/chat-widget.js', attributes: { 'data-asyntai-id': 'YOUR_WIDGET_ID', async: true } } } ] }
Alternativ verwenden Sie gatsby-ssr.js:
// gatsby-ssr.js 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" /> ]) }
Starten Sie Ihren Gatsby-Entwicklungsserver neu

Methode 3: React mit Contentful

Für Standard-React-Apps (Create React App, Vite usw.), die Contentful verwenden:

Öffnen Sie Ihre Datei public/index.html
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 verwenden Sie eine React-Komponente mit useEffect:

// 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 4: Vue/Nuxt mit Contentful

Für Vue- oder Nuxt.js-Anwendungen, die Contentful 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' } ] } } })

Vue 3:

Add to your index.html before </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Methode 5: Statisches HTML mit Contentful API

Wenn Sie die Content Delivery API von Contentful mit Vanilla-JavaScript 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 Contentful-basierten Website hinzugefügt haben, deployen 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), anstatt sie fest im Code zu hinterlegen.

Dokumentation