Integration of channels with CRM via iFrame

iFrame is an HTML element (tag) that allows you to display a web page inside another page.
To embed Dialogs into a website, place the following code anywhere between <body></body>:

$query = http_build_query($fields);
iFrame connection code::
<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>

iFrame parameters

You can pass authorization data and filters in the script. This allows users to open Dialogs without entering login and password, and also to open specific dialogs directly.

Parameters must be added to the src attribute after https://dialogs.pro/?, for example:

src=”https://dialogs.pro/?api[access_token]=$2y$10$3QNdSGJJarGvzMX277775777777WaI4QRW5Fw.NCWkbNONufjlEI.m&api[license_id]=15006&api[messenger_type]=grWhatsApp&api[crm_domain]=chatapp-dev46.bitrix24.ru&api[employee_ext_code]=123&api[company_id]=26&crm[dialogIds]”

Final example:

$query = http_build_query($fields);

Код подключения iframe:

<iframe

id=”webchat”

src=”https://dialogs.pro/?api[access_token]=$2y$10$3QNdSGJJarGvzMX277775777777WaI4QRW5Fw.NCWkbNONufjlEI.m&api[license_id]=11111&api[messenger_type]=grWhatsApp&api[crm_domain]=domen.bitrix24.ru&api[employee_ext_code]=123&api[company_id]=26&crm[dialogIds]”

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>

Available parameters

api[access_token] — access token (see Authorization method)
api[license_id] — line ID (used for filtering lines)
api[messenger_type] — messenger type (filters messenger list)
api[crm_domain] — external system domain (used for employee authorization)
api[employee_ext_code] — employee ID in external system (for authorization)
crm[phones] — array of phone numbers (dialog filtering)
crm[dialogIds] — array of chat IDs (dialog filtering)

All fields are optional.

Important note

ChatApp Dialog uses the API token (access_token) passed from an external system and generates its own independent token pair via a special method.
This does not interfere with the external system’s API token. ChatApp Dialog automatically refreshes its token when needed.

⚠️ Important: a valid (live) access_token must be passed at the moment the iframe is opened.

Opening without chat list

To open a dialog without the chat list and other UI elements, add: isHideChatList=true

Example: Tilda integration

You can embed Dialogs into any website via iFrame. Below is an example using Tilda:

Go to your workspace in Tilda.
Open “My Sites” and create or select a site.
Add an HTML block (e.g. “Popup: HTML code in popup”).
Insert iframe code:

<iframe
id="webchat"
src="https://dialogs.pro/"
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="1200px"
style="border: 0;">
</iframe>

Save and close.
Copy popup link.
Assign it to a button or element.
Publish the site.
Clicking the button will open Dialogs in a popup window.