サイトにウィジェットを追加する

ウィジェットのカードからスニペットをコピーし、チャットボタンを出したいページの閉じる body タグの直前に貼り付けます。

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

導入はこれだけです。ダウンロードも依存関係もなく、ウィジェットは shadow root の中に描画されるのでサイトのスタイルと衝突しません。素の HTML、WordPress、Shopify、Webflow、どの JavaScript フレームワークでも動きます。

任意の属性

名前	型	必須	説明
data-key	string	必須	ウィジェットの公開キーです。ダッシュボードからコピーします。
data-position	left \| right	任意	ボタンを置く角です。ダッシュボードの設定より優先されます。
data-theme	auto \| light \| dark	任意	明るいパネルか暗いパネルか。既定では訪問者のシステム設定に従います。
data-locale	string	任意	言語を固定します。たとえば de や pt-BR です。既定ではブラウザーに従います。
data-launcher	auto \| manual	任意	manual にすると、浮かぶボタンを隠して自分の要素からチャットを開けます。

自分のボタンからチャットを開く

data-launcher を manual にすると、呼び出すまでウィジェットは表示されません。

<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() でパネルを開きます。
TicketsXChat.close() と TicketsXChat.toggle() は名前のとおりに動きます。
TicketsXChat.isOpen() はパネルが開いているかを返します。
TicketsXChat.on('message', handler) はチームからの返信が届いたときに実行されます。