Aasktrix Help Center
Erste Schritte

Chat-Widget einbauen

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

Aktualisiert am 6. November 20262 Min. LesezeitAls Markdown

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:

<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.
War dieser Artikel hilfreich?

Ähnliche Artikel