Installation & Setup

Integrieren Sie das Chat Widget in wenigen Minuten

Script einbinden

Kopieren Sie diesen Code vor das schließende </body> Tag

<script src="https://your-domain.com/embed.js"></script>
<script>
  ChatWidget.init({
    position: 'bottom-right',
    theme: 'light',
    greeting: 'Hallo! Wie kann ich helfen?',
    title: 'Swiss-IT Support'
  });
</script>

Konfiguration anpassen

Passen Sie das Widget an Ihre Bedürfnisse an

positionstring

Position des Chat-Widgets auf der Seite

Default: bottom-right

Options: top-left | top-right | bottom-left | bottom-right

themestring

Farbschema des Widgets

Default: light

Options: light | dark

greetingstring

Begrüßungsnachricht beim Öffnen

Default: Hallo! Wie kann ich helfen?

Options: Beliebiger Text

titlestring

Titel im Chat-Header

Default: Swiss-IT Support

Options: Beliebiger Text

n8n Workflow verbinden

Konfigurieren Sie Ihren n8n Webhook

Environment Variable

Setzen Sie die n8n Webhook URL in Ihrer .env.local Datei:

N8N_WEBHOOK_URL=https://your-n8n-instance.com/webhook/chat

API Route

Das Widget sendet Nachrichten an /api/chat und erwartet eine JSON-Antwort mit einem output Feld.

Bereit zum Testen?

Sehen Sie das Widget in Aktion auf unserer Demo-Seite

Live Demo ansehen →