> ## Documentation Index
> Fetch the complete documentation index at: https://docs.chatnox.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Webflow

### Schritt 1: Melde Dich bei Deinem Chatnox-Konto an und richte Dein KI-Assistenen ein.

1. Erstelle ein kostenloses Chatnox-Konto, falls Du noch keines hast.

2. Melde Dich bei Deinem Chatbase-Konto an und navigiere zur Wissensdatenbank und Widet-Anpassung Seite

3. Fülle die Wissensbasis für Deinen neuen Bot, indem Du Quellen wie Textausschnitte, Dokumenteoder Frage-Antwort-Paare hochlädst.

4. Pase das Aussehen und die Einstellungen des Chatbots an.

## Schritt 2: Kopiere Deinen Einbettungscode

Sobald Du Deinen Bot eingerichtet hast, benötigst Du den Einbettungscode, um das Bot-Widget auf Deiner Website anzuzeigen. Gehe dazu wie folgt vor:

1\. Gehe zum [Dashboard](https://www.chatnox.de/dashboard/) Deines Chatnox-Kontos.

2\. Navigiere zur Integrations Seite

3\. Wähle Webflow und klicke auf **Setup**

<Frame>
  <img src="https://chatnox.b-cdn.net/webflow-1.png" alt="Deploy" />
</Frame>

4\. Es sollte eine neue Dialog erscheinen. Klicke auf **Kopieren** für den Code.

<Frame>
  <img src="https://chatnox.b-cdn.net/webflow-2.png" alt="Chat Widget [Manage]" />
</Frame>

### Schritt 3: Code-Snippet in Webflow einfügen

1\. In Deinem Webflow-Dashboard findest Du eine Liste aller Deiner Website-Projekte. Bewege den Mauszeiger über die Website, zu der Du den Chatbot hinzufügen möchtest, und klicke auf **Open Designer**.

2\. Klicke auf der Designer-Seite auf das Datei-Symbol (**Pages**) in der oberen linken Ecke des Webflow-Site-Designers.

<Frame>
  <img src="https://chatnox.b-cdn.net/webflow-pages.png" alt="image" width="1920" height="995" />
</Frame>

4\. Klicke auf das Zahnrad Symbol neben der Seite

5\. Im Custom Code Bereich, füge den Code-Snippet ein

<Frame>
  <img src="https://chatnox.b-cdn.net/webflow-4.png" alt="image" width="1920" height="995" />
</Frame>

8\. Drücke auf **Speichern** oben rechts in den Seiten Einstellungen.

<Frame>
  <img src="https://chatnox.b-cdn.net/webflow-5.png" alt="image" width="1920" height="995" />
</Frame>

9\. Veröffentliche die neusten Änderungen der Seite.

<Frame>
  <img src="https://chatnox.b-cdn.net/webflow-6.png" alt="image" width="1920" height="995" />
</Frame>

Wenn alles gut läuft, solltest Du den Chatbot auf der Live-Seite sehen.

Nach Abschluss dieser Schritte sollte Dein Chatbot bereit sein, Deine Website-Besucher zu bedienen!

<Note>
  Du kannst das Erscheinungsbild und die Farben Deines Chatbots in Deinem
  Chatnox-Dashboard anpassen.
</Note>