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

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

Plattform:

Headless CMS: DatoCMS ist ein Headless CMS, das Inhalte über APIs bereitstellt. Der Chatbot-Code muss zu Ihrer Frontend-Anwendung (Next.js, Gatsby, Nuxt usw.) hinzugefügt werden, nicht zum DatoCMS-Dashboard.

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.

Schritt 2: Zum Next.js-Frontend hinzufügen (Am häufigsten)

Next.js ist das beliebteste Frontend-Framework, das mit DatoCMS verwendet wird. Fügen Sie den Chatbot mit der Script-Komponente hinzu:

App Router (app/layout.tsx):

Öffnen Sie Ihre Root-Layout-Datei: app/layout.tsx
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="afterInteractive" /> </body> </html> ) }
Ersetzen Sie YOUR_WIDGET_ID durch Ihre tatsächliche Widget-ID
Speichern Sie die Datei und starten Sie Ihren Entwicklungsserver neu

Pages Router (pages/_app.tsx):

Öffnen Sie Ihre Datei pages/_app.tsx
Fügen Sie die Script-Komponente hinzu:
import Script from 'next/script' import type { AppProps } from 'next/app' export default function App({ Component, pageProps }: AppProps) { return ( <> <Component {...pageProps} /> <Script src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID" strategy="afterInteractive" /> </> ) }

Tipp: Die Verwendung von strategy="afterInteractive" stellt sicher, dass der Chatbot direkt nach dem Interaktivwerden der Seite geladen wird, was eine gute Balance zwischen Leistung und Verfügbarkeit bietet.

Alternative Methode 1: Gatsby-Frontend

Für Gatsby-Websites, die Inhalte von DatoCMS über gatsby-source-datocms beziehen:

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

Alternative Methode 2: Nuxt.js-Frontend

Für Nuxt.js-Anwendungen, die DatoCMS-Inhalte verwenden:

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' } ] } } })
Ersetzen Sie YOUR_WIDGET_ID durch Ihre tatsächliche Widget-ID
Starten Sie Ihren Nuxt-Entwicklungsserver neu

Alternative Methode 3: Einfaches HTML / Statische Website

Wenn Sie die Content Delivery API von DatoCMS mit einer statischen HTML-Website oder einem statischen Website-Generator 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>
Ersetzen Sie YOUR_WIDGET_ID durch Ihre tatsächliche Widget-ID
Speichern Sie die Datei und laden Sie sie auf Ihr Hosting hoch

Alternative Methode 4: React (Vite/CRA)

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

Option A: Zu public/index.html hinzufügen

Ö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

Option B: useEffect in der Root-Komponente

Erstellen Sie eine Chatbot-Komponente oder fügen Sie sie zu Ihrer Stammkomponente hinzu:
// 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 }
Importieren und rendern Sie die Komponente in Ihrer App.jsx oder dem Root-Layout

Schritt 3: Deployen und überprüfen

Nachdem Sie den Chatbot-Code zu Ihrer DatoCMS-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 oder VITE_ASYNTAI_ID für Vite), anstatt sie fest im Code zu hinterlegen.

Dokumentation