Das Widget auf deiner Seite einbauen

Kopier das Snippet aus der Widget-Karte und füg es vor dem schließenden Body-Tag auf jeder Seite ein, die den Chat-Button zeigen soll.

<script src="https://api.ticketsx.xyz/widget.js" data-key="wk_your_key_here" defer></script>

Das ist die ganze Installation. Nichts herunterzuladen, keine Abhängigkeit, und das Widget rendert in einem Shadow Root, kann also nicht mit deinen Styles kollidieren. Es läuft auf reinem HTML, WordPress, Shopify, Webflow und jedem JavaScript-Framework.

Optionale Attribute

Name	Typ	Pflichtfeld	Beschreibung
data-key	string	erforderlich	Der öffentliche Schlüssel des Widgets. Kopier ihn aus dem Dashboard.
data-position	left \| right	optional	In welcher Ecke der Button sitzt. Überschreibt die Einstellung im Dashboard.
data-theme	auto \| light \| dark	optional	Helles oder dunkles Fenster. Standard richtet sich nach der Systemeinstellung.
data-locale	string	optional	Erzwingt eine Sprache, etwa de oder pt-BR. Standard ist die Browsersprache.
data-launcher	auto \| manual	optional	Auf manual setzen, um den schwebenden Button auszublenden und den Chat über dein eigenes Element zu öffnen.

Den Chat über deinen eigenen Button öffnen

Mit data-launcher auf manual bleibt das Widget unsichtbar, bis du es aufrufst.

<script src="https://api.ticketsx.xyz/widget.js" data-key="wk_your_key_here" data-launcher="manual" defer></script>
<button onclick="TicketsXChat.open()">Contact support</button>

TicketsXChat.open() öffnet das Fenster.
TicketsXChat.close() und TicketsXChat.toggle() tun genau das, wonach sie klingen.
TicketsXChat.isOpen() sagt dir, ob das Fenster offen ist.
TicketsXChat.on('message', handler) feuert, wenn eine Antwort von deinem Team ankommt.