> ## 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.

# Next.js

### 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 Next.js und klicke auf **Setup**

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

### Schritt 3: Code-Snippet in Next.js einfügen

1\. Füge im return Statement Deines Next.js-Codes den kopierten Code ein.

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

2\. Speichere die Änderungen, um die Änderung wirksam zu machen.

3\. Teste den Code auf localhost, um Dich zu vergewissern das es funktioniert hat.

4\. Deploy Dein Code falls nötig.

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>