Widget API
Для разработчиков или тех, кто хочет, чтобы чат открывался по их собственной кнопке.
Установка
<script src="https://keyda.in/business/widget.js"
data-key="kb_live_your_key_here" async></script>The script tag needs only src and data-key. Everything else — colours, position, greeting, language — comes from your dashboard so you never have to redeploy your site to change them.
The widget is drawn in the language set on Install → Language your bot speaks: its button, placeholders and notices, and the direction of the layout (Arabic and Urdu are right-to-left). The strings arrive with the widget's configuration, so there is no second request and nothing to translate on your side.
Режимы
Плавающая (по умолчанию). Кнопка запуска в углу, открывающая окно чата.
Встроенный режим. Поместите пустой контейнер на страницу, и чат заполнит его:
<div data-keyda-bot style="height:520px"></div>Контейнеру нужна высота. В режиме inline чат всегда виден, поэтому его не нужно открывать или закрывать.
JavaScript API
Доступно на window.KeydaBot после загрузки скрипта:
| Позвонить | Что он делает |
|---|---|
KeydaBot.open() | Открыть панель чата |
KeydaBot.close() | Закрывает его |
KeydaBot.toggle() | Открыть или закрыть |
KeydaBot.expand() | Делает панель во всю высоту окна и шириной до 760px |
KeydaBot.shrink() | Вернуться к стандартной карточке |
KeydaBot.isOpen | true когда чат виден |
KeydaBot.isExpanded | true пока панель развернута |
KeydaBot.clientId | Идентификатор клиента, который использует эта страница |
Пример — откройте чат с помощью вашей собственной кнопки «Напишите нам»:
<button onclick="KeydaBot.open()">Chat with us</button>window.KeydaBot может быть недоступен сразу после загрузки страницы. Привязывайте обработчики к клику, а не вызывайте их во время парсинга страницы.Как он ведет себя на вашей странице
- Панель открывается над кнопкой запуска, которая остается на месте и становится кнопкой закрытия. Повторное нажатие на нее, на ✕ в заголовке или клавишу Escape закрывает чат.
- Посетитель может развернуть панель из заголовка — она увеличивается до высоты окна и ширины до 760 пикселей — и этот выбор запоминается в браузере. На телефонах панель сразу занимает весь экран, поэтому элемент управления там не отображается.
- Your logo size setting changes the logo, not the button: the launcher keeps its size and the logo grows inside it. Button size (Install → Appearance) is what resizes the button itself — small, medium or large — whatever shape it is.
- Four button shapes: a pill with your label, a round bubble, a rounded square, and a chat bubble with a tail. The tail sits on the side facing your page.
- Все отображается внутри shadow root, поэтому ваш CSS не может повредить виджет, а CSS виджета не может повлиять на ваш сайт.
- Панель загружается только тогда, когда посетитель ее открывает, поэтому она не замедляет работу вашей страницы.
- Разговор посетителя продолжается в течение 24 часов, если он вернется, затем начинается заново.
- Если помощник недоступен, виджет показывает короткое сообщение и не вызывает ошибок на вашей странице.