Adding the Widget to Your Site

Copy the snippet from the widget card and paste it before the closing body tag on every page that should show the chat button.

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

That is the whole install. Nothing to download, no dependency to add, and the widget renders inside a shadow root so it cannot collide with your own styles. It works on plain HTML, WordPress, Shopify, Webflow and any JavaScript framework.

Optional attributes

Name	Type	Required	Description
data-key	string	required	The public key of the widget. Copy it from the dashboard.
data-position	left \| right	optional	Which corner the button sits in. Overrides the dashboard setting.
data-theme	auto \| light \| dark	optional	Light or dark panel. The default follows the visitor's system setting.
data-locale	string	optional	Force a language, such as de or pt-BR. The default follows the browser.
data-launcher	auto \| manual	optional	Set this to manual to hide the floating button and open the chat from your own element.

Opening the chat from your own button

With data-launcher set to manual the widget stays invisible until you ask for it.

<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() opens the panel.
TicketsXChat.close() and TicketsXChat.toggle() do what they say.
TicketsXChat.isOpen() reports whether the panel is showing.
TicketsXChat.on('message', handler) fires when a reply from your team arrives.