База знаний → Использование API

Использование API виджета

JavaScript-функции, которые доступны на вашей странице после установки виджета Smartbtn. С их помощью ваш сайт может открывать и закрывать чат, отправлять сообщение от имени посетителя и передавать оператору контактные данные посетителя.

Это не то, что вы искали? Если нужен серверный REST API с токенами доступа для интеграции вашего бэкенда со Smartbtn (управление диалогами, вебхуки и т. д.) — у него отдельный контракт, но тот же переключатель доступа «Разрешить API виджета (JS и REST)». Документация здесь: API / Разработчикам. Ниже описан только клиентский JavaScript, который выполняется в браузере посетителя.

Что нужно для начала работы

  1. Код виджета должен быть установлен на странице — код для копирования находится в настройках кнопки, раздел «Установите чат на сайт» (перейти к вашим кнопкам).
  2. Скрипт виджета подключается асинхронно (атрибут async), поэтому window.smartbtn_widget_api может ещё не существовать в момент, когда выполняется ваш собственный код. Дождитесь его появления, прежде чем обращаться к нему:
function whenSmartbtnReady(callback) {
    if (window.smartbtn_widget_api) {
        callback(window.smartbtn_widget_api);
        return;
    }
    var attempts = 0;
    var timer = setInterval(function () {
        attempts++;
        if (window.smartbtn_widget_api) {
            clearInterval(timer);
            callback(window.smartbtn_widget_api);
        } else if (attempts > 100) { // ~10 seconds
            clearInterval(timer);
        }
    }, 100);
}

whenSmartbtnReady(function (api) {
    api.open();
});

Для двух методов, которые передают данные оператору — setContactInfo и setCustomData — есть ещё два требования (остальные методы ниже, включая open/close/ sendMessage, их не касаются):

  1. В настройках кнопки должен быть включён тумблер «Разрешить API виджета (JS и REST)» (по умолчанию включён для новых кнопок).
  2. Запрос должен приходить с того же домена, что указан в настройках кнопки в поле «Адрес сайта» — запросы с других доменов молча отклоняются.

Рекомендуемый API — window.smartbtn_widget_api

Основной публичный интерфейс для управления виджетом со стороны вашего сайта. Покрывает открытие/закрытие чата, отправку сообщения, передачу данных о клиенте и подписку на события. Это не полный аналог интерфейсов сторонних чат-виджетов (там их обычно десятки) — набор методов будет расширяться.

open()

без ограничений

Открывает окно чата (эквивалент клика по кнопке виджета). Если чат уже открыт — ничего не делает.

Возвращает: boolean — true, если чат открыт (или уже был открыт); false, если виджет ещё не загрузился.

window.smartbtn_widget_api.open();

close()

без ограничений

Закрывает окно чата. Если чат уже закрыт — ничего не делает.

Возвращает: boolean

window.smartbtn_widget_api.close();

sendMessage(text)

без ограничений

Отправляет сообщение text в чат от имени посетителя — так же, как если бы он сам напечатал и отправил его. Проходит все обычные проверки виджета (пустой текст, нет операторов онлайн — сообщение уйдёт в очередь и т.д.).

ПараметрТипОписание
textstringТекст сообщения. Пустая строка отклоняется.

Возвращает: boolean

window.smartbtn_widget_api.sendMessage('Здравствуйте, у меня вопрос по заказу');

setContactInfo(data)

требует включённый API + совпадение домена

Передаёт оператору контактные данные посетителя — отображаются так, будто посетитель сам ввёл их в форме представления. Вызывает отправку немедленно (внутри уже вызывает makeRequest() — отдельно вызывать не нужно, в отличие от старого API ниже).

ПолеТипОписание
namestringИмя посетителя
emailstringEmail посетителя
phonestringТелефон посетителя
descriptionstringПроизвольная дополнительная информация

Возвращает: boolean — только подтверждает, что вызов принят (data — объект); не гарантирует, что запрос дошёл до сервера, см. «Ограничения» ниже.

window.smartbtn_widget_api.setContactInfo({
    name: 'Василий Васильев',
    email: 'client@example.com',
    phone: '+79991234567',
    description: 'Пришёл со страницы тарифов'
});

