Sections and articles

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 VK page

On the website, you need to create a page similar to a regular search page, install the widget code in it, which you can get from your Frontdesk24 personal account. In addition to this code, you need to add the VK initialization code. It's 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 the 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 hosted somewhere (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 

VK installation

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, the platform is an Embedded application, and the type is VK Mini Apps.


Next, click "Go to application settings"

If you ask VK to confirm the operation, do it.


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


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


All changes must be saved.

After that, you can return 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 app 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.