Widget 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>

Контейнеру нужна высота. В режиме inline чат всегда виден, поэтому его не нужно открывать или закрывать.

JavaScript API

Доступно на window.KeydaBot после загрузки скрипта:

Пример — откройте чат с помощью вашей собственной кнопки «Напишите нам»:

<button onclick="KeydaBot.open()">Chat with us</button>

Как он ведет себя на вашей странице

• Панель открывается над кнопкой запуска, которая остается на месте и становится кнопкой закрытия. Повторное нажатие на нее, на ✕ в заголовке или клавишу Escape закрывает чат.
• Посетитель может развернуть панель из заголовка — она увеличивается до высоты окна и ширины до 760 пикселей — и этот выбор запоминается в браузере. На телефонах панель сразу занимает весь экран, поэтому элемент управления там не отображается.
• Настройка размер логотипа меняет логотип, а не кнопку: кнопка запуска сохраняет свой размер, а логотип растет внутри нее. Именно Размер кнопки (Установка → Внешний вид) изменяет размер самой кнопки — маленький, средний или большой — независимо от ее формы.
• Четыре формы кнопки: капсула с вашей подписью, круглый пузырь, скругленный квадрат и облачко чата с хвостиком. Хвостик расположен на стороне, обращенной к странице.
• Все отображается внутри shadow root, поэтому ваш CSS не может повредить виджет, а CSS виджета не может повлиять на ваш сайт.
• Панель загружается только тогда, когда посетитель ее открывает, поэтому она не замедляет работу вашей страницы.
• Диалог посетителя продолжается 24 часа, если он возвращается, а затем начинается заново. Повторное открытие панели восстанавливает переписку — включая файлы и вопрос приветственного сценария, который еще ждал ответа.
• Скрепка в окне ввода позволяет посетителю прикрепить к сообщению до трех фото или документов (размеры и типы — в разделе Лимиты и безопасность). Фото уменьшаются в браузере перед загрузкой, поэтому 12-мегапиксельный снимок покидает страницу весом в несколько сотен килобайт. Отключите файлы в разделе Установка — и кнопка исчезнет.
• Приветственный сценарий отображается как обычные пузыри: варианты становятся кнопками под пузырем, кнопка «Пропустить» появляется, если шаг необязательный, а подсказка в окне ввода становится самим вопросом. Пройденный сценарий запоминается в браузере посетителя на 30 дней.
• Если помощник недоступен, виджет показывает короткое сообщение и не вызывает ошибок на вашей странице.

Внутри SDK для приложений

Один и тот же чат работает во всех SDK, поэтому вложения и приветственные сценарии попадают в ваше приложение без релиза — с одним исключением. Открытие выбора файлов из веб-вью — задача принимающего приложения. Пакеты для iOS, React Native и Ionic уже это делают; для Android и Flutter нужен SDK версии 0.1.4 или новее. В более старых версиях виджет распознает оболочку и скрывает скрепку, вместо того чтобы показывать кнопку, которая ничего не делает.