setCustomData(data)

требует включённый API + совпадение домена

Передаёт произвольную дополнительную информацию о клиенте — отображается в информационной панели справа в приложении оператора, в том порядке, в котором перечислена в массиве. Можно вызывать любое число раз — если диалог уже открыт, данные у оператора обновятся в реальном времени. Как и setContactInfo, отправляет немедленно.

Поле элемента массиваТипОписание
titlestringЗаголовок над полем (необязателен)
contentstringСодержимое поля. HTML-теги экранируются
linkstringURL, открываемый по клику на поле (необязателен)

Возвращает: boolean

window.smartbtn_widget_api.setCustomData([
    { title: 'Actions', content: 'Add contact', link: 'https://crm.example.com/add' },
    { content: 'Open customer profile', link: 'https://crm.example.com/client/42' }
]);

onOpen(callback)

без ограничений

Регистрирует callback, который вызывается каждый раз, когда чат открывается (в том числе если посетитель открыл его сам). Можно подписать сколько угодно обработчиков.

window.smartbtn_widget_api.onOpen(function () {
    console.log('чат открыт');
});

onClose(callback)

без ограничений

То же самое для закрытия чата.

window.smartbtn_widget_api.onClose(function () {
    console.log('чат закрыт');
});

onMessageSent(callback)

без ограничений

Вызывается при отправке сообщения посетителем — как через обычную форму чата, так и через sendMessage(). Аналога для входящих сообщений оператора сейчас нет, см. «Ограничения».

Поле callback(payload)ТипОписание
textstringТекст отправленного сообщения
window.smartbtn_widget_api.onMessageSent(function (payload) {
    console.log('отправлено:', payload.text);
});

Старый API — Smartbtn_api

Более ранний, низкоуровневый интерфейс. Продолжает работать (используется внутри методов setContactInfo/setCustomData выше) — оставлен здесь ради уже существующих интеграций. Для новых интеграций используйте window.smartbtn_widget_api выше — он проще: не нужно отдельно вызывать makeRequest().

Smartbtn_api.setClientInfo(data)

legacy

Записывает контактные данные посетителя в память — сами по себе ничего не отправляют. Поля те же, что у setContactInfo выше (name, email, phone, description).

Smartbtn_api.setClientCustomData(data)

legacy

То же для произвольных полей — массив объектов {title, content, link}, как у setCustomData выше. Тоже только записывает данные в память.

Smartbtn_api.makeRequest()

legacy — обязателен

Единственный вызов, который реально отправляет данные на сервер. Ни setClientInfo, ни setClientCustomData ничего не отправляют без него — только запоминают значения. Асинхронный, ничего не возвращает через промис; результат доступен через Smartbtn_api.status сразу после вызова (с учётом сетевой задержки — см. «Ограничения»).

Smartbtn_api.setClientInfo({
    name: 'Василий Васильев',
    email: 'client@example.com',
    phone: '+79991234567',
    description: 'Текст описания'
});
Smartbtn_api.makeRequest(); // без этого вызова ничего не будет отправлено

setTimeout(function () {
    console.log(Smartbtn_api.status); // { result: 'ok' } или { result: 'fail', reason: '...' }
}, 500);

Известные ограничения

  • Нет промиса/callback завершения отправки. setContactInfo, setCustomData и makeRequest() не возвращают ничего, на чём можно было бы дождаться результата — они возвращают управление сразу, а сам запрос уходит в фоне. Проверяйте Smartbtn_api.status через небольшую задержку, если вам важен результат отправки.
  • setContactInfo/setCustomData молча ничего не сделают, если тумблер «Разрешить API виджета (JS и REST)» выключен для этой кнопки, либо если домен страницы не совпадает с адресом сайта в её настройках — исключения не выбрасываются, запрос просто не уходит.
  • Нет callback на входящее сообщение оператора. onMessageSent сообщает только об отправленных посетителем сообщениях, не о полученных от оператора.
  • Это не полный аналог API сторонних чат-виджетов — набор методов ограничен перечисленным выше и будет расширяться по мере необходимости.
RU
EN
Умная кнопка