사이트에 위젯 넣기

위젯 카드에서 스니펫을 복사해, 채팅 버튼을 보여줄 모든 페이지의 닫는 body 태그 바로 앞에 붙여 넣습니다.

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

설치는 이게 전부입니다. 내려받을 것도 없고 의존성도 없으며, 위젯은 shadow root 안에 그려지므로 사이트 스타일과 충돌하지 않습니다. 순수 HTML, WordPress, Shopify, Webflow, 어떤 자바스크립트 프레임워크에서도 동작합니다.

선택 속성

이름	형식	필수	설명
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)는 팀의 답변이 도착하면 실행됩니다.