How to embed the Shelter Cloud booking module in VK

To create an application in VK, you will need to register a developer account, if there was one (https://vk.com/apps?act=manage ) 

Preparing a page for VK

On the website, you need to create a page similar to a regular search page, install the widget code in it, which can be taken from the Frontdesk24 personal account. In addition to this code, you need to add the VK initialization code. It is always the same:
<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>

The output should be something like this page code

<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>
<!--Code for adding a widget--><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>

This page needs to be placed somewhere on the hosting (for example, in the same place as the site). In our example, let it be located at https://pms.frontdesk24.ru/mini-sites/ff_vk.html 

Installation in VK

To install, you need to log in to the VK developer portal https://vk.com/apps?act=manage , go to the "My applications" section and click the "Create" button

Next, specify the name of the application, platform - Embedded application and type - VK Mini Apps

Then click "Go to the application settings"

If the VC is asked to confirm the operation, do it

After confirmation, go to the "Settings" tab and turn on the application, click "Save changes"

Next, you need to scroll down and specify a link to a previously created page in the fields for different versions of the VK

All changes need to be saved.

After that, you can go back to the "My applications" section, copy the link to the application (it will look something like this https://vk.com/app8219458_295186658 ) and paste it into the hotel page

After that, the application is ready to work.

When it starts, it will ask the user for permission to run

After he is granted this permission, it will start and allow him to make reservations