So fügen Sie den Asyntai-KI-Chatbot zu Webflow hinzu

Schritt-für-Schritt-Anleitung für Webflow-Websites

Plattform:

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: Code über Site-Einstellungen hinzufügen (alle Seiten)

Um den Chatbot auf allen Seiten Ihrer Webflow-Website gleichzeitig hinzuzufügen:

Melden Sie sich bei Ihrem Webflow-Konto an und wählen Sie Ihr Projekt
Klicken Sie auf das Zahnrad-Symbol (Site Settings) in der linken Seitenleiste
Klicken Sie im Einstellungsmenü auf "Custom Code"
Scrollen Sie nach unten zum Abschnitt "Footer Code" (vor dem </body>-Tag)
Fügen Sie Ihren Asyntai-Einbettungscode ein
Klicken Sie auf "Save Changes"
Veröffentlichen Sie Ihre Website, damit die Änderungen wirksam werden

Tipp: Das Hinzufügen des Codes im Footer-Bereich platziert ihn direkt vor dem schließenden </body>-Tag, was für Chat-Widgets empfohlen wird, da es das Laden Ihrer Seite nicht verlangsamt.

Alternative: Seitenspezifischer benutzerdefinierter Code

Wenn Sie den Chatbot nur auf bestimmten Seiten haben möchten:

Öffnen Sie Ihr Projekt im Webflow Designer
Klicken Sie auf das Seiten-Panel (Ordner-Symbol) in der linken Seitenleiste
Fahren Sie mit der Maus über die Seite, die Sie bearbeiten möchten, und klicken Sie auf das Zahnrad-Symbol
Scrollen Sie nach unten zu "Custom Code"
Fügen Sie Ihren Asyntai-Einbettungscode im Abschnitt "Before </body> tag" ein
Klicken Sie auf "Save"
Veröffentlichen Sie Ihre Website

Alternative: Embed-Element verwenden

Sie können den Chatbot auch mit dem Embed-Element an beliebiger Stelle auf Ihrer Seite hinzufügen:

Öffnen Sie Ihr Projekt im Webflow Designer
Klicken Sie auf die Schaltfläche "+", um das Hinzufügen-Panel zu öffnen
Suchen Sie nach "Einbetten" oder finden Sie es unter Komponenten
Ziehen Sie das Embed-Element auf Ihre Seite
Fügen Sie Ihren Asyntai-Einbettungscode in den Code-Editor ein
Klicken Sie auf "Save & Close"
Veröffentlichen Sie Ihre Website

Wichtig: Bei Verwendung des Embed-Elements müssen Sie es auf jeder Seite hinzufügen, auf der Sie den Chatbot möchten. Für eine websiteweite Installation verwenden Sie die oben beschriebene Site-Settings-Methode.

Schritt 3: Installation überprüfen

Öffnen Sie nach dem Veröffentlichen Ihrer Website diese 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.