De widget op je site zetten

Kopieer de snippet van de widgetkaart en plak hem vóór de afsluitende body-tag op elke pagina waar de chatknop moet staan.

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

Dat is de hele installatie. Niets te downloaden, geen dependency, en de widget rendert in een shadow root, dus hij botst niet met je eigen styling. Hij werkt in kale HTML, WordPress, Shopify, Webflow en elk JavaScript-framework.

Optionele attributen

Naam	Type	Verplicht	Beschrijving
data-key	string	vereist	De publieke sleutel van de widget. Kopieer hem uit het dashboard.
data-position	left \| right	optioneel	In welke hoek de knop staat. Overschrijft de instelling in het dashboard.
data-theme	auto \| light \| dark	optioneel	Licht of donker venster. Standaard volgt het de systeeminstelling van de bezoeker.
data-locale	string	optioneel	Forceert een taal, bijvoorbeeld de of pt-BR. Standaard volgt het de browser.
data-launcher	auto \| manual	optioneel	Zet dit op manual om de zwevende knop te verbergen en de chat vanuit je eigen element te openen.

De chat openen met je eigen knop

Met data-launcher op manual blijft de widget onzichtbaar tot je erom vraagt.

<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() opent het venster.
TicketsXChat.close() en TicketsXChat.toggle() doen precies wat ze zeggen.
TicketsXChat.isOpen() vertelt of het venster openstaat.
TicketsXChat.on('message', handler) gaat af zodra een antwoord van je team binnenkomt.