Бипиум может интегрироваться с Tilda, отображая всю систему, веб-форму каталога и веб-форму записей прямо на вашем сайте. Возможности Бипиума:
Отображение всей системы
Полезно, когда вам нужно отобразить на вашем сайте несколько каталогов или целых секций с данными из Бипиума. Можно позволить добавлять записи в Бипиум прямо через сайт или же просто отображать их без возможности редактирования.
Отображение веб-формы каталога
Используется в случаях, когда вы хотите отобразить на сайте только один каталог. Возможные кейсы использования: запись на прием прямо из сайта или вывод статистики на сайт.
Отображение веб-формы новой записи
Полезно, когда вам нужно отобразить на сайте форму обратной связи или анкету. Результаты заполнения веб-формы будут сразу же отображены в Бипиуме.
Принцип работы
![](https://cdn.prod.website-files.com/63457bdec59a41792504b512/63a1b666f687d76947c37a58_Xt8Gd8kJ7IEfZbs5o6JdDlGeu4j6ha3CjrOva6WlHzAKfJGShqR3R7yvWFJ4_J-XQqTecVUJ9_lKSerazg8mbZB6nhvJkqO_jDIsi3K82G5A5_e3GVJdIOUTEfT837aTHYSzxngtr9O9nJKHUsU3e0sl0CeEdWGlyBX4SCOCAzESm6JMJJYgoJIuRMKh4w.jpeg)
- Ваш сайт отправляет GET-запрос из iframe на адрес внешнего запроса в Бипиуме.
- Сценарий внешнего запроса обращается к API Бипиума с данными фиктивного пользователя для получение авторизационной cookie.
- После получения авторизационной cookie сценарий выполняет перенаправление на адрес отображения нужной сущности (системы, веб-формы каталога, веб-формы создания записи).
- В iframe вашего сайта выполняется переход на адрес перенаправления с авторизационным cookie фиктивного пользователя. Нужная сущность отображается в Tilda.
Реализация
Доступные варианты отображения
Бипиум может отображаться в Tilda в полном объеме. В этом случае функционал Бипиума никак не ограничен. Система будет отображаться с набором прав, определенным для пользователя, под которым происходит авторизация. Выглядит это следующим образом:
![](https://cdn.prod.website-files.com/63457bdec59a41792504b512/63a1b665c8ea883047312fb2_YTzX29QKfqMZGOfnUCqIPtpQLQQk2zAAh8S8Xv3L5Xayl-zC4p7IcvWm-EjMVgwHftiooBjZhAQ3YGuQBAHWM03fQsBGZ6DEw2QsMugZcmMzX589Kwi03Xi1v10yQRf1jorSXHSPRnsjGm5WrVkUck8OE1Kv_oQnMMx1oKNjKV9RRNlJEKXlP5Bse1LG3Q.png)
Бипиум может отображать в Tilda веб-форму каталога. Каталог можно как просто отображать без возможности редактирования, так и дать возможность создавать/изменять записи в нем. Настраивается правовой политикой пользователя, под которым происходит авторизация. Веб-форма каталога на сайте выглядит следующим образом:
![](https://cdn.prod.website-files.com/63457bdec59a41792504b512/63a1b6658af4716a7aa6aa1a_qyQMMLo1YnqiSSjjYLe8DN8vYMc4O9ZOxuEwsiexP_d6umgzMt7L1cqpJC9vtK6xH-RGEH4MR91SEMEUTXwT2lNRJqIRJhR3akjMP54Qi7E5thgieNIeY5hK0HRVdZvZYeaovDagPWYgiKEPW_j2n1BxhOlRzUQzzDd6tFGQchoFiSUr7pFvZS7hWR5UDQ.png)
Помимо стандартного табличного вида, каталог можно отображать в плиточном и календарном видах:
![](https://cdn.prod.website-files.com/63457bdec59a41792504b512/63a1b66554dbb246692d7a5c_EGnCtZC0fyHpMVoBDNNN7Pw5ljghJ7ff5JEBSrmk-Scl2Hv6NUrm5rM-71i5loynJVzLi_vjV7JkWCUZF74xeHXMA5ffydcmDfhkRzHGYmex2m2fUPcALCukYUE1rv30f9HAqJ87DkuuO9YatshT_fXhFDrldsmYgJ24wP84KluzvILjpZMzPJFlIXOk4Q.png)
![](https://cdn.prod.website-files.com/63457bdec59a41792504b512/63a1b6654828c1d35a8c6445_ghRgLc29XwEwcO3LuvXEp8T77iMq9x5UwCrupY_pT0kcr2HngJJPSYZDNxHfNFVK5g-RjaR7QMhBV0-zSJ0DqOJjPOyYWwRxZz2aZZ5eKx29d1hHl_ENh57efVxFy1TcC6JIJ1Jy-eKyMuFMgJjXJGkoiZMDNqF08DSCn4l53ijPbqmPhAootYJqAqNpwA.png)
Бипиум может отображать в Tilda веб-форму создания записи. В записи можно отображать все или только конкретные поля. Веб-форма создания записи в Tilda выглядит следующим образом:
![](https://cdn.prod.website-files.com/63457bdec59a41792504b512/63a1b665ae02256ae5e87dae_mzekQDqbNqB2m0O8t7G1EXoYwK1ztSCGpcwjGLd1q1bdkqj3GXRM7oFLA3IVqPzIJ3DH23HNUcbuMbbeXIk4vkdv1jHAFCI1V7PJYm2fX1oka9JiNVSBcSEOzhrHJAi9wrCEdq5ZBEmnD1PBFIRYWoXU1GXwNBLBahjlOtcyxhbYlXWOvKrRCundkyU9HA.png)
Создание фиктивного пользователя
Бипиум будет отображать в Tilda данные так, как видит их пользователь, под которым происходит авторизация. Для того, чтобы ограничить набор видимых/редактируемых данных рекомендуем вам создать в системе фиктивного пользователя и отдельно настроить его правовую политику под нужное отображение. Это нужно для того, чтобы человек, вошедший на ваш сайт на Tilda, не имел полного доступа к системе. Возможные кейсы:
- Вам необходимо, чтобы человек на сайте видел каталог, но не создавал в нем записи и не редактировал существующие.
Решается отображением веб-формы каталога на сайте под пользователем, у которого нет прав на изменение записей и выше.
- Вам необходимо, чтобы человек на сайте мог создавать новые записи в каталоге. Например, вы хотите организовать запись на прием через сайт на Tilda. Тогда человек может сразу создавать запись в каталоге, указывая информацию о себе, свои контактные данные и т.д.
Решается отображением веб-формы новой записи на сайте под пользователем, у которого есть права на создание записей. Также можно настроить видимость отдельных полей, если, например, нужно скрыть некоторые поля каталога от пользователя.
- Вы хотите разместить на сайте форму обратной связи и сразу же фиксировать заполненные обращения в Бипиуме. В этом случае можно использовать веб-форму создания новых записей.
Необходимо отобразить на вашем сайте веб-форму создания новой записи каталога. Доступы для пользователя необходимо настроить таким образом, чтобы он мог создавать новые записи в каталоге. Также можно настроить видимость отдельных полей, если, например, нужно скрыть некоторые поля каталога от пользователя.
Создание внешнего запроса с адресом к отображению
Любое из отображений, описанных выше, опирается на механизм работы внешних запросов. Создайте в системном каталоге «Внешние запросы» новую запись, заполните уникальный URL-идентификатор и создайте новый сценарий автоматизации. Пример заполнения:
![](https://cdn.prod.website-files.com/63457bdec59a41792504b512/63a1b666f2ddac4ee91c8770_wOjNJhYkDkgbuiAH-CixkQrewGizYA3IbnUakA_q3bNkUjnEq6euQH4XicAXTr_DqXLZJ67TUO-WgSoPB58nVHgahYq_lSfZUm_DbTJskaOLKmyazqEYmo5kMzB3nRXNkpGrKHMCVQ_p7zh3_FAUe-hG_oFmenj_rZDThuDQRUJofDPkMN5WraOhFga3Ng.png)
Принцип работы вашего сайта с внешним запросом следующий:
- Ваш сайт обращается к адресу внешнего запроса из iframe.
- Внешний запрос запускает сценарий автоматизации.
- Сценарий автоматизации получает авторизационную cookie и перенаправляет запрос на нужный для конкретного отображения адрес.
Сценарий перенаправления
Файл сценария по ссылке в гугл-диск
Сценарий перенаправления во внешнем запросе выглядит следующим образом:
![](https://cdn.prod.website-files.com/63457bdec59a41792504b512/63a1b666b078a132a187b68d_5rM30VIWrL_F1bgFatSlPYuCarjyHW1BhXF1MIFqnqWbHmaqFpcBUcPWhVKxUYVKvzbzezMnKHv_41yCyBObvL37Y5gDaWSGABg5hETBf9RXQzYJ8994herU8wiE_knd4UbqU38h4uq15TuoKKHg0_GoMrQwP2_4LMTfYlUVbXN8HSA_GcK8Zh05SyezZw.png)
Сценарий делает следующее:
- Отправляет запрос к стандартному API системы с целью получения авторизационной cookie компонентом «Обращаемся к API».
- Выполняет переадресацию на адрес нужного отображения, передавая в заголовках авторизационную cookie компонентом «Переадресация».
В компоненте «Обращаемся к API» нужно указать ваш домен и авторизационные данные фиктивного пользователя с доступом в вашу систему. Пример заполнения:
![](https://cdn.prod.website-files.com/63457bdec59a41792504b512/63a1b66637e85eaa397743cb_ffu3avb-spYiG4x7cr__rAbHGR3JWRF7gbpkz4OriXRIwuK0vu3QV20SkdwilVVaD1iUyaNSm2AP8WcmOLZHIKvhwVqZ-IBeI_nqSF1s6X9pXFs36hkzfPvGYce-7Ie_5Z_8AXN0kZYsHaqZeUjys_C0ZkHeX8WJbRf35Sen657EPhYojaRYVuCvgOibTw.png)
В компоненте «Переадресация» нужно указать ваш домен в переменной «$headers». Пример заполнения:
![](https://cdn.prod.website-files.com/63457bdec59a41792504b512/63a1b666edec0d48c02aa557_VrEyxFw9Nn1K8sjzgOTDjjzOJOWD9UlFsNuQYZZOlDpy5lMLZZb1E3qgcFY1UujjIyXGnhfVrmoHCJM2taRjKAh23ceP5cD3CVx2K2oZimzeyoW_bQ7DYL02oCuJ7nknIb3Jnbm9YTT_J_zRpY6P0B-yD6ZJ6IDgYpIItyjDbLYsfgVMlmrRoXBajzku_Q.png)
Настройка Tilda-сайта
На вашем Tilda-сайте нужно добавить новый блок «HTML-код» (T123). Внутри этого блока нужно объявить iframe, в котором будет отображаться Бипиум. В качестве адреса необходимо использовать полный адрес созданного ранее внешнего запроса. Пример заполнения:
<iframe src="https://ваш_домен.bpium.ru/api/webrequest/url_id_Внешнего_запроса" style="width:100%; height: 80vh;"></iframe>
Стиль iframe можно редактировать произвольным образом средствами CSS.
Тестирование
Отображение всей системы
Создайте в Бипиуме фиктивного пользователя. Настройте его правовую политику нужным для отображения на сайте образом. Например, вы можете дать пользователю права только видеть записи определенных каталогов без возможности их редактирования.
В компоненте «Перенаправление» в сценарии перенаправления нужно вставить полный адрес системы Бипиума в атрибут «Location» переменной «$headers». Пример заполнения:
![](https://cdn.prod.website-files.com/63457bdec59a41792504b512/63a1b666edec0d48c02aa557_VrEyxFw9Nn1K8sjzgOTDjjzOJOWD9UlFsNuQYZZOlDpy5lMLZZb1E3qgcFY1UujjIyXGnhfVrmoHCJM2taRjKAh23ceP5cD3CVx2K2oZimzeyoW_bQ7DYL02oCuJ7nknIb3Jnbm9YTT_J_zRpY6P0B-yD6ZJ6IDgYpIItyjDbLYsfgVMlmrRoXBajzku_Q.png)
Полный код внутри $headers:
{
"Location": `https://ваш_домен.bpium.ru/`,
"Set-Cookie": `${headersForCookies['set-cookie']}; SameSite=None; Secure`
}
Вставьте в Tilda блок «HTML-код». Объявите в нем iframe с адресом внешнего запроса в Бипиуме. Пример заполнения блока:
<iframe src="https://ваш_домен.bpium.ru/api/webrequest/url_id_Внешнего_запроса" style="width:100%; height: 80vh;"></iframe>
Замените тестовые данные на реальные.
После заполнения сценария и встраивания блока в Tilda, на вашем сайте отобразится система Бипиума с правовой политикой авторизованного в сценарии сотрудника:
![](https://cdn.prod.website-files.com/63457bdec59a41792504b512/63a1b665c8ea883047312fb2_YTzX29QKfqMZGOfnUCqIPtpQLQQk2zAAh8S8Xv3L5Xayl-zC4p7IcvWm-EjMVgwHftiooBjZhAQ3YGuQBAHWM03fQsBGZ6DEw2QsMugZcmMzX589Kwi03Xi1v10yQRf1jorSXHSPRnsjGm5WrVkUck8OE1Kv_oQnMMx1oKNjKV9RRNlJEKXlP5Bse1LG3Q.png)
Отображение веб-формы каталога
Создайте в Бипиуме фиктивного пользователя, если его нет. Настройте права фиктивного пользователя на нужный каталог необходимым образом (например, только видеть записи, без возможности изменения).
Компонент «Перенаправление» в сценарии перенаправления нужно заполнить следующим образом:
![](https://cdn.prod.website-files.com/63457bdec59a41792504b512/63a1b666b078a1b21987b68f_WiPr5HYRPkYuPK4YHpKbYG7Myw3Sq5uCq68-pMQeaYJOsGsLRwGbncFq0qockKp6xlXqZH-iLCxuyRhiOJJ11zX5Yek1KHw1mOSKEQQ1GpUzw2ZFwf59hp0LL_A9OVzmi9nujbwkmQVv_yQ5BAw3DMcpH1Ch0Hdr3olpXjEGsuc0_p4hVHdwtfvvPepxQw.png)
Код внутри $headers:
{
"Location": `https://ваш_домен.bpium.ru/?action=catalog&catalog=id_каталога#/`,
"Set-Cookie": `${headersForCookies['set-cookie']}; SameSite=None; Secure`
}
Вставьте в Tilda блок «HTML-код» со следующим содержимым:
<iframe src="https://ваш_домен.bpium.ru/api/webrequest/url_id_Внешнего_запроса" style="width:100%; height: 80vh;"></iframe>
Замените тестовые данные на реальные.
После заполнения сценария и встраивания блока в Tilda на вашем сайте отобразится веб-форма каталога с правовой политикой авторизованного в сценарии сотрудника:
![](https://cdn.prod.website-files.com/63457bdec59a41792504b512/63a1b6658af4716a7aa6aa1a_qyQMMLo1YnqiSSjjYLe8DN8vYMc4O9ZOxuEwsiexP_d6umgzMt7L1cqpJC9vtK6xH-RGEH4MR91SEMEUTXwT2lNRJqIRJhR3akjMP54Qi7E5thgieNIeY5hK0HRVdZvZYeaovDagPWYgiKEPW_j2n1BxhOlRzUQzzDd6tFGQchoFiSUr7pFvZS7hWR5UDQ.png)
Отображение веб-формы новой записи
Создайте в Бипиуме фиктивного пользователя, если его нет. Настройте права фиктивного пользователя на нужный каталог необходимым образом (откройте доступ к созданию записей в каталоге, настройте правовой политикой видимость полей, которые должны заполняться на сайте).
Компонент «Перенаправление» в сценарии перенаправления нужно заполнить следующим образом:
![](https://cdn.prod.website-files.com/63457bdec59a41792504b512/63a1b6668fe68777fff8602a_ctSDz_slu7zBzxMLfWssfbaFrP7dgl-gqAHZsZ2k22Rje_BlnFoLI0BOS4K0-XGER-iaz01VsSEfYR-aVmKYERS3eVwQy-g6y16h4E-DvYUf3w4p7wbCLYIc-_YcQDqTP3EAu2tP3AYXPReDd9VEe0OOLM1G63jSTI7PzfroqVLJgyUOkqLLq1KSG64trg.png)
Код внутри $headers:
{
"Location": `https://ваш_домен.bpium.ru/?action=record-new&catalog=id_каталога#/`,
"Set-Cookie": `${headersForCookies['set-cookie']}; SameSite=None; Secure`
}
Вставьте в Tilda блок «HTML-код» со следующим содержимым:
<iframe src="https://ваш_домен.bpium.ru/api/webrequest/url_id_Внешнего_запроса" style="width:100%; height: 80vh;"></iframe>
Замените тестовые данные на реальные.
После заполнения сценария и встраивания блока в Tilda на вашем сайте отобразится веб-форма создания записи с правовой политикой авторизованного в сценарии сотрудника:
![](https://cdn.prod.website-files.com/63457bdec59a41792504b512/63a1b666d6b2292de0540f86_h0BR5c53FzwATeCQ8WrB9NL7a_tpuqyFNUnyWCeNVXkWM-76A8aQbhwdWyi_9VZKkhT5_jiGHN-ZwZxJ35mzacwDu5A2ZvvroB_WDUNM5Q_P7NH3KnSrs_uls5A854rBumpKfKPW39rDOmEfunFviT4E83536w16wKITM1QRmUFg1jvHc5V1FFsOLjw9Bw.png)