Москва +7 499 322 3754 Серебряническая набережная, 29
Санкт-Петербург +7 812 385 5337 Чкаловский проспект, 15
Попробовать демо-версию

Установка на сайт в 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/false>}
// вызывается, когда необходимо скрыть/показть чат-окно, это может происходить как в ответ на действия пользователя,
// так и на поступающую информацию от сервера (например, когда оператор переоткрыл закрытй посетителем чат)
// здесь следует показать/скрыть контейнер с iframe
},

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

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://<account name>.webim.ru/webim/iframe-sample.php