# Chat-Widget einbauen

> Ein Script-Tag in deine Website einfügen. Funktioniert mit jedem CMS, Shopsystem und Framework.

Kopiere den Code unter **Einstellungen → Kanäle → Installation** und füge ihn auf jeder Seite deiner Website vor dem schließenden `</head>`\-Tag ein.

Der Code sieht so aus. Deine Workspace-ID ist schon eingetragen:

```html
<script async src="https://asktrix.org/widget.js" data-workspace="YOUR_WORKSPACE_ID"></script>
```

Lade deine Seite neu. Unten rechts erscheint der Chat-Button. Schick dir selbst eine Nachricht: Sie landet innerhalb einer Sekunde in deinem **Posteingang**.

## Erst ausprobieren, dann live gehen

Neben dem Code findest du **Demo-Seite öffnen**. Dort siehst du dein Widget auf einer Beispielseite und kannst Farben und Texte prüfen, ohne deine eigene Website anzufassen.

## WordPress, Shopify und andere Plattformen

Es gibt kein Plugin und keine App, die du installieren musst. Auf jeder Plattform fügst du dasselbe Script-Tag ein:

| Plattform | Wo der Code hinkommt |
| --- | --- |
| WordPress, WooCommerce | Design → Theme-Datei-Editor, header.php, vor </head>. Ein Code-Snippet-Plugin wie WPCode geht auch. |
| Shopify | Onlineshop → Themes → … → Code bearbeiten, layout/theme.liquid, vor </head> |
| Webflow | Site Settings → Custom Code → Head Code, danach neu veröffentlichen |
| Next.js | app/layout.tsx, geladen mit next/script und strategy="afterInteractive" |
| React | Eine kleine Komponente, die das Script einmal anhängt, in deiner Root-Komponente |
| Reines HTML | Das Template, das jede Seite nutzt, vor </head> |

Auf der Installationsseite findest du den genauen Code für jede dieser Plattformen, mit deiner Workspace-ID.

## Das Widget erscheint nicht

Prüf diese Punkte der Reihe nach:

1.  **Cache.** WordPress und Shopsysteme liefern oft zwischengespeicherte Seiten aus. Leere den Cache deiner Website und deines CDN und lade neu.
2.  **Der Code ist auf der Seite.** Öffne deine Website, sieh dir den Seitenquelltext an und such nach `widget.js`. Wenn er fehlt, ist das Theme oder Template, das du bearbeitet hast, nicht das aktive.
3.  **Erlaubte Domains.** Ist **Einstellungen → Kanäle → Identität & Schutz → Erlaubte Domains** an, lädt das Widget nur auf deiner Hauptdomain und den zusätzlichen Domains unter **Einstellungen → Workspace → Allgemein**. Trag Staging- oder Shop-Domains dort ein.
4.  **Sichtbarkeitsregeln.** **Wann & wo sichtbar** kann das Widget auf bestimmten Seiten, in Ländern oder Sprachen ausblenden. Auch **Verhalten → Ausblenden, wenn alle abwesend sind** und **Auf Mobilgeräten ausblenden** blenden es aus.
5.  **Content Security Policy.** Sendet deine Website einen CSP-Header, nennt die Browser-Konsole die blockierte Anfrage. Erlaube `https://asktrix.org` in `script-src` und `img-src`, `https://asktrix.org` und `wss://asktrix.org` in `connect-src` sowie `'unsafe-inline'` in `style-src` (das Widget bringt seine Styles im eigenen Shadow Root mit).

## Nächste Schritte

-   Übergib Name und E-Mail angemeldeter Nutzer mit der JavaScript-API, damit du weißt, mit wem du schreibst.
-   Farbe, Begrüßung und Button änderst du unter **Einstellungen → Kanäle → Farben & Look**.

---
Source: https://localhost:3100/help/de/install-the-chat-widget