- Онлайн-консультант Webim
- -
- База знаний
- -
- Для девопсов
- -
- Встраивание административного интерфейса через iframe
-
-
-
- 01. Обнаружение нового посетителя, ожидающего ответа
- 02. Выбор посетителя сайта из списка и начало диалога
- 03. Набор ответа посетителю, выбор шаблона
- 04. Запрос контактной информации у посетителя
- 05. Отправка файла посетителю
- 06. Кобраузинг
- 07. «Телепортация» пользователей
- 08. Переадресация диалога другому оператору
- 09. Отправка переписки на адрес электронной почты оператора
- 10. Назначение категории посетителю
- 11. Блокировка посетителя
- 12. Вставка гиперссылки в сообщение
- 13. Добавление заметок
- 14. Проверка орфографии
- Agent`s Handbook
- Как включить оповещения в Google Chrome
- Очереди в РМО
- Работа с офлайн-обращениями на РМО
-
- Алгоритмы назначения чатов
- Видимость диалогов
- Вход в систему
- Генератор лидов и автоприглашения
- График работы
- Добавление кнопки Webim в E-mail
- Закрытие диалогов
- Логотип компании в заголовке чата
- Мониторинг активности сотрудников
- Настройка языков
- Общие настройки организации
- Отделы
- Оценки
- Размещения и настройки кнопки на сайте
- Рассылки
- Регистрация операторов и назначение супервизоров
- Системные сообщения
- Список тайм-аутов
- Финансы
- Функции в каналах общения
- Шаблоны ответов
-
- Встраивание административного интерфейса через iframe
- Как узнать версию своего браузера
- Необходимые доступы на сервер
- Необходимые доступы с сервера
- Обработка файлов, загружаемых в чат
- Редактор настроек аккаунта (account config)
- Сетевые конфигурации сервиса Webim
- Системные требования Webim для веб-приложения операторов
- Системные требования Webim для посетителя
- Схемы сетевого размещения серверных компонентов
-
-
-
- Webim Mobile SDK 3.0 для интеграции в мобильные приложения iOS
- Webim Mobile SDK 3.0 для интеграции в мобильные приложения Windows Phone 8.1
- Информация о выпусках (Release notes) – Webim Mobile SDK 3 для Android
- Информация о выпусках (Release notes) – Webim Mobile SDK 3 для iOS
- Справочник по Webim Mobile SDK – SDK для интеграции в мобильные приложения iOS (iPhone/iPad)
- Справочник по Webim Mobile SDK для интеграции в мобильные приложения Android
- Push-уведомления
- Webim Cordova Plugin
-
- Webim CRM postMessage Interface
- Webim Custom Channel API
- Как сделать ссылку кнопкой старта чата
- Маршрутизатор чатов
- Обработчики событий чата
- Процедура установки чата Webim на сайт в iframe
-
Встраивание административного интерфейса через iframe
Административный интерфейс Webim можно встроить в страницы какого-либо иного веб-сервиса через iframe
. Наиболее часто данная функция используется для встраивания в сторонний CRM с веб-интерфейсом. Такое использование повышает эффективность работы оператора, потому что ему больше не требуется держать открытыми две вкладки и переключаться между ними.
Содержание:
Настройка nginx
Для облачных клиентов, у которых сервис Webim расположен на серверах компании ООО "ВЕБИМ.РУ", требуется обратиться в службу технической поддержки Webim.
Для корректной настройки требуется выполнить следующие пункты:
- В настройках веб-сервера
nginx
, который обслуживает ваш аккаунт Webim, нужно изменить настройки, отвечающие за выдачу контента через фреймы.
NB! Необходимо редактировать настройки сервера, который обслуживает именноchat.mycompany.com
, на котором расположен сервис Webim, а не CRM, в которую будет встроенiframe
.
Найдите директорию с Webim-настройками nginx и создайте в этой директории файлiframe.conf
.
Путь зависит от особенностей начальной установки, например, он может выглядеть так:/etc/nginx/conf/webim-config/common
- В текстовом редакторе добавьте в файл
iframe.conf
выдачу правильных заголовков (Response Headers). Вместоhttps://crm.company.com
нужно вставить URL на сайт(ы), куда будет встраиваться сервис Webim. Также файл не должен содержать других ограничений, например,frame-ancestors: 'self'
. Пример файла настроек:add_header X-Frame-Options "ALLOW-FROM localhost https://crm.company.com"; add_header Content-Security-Policy "frame-ancestors localhost crm.company.com";
- Найдите основной файл настроек nginx для Webim. Путь зависит от особенностей начальной установки, например, он может выглядеть так:
/etc/nginx/conf/webim-config/sites-available/webim.conf
Во все секции
location
, отвечающие за URL административного интерфейса, который Вы хотите сделать доступным вiframe
, вставьте строку:include /etc/nginx/webim-config/common/iframe.conf;
Удалите из этих location строки, которые могут влиять на заголовки
X-Frame-Options
иContent-Security-Policy
Примерный список секций
location
:- /
- /l/o/check-spelling2
- ^(/l/v/(?:m/)?history|/l/[vo]/get-history|/internal/history/.+|/api/history/v[1-9]d*/.+)$
- ^/webim/images(/avatar|department_logo|visitor_avatars|ainvite_avatar|site_logo|site_preview).*.(jpg|jpeg|gif|png)$
- (get-image).php$
- ^/(?!x)(?!l)(?!ws)(?!webim)(?!image-robot)(?!images)(?!cd2)(?!cdn)(?!cd)(?!images)(?!robots.txt)(?!api).+.(ico|gif|png|jpg|css|js|htm|html)$
- ^/(images|css)(/.+)$
- ^/webim/(images|css)(/.+)$
- /l/(v|o)/download.*.(png|gif|jpe?g|webp|pdf|doc)$
- /l/(v|o)/download/.*?([^/]+)$
- /l/
- /webim/operator.+.php$
- .php$
- >.(jpg|jpeg|gif|png|css|js)$
- ^/api
Пример правильно отредактированной секции
location
:location / { root $php_root; index index.php; include /etc/nginx/webim-config/common/iframe.conf; }
- После окончания настройки нужно перезагрузить сервис nginx.
Тег фрейма
Для того, чтобы на нужной странице работал iframe
, в HTML-код страницы необходимо добавить тег iframe
. Пример:
<div style="position: fixed; top: 0; bottom: 0; right: 0; border=0;"> <iframe name="Webim Control Panel" src="https://mycompany.webim.ru/operator/" height="100%" width="940" scrolling="no" frameborder="1" align="right"> </iframe> </div>
Данные, указываемые в теге iframe
:
- В поле
src
требуется вписать URL РМО оператора:- Пример URL для облачного аккаунта:
https://mycompany.webim.ru/operator/
- Пример URL для аккаунта, размещенного не на серверах Webim:
https://chat.mycompany.com/operator/
- Пример URL для облачного аккаунта:
- В поле
height
указывается высота встраиваемого окна. Рекомендуемое значение: 100%. - В поле
width
указывается высота встраиваемого окна. Рекомендуемая ширина без потери функциональности на РМО: 940. Минимальная рекомендуемая ширина с потерей функциональности на РМО: 792.
Взаимодействие между окнами
Для взаимодействия между CRM, в которую встраивается сервис, и Webim через iframe
существует метод postMessage
. Он позволяет отправлять между окнами события, содержащие объекты (object
).
Для активации рассылки событий требуется добавить адреса страниц, на которые будут отправляться события, в конфигурации аккаунта:
- Если у вас облачный аккаунт, обратитесь в службу технической поддержки Webim для добавления в конфигурацию аккаунта URL на которые требуется отправлять события.
- Если сервис Webim размещен на ваших серверах, требуется добавить в поле
operator_iframe_allowed_parent_origin
в конфигурации аккаунта URL на которые требуется отправлять события.
Для того, чтобы сайт, в который встраивается Webim, мог получать события, на нём должен быть активен слушатель события message
. При получении события также должен вызываться его обработчик, который реализует требуемые функции. Из соображений безопасности требуется проверять адрес, с которого приходит событие. Оно передается в поле origin
. Пример реализации:
window.addEventListener("message", receiveMessage, false); function receiveMessage(event) { if (event.origin !== "origin_url") return Exception(); // ... }
NB! Вместо origin_url
должен быть указан URL РМО оператора. При несоответствии origin
адресу РМО обработка этого события не должна продолжаться.
Для того, чтобы определить события, которые требуется передавать в CRM из Webim и в обратном направлении, следует обратиться к нашим менеджерам, чтобы подыскать решение, подходящее именно Вам.
Работа с внешними ссылками
Все внешние ссылки при работе с iframe
будут продолжать открываться в новом окне, а не внутри iframe
. Например, если посетитель отправит ссылку на внешний ресурс или картинку, находящуюся на внешнем ресурсе, нажатие на эту ссылку или картинку приведёт к открытию в браузере нового окна.