Sections and articles

How do I make a beautiful card for the booking module?

To create a card that the guest will see on the last booking page, we recommend using by the Yandex.Maps constructor.

Click on the link and click "Create a map".



In the visual editor, we adjust the scale and positioning so that the hotel is clearly visible relative to the surrounding settlements and roads.



For additional visualization of the hotel's location on the map, you can use the toolbar. Information on the screenshot:



When we are done editing the map, click on the " buttonSave and continue".



In the window that opens, select the option "Insert on the website", and also specify the type of map:

- Interactive. Such a map can be moved, and objects respond to user actions.

- Static. The image is in PNG format. It has a limited number of objects.



Click "Get the card code" and in the window that opens, copy the iframe code of the card. 



Next, you need to add the received card code to the booking module. To do this, go to Shelter CLOUD. Go to the settings by clicking on the username in the upper-right corner of the screen. Select the section "Online for the v2.0 website". Click on the link "Show all settings". 



Scroll down to the section "Location of the hotel on the map (html code):". In the section "HTML code", we insert the iframe code of the map, which we received in the Yandex map constructor.



In the " sectionView", we can check how our map is displayed.



Now go to the booking module on the website and check the result. 


Чтобы гость мог сразу оценить местоположение вашего отеля на финальной странице бронирования, рекомендуем использовать Яндекс Карты. Это просто и бесплатно. Следуйте пошаговой инструкции.

Шаг 1. Создаем карту в конструкторе

  1. Перейдите в конструктор Яндекс Карт и нажмите кнопку Создать карту;

  2. В открывшемся визуальном редакторе настройте масштаб и позиционирование. Убедитесь, что здание отеля хорошо видно, а его расположение понятно относительно основных дорог и населенных пунктов;

  3. Чтобы сделать отметку отеля более заметной, используйте инструменты на панели редактирования (маркеры, подсветка зданий и т.д.);

  4. Когда закончите редактирование, нажмите Сохранить и продолжить.

Шаг 2. Получаем код для вставки на сайт

  1. В открывшемся окне выберите опцию Вставить на сайт;

  2. Укажите тип карты:

    • Интерактивная: Гость сможет двигать карту и увеличивать масштаб. Объекты реагируют на нажатия;

    • Статическая: Обычная картинка в формате PNG. Подходит, если не требуется взаимодействие с картой;

  3. Нажмите кнопку Получить код карты;

  4. В открывшемся окне скопируйте сгенерированный iframe-код.

Шаг 3. Вставляем код в настройки Shelter Cloud

  1. Перейдите в личный кабинет Shelter CLOUD;

  2. Нажмите на имя пользователя в правом верхнем углу экрана, чтобы открыть настройки;

  3. Перейдите на вкладку Онлайн для сайта v2.0;

  4. Нажмите Показать все настройки;

  5. Пролистайте страницу вниз до блока Месторасположение отеля на карте (код html);

  6. В поле «HTML код» вставьте скопированный ранее iframe-код с картой;

  7. В правой части экрана (блок Просмотр) сразу же отобразится, как карта будет выглядеть на странице. Проверьте, всё ли корректно отображается.

Шаг 4. Финальная проверка

Перейдите на сайт в модуль бронирования и убедитесь, что новая карта успешно загрузилась и работает именно так, как вы задумали.

Table of contents