Установка на сайт в 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: '&lt;account name&gt;',
domain: '&lt;account name&gt;.webim.ru',
location: &lt;название размещения&gt; // опционально
};

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

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

webimHandlers = {

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

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

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

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

5. необходимо, чтобы на странице была подключена библиотека jQuery

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

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

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