# Web-Widget

Betten Sie ein KI-Chat-Widget auf der Website eines Kunden ein — verbunden über den Katalog Integrationen

> Full REST + WebSocket API reference: https://api.happ.tools/reference

Das Web-Widget platziert eine KI-Chat-Blase auf der Website Ihres Kunden, sodass Besucher mit dem Agenten chatten können, ohne die Seite zu verlassen. Wie jeder andere Kanal wird es im Katalog **Integrationen** über einen Dialog erstellt und verwaltet.

<WidgetPageDemo />

## Verbinden [#connect]

1. Klicken Sie unter **Integrationen** im Abschnitt **Messenger** auf die Kachel **Widget**.
2. Füllen Sie im Verbindungsdialog des Widgets aus:
   * **Widget-Name** — eine Bezeichnung, an der Sie dieses Widget erkennen.
   * **Beschreibung** (optional) — wo es eingesetzt wird.
   * **Erlaubte Origins** — Websites, die das Widget laden dürfen, jeweils als vollständige Adresse (`https://example.com`), hinzugefügt mit der Schaltfläche zum Hinzufügen oder Enter. Lassen Sie die Liste leer, um jede Website zu erlauben.
3. Klicken Sie auf **Verbinden**, um das Widget anzulegen.
4. Holen Sie den Einbettungscode von der Karte des Widgets unter **Meine Integrationen**: **Code kopieren** im Menü kopiert ihn sofort, **Bearbeiten** zeigt ihn im Block **Einbettungscode**. Fügen Sie ihn vor `</body>` auf jeder Seite ein, auf der das Widget erscheinen soll.
5. Weisen Sie dem Widget einen KI-Agenten zu.

## Anpassen [#customize]

Aussehen und Installation stellen Sie beim Agenten ein, dem das Widget zugewiesen ist: Agent öffnen → **Widget**. Die Seite **Web widget** hat vier Tabs — **Appearance**, **Voice & content**, **Behaviour** und **Install** (die Seite ist derzeit nur auf Englisch). **Install** liefert das Snippet für HTML, Google Tag Manager, WordPress oder Shopify und verwaltet die Liste **Allowed domains** (reine Domains wie `example.com` über **Add domain**); bei jeder Domain sehen Sie, ob das Widget dort bereits live gesehen wurde.

## Felder [#fields]

| Feld             | Wert                                                                                                                                                                           |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Widget-Name      | Bezeichnung für das Widget                                                                                                                                                     |
| Beschreibung     | Optionale Notiz, wo es eingesetzt wird                                                                                                                                         |
| Erlaubte Origins | Websites, die es laden dürfen. Leere Liste oder `*` — jede Website. Eine Domain umfasst auch ihre Subdomains; `localhost` funktioniert immer. Andere Websites werden abgelehnt |

**API:** [api.happ.tools/reference](https://api.happ.tools/reference)

## Weiter [#next]

* [Kanäle](/docs/integrations/messengers) — alle Messenger
* [Agenten](/docs/agents) — festlegen, wer antwortet