Разделы и статьи

Как встроить модуль бронирования Shelter Cloud в VK

Для создания приложения в ВК, потребуется зарегистрировать учётную запись разработчика, если её не было (https://vk.com/apps?act=manage

Подготовка страницы для ВК

На сайте нужно создать страницу, похожую на обычную страницу поиска, в неё установить код виджета, который можно взять в личном кабинете Frontdesk24. Кроме этого кода нужно добавить код инициализации VK. Он всегда одинаков:
<script src="https://unpkg.com/@vkontakte/vk-bridge/dist/browser.min.js&quot;&gt;&lt;/script&gt;
<script>
// Sends event to client
vkBridge.send('VKWebAppInit');
</script>

На выходе должен получиться примерно такой код страницы

<script src="https://unpkg.com/@vkontakte/vk-bridge/dist/browser.min.js&quot;&gt;&lt;/script&gt;
<script>
// Sends event to client
vkBridge.send('VKWebAppInit');
</script>
<!--Код для добавления виджета--><script src="https://pms.frontdesk24.ru/onlineWidget/bookWidget.js&quot;&gt;&lt;/script&gt;&lt;div id="book-widget"></div><script> FD24BookWidget.createWidget("book-widget", "5400D6D2-4DF2-40D2-8F0E-A9473D235A3D", undefined, undefined, "VK.com");</script>

Эту страницу нужно разместить где-то на хостинге (например, там же где и сайт). Пусть в нашем примере она будет расположена по адресу https://pms.frontdesk24.ru/mini-sites/ff_vk.html 

Установка в ВК

Для установки нужно авторизоваться в портале разработчика ВК https://vk.com/apps?act=manage, перейти в раздел "Мои приложения" и нажать кнопку "Создать"


Далее указать название приложения, платформа - Встраиваемое приложение и тип - VK Mini Apps


Далее нажать "Перейти к настройке приложения"

Если ВК попросить подтвердить операцию - сделать это


После подтверждения нужно перейти на вкладку "Настройки" и включить приложение, нажать "Сохранить изменения"


Далее нужно отлистать вниз и указать ссылку на ранее созданную страницу в полях для разных версий ВК


Все изменения нужно сохранить.

После этого можно вернуться в раздел "Мои приложения", скопировать ссылку на приложение (она будет выглядеть примерно так https://vk.com/app8219458_295186658) и вставить её в страницу отеля


После этого приложение готово к работе.

При запуске оно запросит разрешение у пользователя на запуск


После того как ему это разрешение предоставят - оно запустится и позволит делать бронирования