Установка на сайт в iframe

Для встраивания на сайт чат-окна онлайн консультанта Вебим в iframe необходимо:

1. Добавить на сайт элементы интерфейса:

  • контейнер, содержащий iframe, в котором будет размещено чат-окно <iframe id="webim-chat-iframe" style="border: none">, элемент должен иметь id "webim-chat-iframe" и не заданный атрибут src (заполняется скриптом), на момент загрузки страницы контейнер должен быть скрыт,
  • кнопку старта чата, на момент загрузки страницы она также должна быть скрыта, по клику на кнопку должен происходить вызов webim.api.chat.start()
  • кнопку закрытия чата, предполагается, что она скрывается и показывается вместе с чат окном, по клику на кнопку должен происходить вызов webim.api.chat.close()

2. добавить на страницу конфигурационный js-объект


webim = {
    accountName: '<account name>',
    domain: <account name>.webim.ru',
    location: <название размещения> // опционально
};

3. при необходимости добавить объект webim_visitor в соответствии с документацией https://webim.ru/help/identification/

4. имплементировать обработчики событий:

webimHandlers = {

onInit: function (event) {
// получает на входе объект {online: <true /false>}
// здесь следует инициализировть внешний вид кнопки старта чата в зависимости от статуса и сделать ее видимой
},

onChatShownStateChanged: function (event) {
// получает на входе объект {shown: </true><true /false>}
// вызывается, когда необходимо скрыть/показть чат-окно, это может происходить как в ответ на действия пользователя,
// так и на поступающую информацию от сервера (например, когда оператор переоткрыл закрытй посетителем чат)
// здесь следует показать/скрыть контейнер с iframe
},

onChatReadChanged: function (event) {
// получает на входе объект {read: </true><true /false>}
// вызывается, когда меняется статус прочитанности чата посетителем
// здесь следует включать/выключать визуальную сигнализацию о непрочитанности, например "мигание" заголовком страницы
},

onTeleport: function (event) {
// получает на входе объект {url: 'https://...'}
// вызывается, когда оператор воcпользовался функцией "Телепорт" - перенаправление посетителя на заданную страницу
// стандартное решение здесь - выполнить:
// window.location.href = event.url;
}
};

5. необходимо добавить вызов webim.api.init() после полной загрузки страницы

6. подключить копию скрипта https://<account name>.webim.ru/webim/js/v/iframe-helper.js

Для поддержки авторизации и выхода пользователя из системы без перезагрузки страницы сайта необходимо обновлять объект webim_visitor (присваивать null при выходе) и делать вызов webim.api.onProvidedVisitorChanged()

Работающий прототип можно посмотреть по ссылке https://<account name>.webim.ru/webim/iframe-sample.php