Das Hinzufügen eines ChatLab-Chatbots zu Ihrer Webflow-Website ermöglicht es Besuchern, direkt auf Ihrer Website mit Ihrem KI-Assistenten zu interagieren. Diese Anleitung führt Sie durch die Schritte, um Ihren Embed-Code von ChatLab zu erhalten und in Webflow einzufügen.
Bevor Sie beginnen
Bevor Sie beginnen, erstellen Sie Ihren Chatbot und prüfen Sie, ob Ihre Webflow-Website oder Ihr Webflow-Workspace Zugriff auf benutzerdefinierten Code beinhaltet. Siehe Webflows Anforderungen an benutzerdefinierten Code. Sie benötigen außerdem die Berechtigung, die Website zu bearbeiten und zu veröffentlichen.
Schritt 1 - Den Embed-Code aus ChatLab kopieren
- Melden Sie sich bei ChatLab an und wählen Sie den Chatbot aus, den Sie einbinden möchten
- Klicken Sie auf den Tab Deploy (Bereitstellen) und wählen Sie dann im Plattform-Panel auf der rechten Seite Webflow aus
- Wählen Sie Widget für die unten beschriebene Header-Installation. Für einen dauerhaft sichtbaren Chat wählen Sie Iframe und folgen Sie den nachstehenden Anweisungen für Iframes. Einen Vergleich finden Sie unter Was ist der Unterschied zwischen Widget und Iframe?
- Klicken Sie auf Copy to clipboard (In die Zwischenablage kopieren)
Schritt 2 - Code zu Webflow hinzufügen
Wenn Sie den Code in den Site Settings (Website-Einstellungen) einfügen, wird der Chatbot auf jeder Seite Ihrer Webflow-Website platziert.
- Öffnen Sie Ihr Projekt im Webflow Dashboard
- Gehen Sie zu Site settings > Custom code (Website-Einstellungen > Benutzerdefinierter Code)
- Fügen Sie den kopierten Code in den Abschnitt Head Code ein
- Klicken Sie auf Save Changes (Änderungen speichern)
- Klicken Sie auf Publish (Veröffentlichen), damit die Änderungen wirksam werden
Nur zu einer einzelnen Seite hinzufügen
Wenn Sie den Chatbot auf einer bestimmten Seite statt auf der gesamten Website platzieren möchten:
- Öffnen Sie die Seite im Webflow Designer
- Klicken Sie auf das Zahnrad-Symbol, um die Page Settings (Seiteneinstellungen) zu öffnen
- Scrollen Sie nach unten zum Abschnitt Custom Code
- Fügen Sie den Code in das Feld Head Code ein
- Speichern und veröffentlichen Sie Ihre Website
Ein dauerhaft sichtbares iframe hinzufügen
Platzieren Sie im Webflow Designer ein Code Embed-Element an der Stelle, an der Sie den Chatbot haben möchten, fügen Sie das Iframe-Snippet aus ChatLab ein und passen Sie Breite sowie Höhe an Ihr Layout an. Speichern und veröffentlichen Sie die Website. Das iframe gehört in den Seiteninhalt, nicht in den Head Code.
Installation überprüfen
Öffnen Sie Ihre Webflow-Website nach dem Veröffentlichen in einem Browser. Sie sollten das Chat-Symbol in der Ecke der Seite sehen (im Widget-Modus) oder das auf der Seite eingebettete Chat-Fenster (im Iframe-Modus). Klicken Sie auf das Symbol, um den Chat zu öffnen, und senden Sie eine Testnachricht, um zu bestätigen, dass alles funktioniert.