An iFrame is an element(tag) that allows you to display a web page inside another.
To embed Dialogs on a site, place this 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> |
Parameters in iFrame
You can specify authorization data and filters in the script. This is necessary in order not to enter login and password, and set filters will allow you to open Dialogs on the necessary dialogs.
Parameters should be specified in the "src" attribute after the equals sign and "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]" |
The result should look like this(pay attention to the "src" attribute):
| $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 number. Used to filter the list of lines. |
| api[messenger_type] | Messenger. Used to filter the list of messengers. |
| api[crm_domain] | Domain of the external system. Necessary for authorization under a specific employee. |
| api[employee_ext_code] | Employee ID in the external system. Necessary for authorization under a specific employee. |
| crm[phones] | Phone array. Used to filter dialogs. |
| crm[dialogIds] | An array of chat IDs. It is used to filter dialogs. |
All the fields are optional.
ChatApp Dialog uses the API token (access_token) passed from the third-party system and gets its new independent token pair through a special method. Therefore, it will not break the API token of the third-party system. ChatApp Dialog itself updates its own token when necessary.
Note: you need to pass a live access_token to ChatApp Dialog at the moment the frame is opened.
Example of integration in Tilda
Dialogs can be installed on any website via iFrame. This article gives an example of integration with the Tilda website builder.
1. Log in to your workspace in Tilda.
2. In the My Sites tab, create a site or navigate to an existing site.
3. Add an HTML block, such as "Popup: HTML code in a popup".
4. Paste the iFrame connection code into the block:
<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>
5. Click Save and Close.
6. Copy the link to Popup.
7. Place the link anywhere on the page, such as in a button.
8. Publish the site.
9. Now when you click on the button, a popup window will open with Dialogs
