Встраивание через iFrame / ChatApp

Встраивание мессенджеров через iFrame

Сервис Dialogs.Pro имеет 2 варианта интеграции в интерфейс отраслевой системы:

1. Упрощенный. Интеграция через ссылку-url

Установите ссылку на диалог внутри отраслевой системы, чат с клиентом откроется в отдельном окне или вкладке.

Пример ссылки на диалог (с указанием ID чата): https://dialogs.pro/?crm[dialogIds][0]=79999999999@c.us&api[license_id]=30310&api[messenger_type]=grWhatsApp

параметры ссылки:

crm[dialogIds][0]=79999999999@c.us - ID конкретного чата;
&api[license_id]=15006 - номер канала (лицензии);
&api[messenger_type] - мессенджер.

Пример ссылки на диалог (с указанием номера телефона клиента): https://dialogs.pro/?crm[phones][0]=79999999999&api[license_id]=30310&api[messenger_type]=grWhatsApp

параметры ссылки:

crm[phones][0]=79999999999 - номер телефона клиента;
&api[license_id]=15006 - номер канала (лицензии);
&api[messenger_type] - мессенджер.

При открытии, ChatApp Dialog потребует логин и пароль, один раз при входе в систему.

Если задать в ссылку параметр &api[access_token], то войти в ChatApp Dialog можно без авторизации.

Внутри каждого чата есть кнопка копирования ссылки на диалог, она полезна для обмена между сотрудниками:

2. Встраивание ChatApp Dialog через iFrame (в интерфейс системы разработчика)

Любая программная система может интегрировать в свой интерфейс ChatApp Dialog через iFrame.

Данный вариант интеграции отличается от интеграции через ссылку url лишь в том, что в текущем варианте ссылка вставляется в iFrame.

Для удобства можно генерировать ссылку из массива полей.

Приложение разработчика формирует массив полей:

$fields = [
    'api' => [
        'access_token' => '$2y$10$3QNdSGJJarGvzMX277775777777WaI4QRW5Fw.NCWkbNONufjlEI.m',
        'license_id' => 15006,
        'messenger_type' => 'grWhatsApp',
        'crm_domain' => 'chatapp-dev46.bitrix24.ru',
        'employee_ext_code' => '123',
    ],
    'crm' => [
        'phones' => [
            '79954545454',
            '79985554544',
            '79985554513',
        ],
        'dialogIds' => [
            '79954545454@c.us'
        ]
    ],
];

Далее необходимо преобразовать массив полей в строку для передачи в iframe как GET параметры:

$query = http_build_query($fields);
Код подключения iframe:
<iframe
       id="webchat"
       src="https://dialogs.pro/?<?=$query?>"
       sandbox="allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-top-navigation allow-top-navigation-by-user-activation"
       allow="camera https://dialogs.pro/; microphone https://dialogs.pro/; clipboard-read https://dialogs.pro/; clipboard-write https://dialogs.pro/"
       width="100%"
       height="99%"
       style="border: 0;" >
</iframe>

Описание полей

api[access_token]	Токен доступа, см. метод Авторизация.
api[license_id]	Номер канала (лицензии). Используется для фильтрации списка лицензий.
api[messenger_type]	Мессенджер. Используется для фильтрации списка мессенджеров.
api[crm_domain]	Домен внешней системы. Необходим для авторизации под конкретным сотрудником.
api[employee_ext_code]	ID сотрудника во внешней системе. Необходим для авторизации под конкретным сотрудником.
crm[phones]	Массив телефонов. Используется для фильтрации диалогов.
crm[dialogIds]	Массив ID чатов. Используется для фильтрации диалогов.

Все поля необязательные.

Примечание:
ChatApp Dialog используя токен API (access_token), переданный из crm, получает свою новую независимую пару токенов через специальный метод. Поэтому он никак не сломает токен API CRM. Более того веб-чат сам управляет свежестью своего токена и обновляет его при необходимости.
Важно: передать в ChatApp Dialog живой access_token в момент открытия фрейма.

Пример возможной интеграции в стороннюю систему

Оставить заявку на услуги интегратора