Публичный JS API

Вы здесь
← Все статьи

В этом документе описывается общедоступный API-интерфейс JavaScript, который доступен клиентам для управления поведением виджета Teletype.

Пользовательские JavaScript события teletype.*

Для отслеживания информации, клиентам доступен ряд JavaScript событий, на которые они могут подписаться:

Виджет загружен, и готов к работе

window.addEventListener('teletype.ready', function() {
    // Виджет готов к работе, и глобальный обьект window._teletypeWidget доступен для взаимодействия 
});

Открытие и закрытие виджета

Пример:

window.addEventListener('teletype.opened', function() {
    // Обработчик события открытия виджета
});

window.addEventListener('teletype.closed', function() {
    // Обработчик события закрытия виджета
});

Персона начала новый диалог

window.addEventListener('teletype.dialogStarted', function(e) {
    // Начало нового диалога. Событие содержит в себе информацию о сообщении
});

Персона отправила новое сообщение

window.addEventListener('teletype.messageSent', function(e) {
    // Отправка нового сообщения. Событие содержит в себе информацию о сообщении
});

Получено сообщение от оператора в виджет

window.addEventListener('teletype.messageReceived', function(e) {
    // Получено сообщение от оператора. Событие содержит в себе информацию о сообщении
});

Оператор завершил диалог

window.addEventListener('teletype.dialogClosed', function() {
    // Обработчик завершения диалога
});

Персона поставила рейтинг диалогу

window.addEventListener('teletype.dialogRated', function(e) {
    // Обработчик рейтинга диалога. Событие содержит в себе информацию о рейтинге
});

Глобальный обьект Виджета Teletype

Все взаимодействие с виджетом Teletype осуществляется с помощью глобального объекта _teletypeWidget. Он создается при загрузке виджета.
После загрузки виджета на веб-страницу клиента он отправляет пользовательское событие с именем teletype.ready, которое уведомит все обратные вызовы о том, что пришло время взаимодействовать с виджетом Teletype, чтобы передать ему данные.

Отправка данных персоны

Чтобы отправить персональные данные пользователя, клиенту необходимо использовать метод setPersonData глобального объекта_teletypeWidget.
Вот интерфейс объекта, который должен быть передан в этот метод:

interface AdditionalPersonInfo {
    name?: string;
    email?: string;
    avatar?: string;
    phone?: string;
    additional_payload?: { [key: string]: string; };
}

Пример:

window.addEventListener('teletype.ready', function() {
    _teletypeWidget.setPersonData({
        email: 'email@address',
        name: 'John Doe',
        phone: '+7111111111'
        avatar: 'https://www.gravatar.com/avatar/123',
        additional_payload: {
            foo:  'bar'
        }
    });
});

Установка приветственных сообщений

Иногда требуется установить приветственные сообщения в дополнение к приглашениям. Для этого клиент может использовать метод greetingMessages глобального объекта _teletypeWidget, который принимает массив строк:

_teletypeWidget.greetingMessages(['Здравствуйте', 'Меня зовут Иван', 'Я помогу Вам с Вашим вопросом']);

Пример кода сгенерирует три отдельных сообщения от бот-оператора.

Программное открытие и закрытие виджета

Чтобы манипулировать состоянием виджета, клиент может использовать методы show иhide глобального объекта _teletypeWidget.

Пример:

$(document).on("click", "#custom_widget_opener_button", function() {
    window._teletypeWidget.show();
});

Кроме того, Teletype Widget генерирует пользовательские события для открытия или закрытия виджета.

Пример:

window.addEventListener('teletype.opened', function() {
    // Обработчик события открытия виджета
});

window.addEventListener('teletype.closed', function() {
    // Обработчик события закрытия виджета
});

Установка предопределенного сообщения в область ввода сообщения

Если клиенты хотят предварительно заполнить окно сообщения виджета, они могут использовать метод setMessage глобального объекта_teletypeWidget, который принимает строку как сообщение:

Пример:

$(document).on("click", "#need_help", function() {
    window._teletypeWidget.setMessage('Нужна помощь!');
    window._teletypeWidget.show();
});

Спрятать кнопку вызова виджета Teletype

Если клиенты не хотят показывать кнопку виджета Teletype по умолчанию, они могут скрыть ее, определив глобальную переменную в свойстве window с именем teletypeButton, которое должно быть равно ‘invisible’, чтобы скрыть кнопку виджета Teletype.

Example:

    window.teletypeButton = 'invisible';