Keyda 위젯 API
개발자나 자체 버튼으로 채팅을 열고 싶은 분들을 위한 기능입니다.
설치하기
<script src="https://keyda.in/business/widget.js"
data-key="kb_live_your_key_here" async></script>스크립트 태그에는 src와 data-key만 있으면 됩니다. 색상, 위치, 인사말, 언어 등 그 외 모든 설정은 대시보드에서 관리하므로, 변경 사항을 적용하기 위해 사이트를 다시 배포할 필요가 없습니다.
모드
플로팅(기본값). 모서리에 있는 런처 버튼을 누르면 채팅창이 열립니다.
인라인. 페이지에 빈 컨테이너를 배치하면 채팅창이 그 안을 채웁니다:
<div data-keyda-bot style="height:520px"></div>컨테이너에는 높이 값이 필요합니다. 인라인 모드에서는 채팅창이 항상 표시되므로 열거나 닫을 요소가 없습니다.
JavaScript API
스크립트가 로드되면 window.KeydaBot에서 사용 가능:
| 전화 | 주요 기능 |
|---|---|
KeydaBot.open() | 채팅창 열기 |
KeydaBot.close() | 닫기 |
KeydaBot.toggle() | 열기 또는 닫기 |
KeydaBot.expand() | 패널을 창 높이에 맞추고 최대 760px 너비까지 확장합니다. |
KeydaBot.shrink() | 표준 카드로 돌아가기 |
KeydaBot.isOpen | true 채팅창이 표시될 때 |
KeydaBot.isExpanded | 패널이 확장된 동안 true |
KeydaBot.clientId | 이 페이지에서 사용 중인 Client ID |
예시 — 직접 만든 "문의하기" 버튼으로 채팅창 열기:
<button onclick="KeydaBot.open()">Chat with us</button>스크립트는 비동기식으로 로드되므로 페이지 로드 직후에는
window.KeydaBot가 존재하지 않을 수 있습니다. 페이지가 구문 분석될 때 호출하기보다는 클릭 이벤트에 핸들러를 연결하세요.페이지에서의 동작 방식
- 패널은 런처 버튼 위쪽으로 열리며, 런처 버튼은 제자리에 유지되어 닫기 컨트롤 역할을 합니다. 버튼을 다시 누르거나, 헤더의 ✕를 누르거나, Escape 키를 누르면 채팅이 닫힙니다.
- 방문자는 헤더에서 패널을 확장할 수 있습니다. 창 높이에 맞춰 최대 760px 너비까지 커지며, 브라우저가 이 설정을 기억합니다. 모바일에서는 패널이 전체 화면으로 표시되므로 해당 제어 버튼은 나타나지 않습니다.
- 로고 크기 설정은 버튼이 아닌 로고를 변경합니다. 런처는 고정된 52px 알약 모양(원형 및 사각형은 58px)이며 로고는 그 안에서 커집니다.
- 모든 요소가 shadow root 내에서 렌더링되므로 귀하의 CSS가 위젯을 손상시키거나 위젯의 CSS가 귀하의 사이트에 영향을 줄 수 없습니다.
- 패널은 방문자가 열 때만 로드되므로 페이지 속도가 느려지지 않습니다.
- 방문자의 대화는 다시 방문할 경우 24시간 동안 유지되며, 이후에는 새로 시작됩니다.
- 어시스턴트에 연결할 수 없는 경우, 위젯은 짧은 메시지를 표시하며 페이지에 오류를 발생시키지 않습니다.