Widget API

Для разработчиков или тех, кто хочет, чтобы чат открывался по их собственной кнопке.

Установка

<script src="https://telybot.com/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 виджета не может повлиять на ваш сайт.
• Панель загружается только тогда, когда посетитель ее открывает, поэтому она не замедляет работу вашей страницы.
• Чат открывается вашим приветствием и до четырёх предлагаемых вопросов в виде кнопок — напишите свои в разделе Установить → Предлагаемые вопросы или оставьте стандартные. Больше ничего не говорится, пока посетитель не нажмёт кнопку или не напишет, а карточки вашего каталога появляются, когда он спрашивает о ценах или товарах, не раньше.
• Если включено Сообщать, что это ИИ-ассистент, в шапке под именем бота на каждом экране написано «ИИ-ассистент».
• Чат живёт, пока открыта вкладка браузера посетителя. Переходы между вашими страницами его сохраняют, а повторное открытие окна восстанавливает переписку — вместе с файлами и вопросом приветственного сценария, который ещё ждал ответа. Закрытие вкладки завершает чат, и следующий визит открывает новый. Ответ вашей команды всё равно дойдёт до посетителя, который просил позвать человека, — в его следующем чате, в течение двух недель.
• Чаты из одного браузера связаны в разделе Чаты («Посетитель · чатов: 3»), чтобы вы могли читать разговоры одного посетителя рядом. Связь — это случайный идентификатор в браузере посетителя; он не создаётся, если браузер просит не отслеживать его.
• Скрепка в окне ввода позволяет посетителю прикрепить к сообщению до трех фото или документов (размеры и типы — в разделе Лимиты и безопасность). Фото уменьшаются в браузере перед загрузкой, поэтому 12-мегапиксельный снимок покидает страницу весом в несколько сотен килобайт. Отключите файлы в разделе Установка — и кнопка исчезнет.
• Приветственный сценарий отображается как обычные пузыри: варианты становятся кнопками под пузырем, кнопка «Пропустить» появляется, если шаг необязательный, а подсказка в окне ввода становится самим вопросом. Пройденный сценарий запоминается в браузере посетителя на 30 дней.
• Если помощник недоступен, виджет показывает короткое сообщение и не вызывает ошибок на вашей странице.

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

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