# Модуль бронирования и его интеграция в сайт отеля

Модуль бронирования, выполненный по технологии iframe, состоит из двух основных частей:

![](https://help.edelink.ru/uploads/images/gallery/2026-02/embedded-image-y4ujlgho.png)

Рис.7 Виджет бронирования

Стартового виджета, который может быть установлен на любой странице вашего сайта и служит “отправной точкой” для начала процесса бронирования.

![](https://help.edelink.ru/uploads/images/gallery/2026-02/embedded-image-fspwpysy.png)

Рис.8 Форма бронирования

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

## Генерация кода виджета

Задание основных параметров виджета и генерация его кода выполняется в разделе Администрирование - Отель - Настройка модуля бронирования.

![](https://help.edelink.ru/uploads/images/gallery/2026-02/embedded-image-tg8jc08j.png)

Рис. 9

В данном разделе, помимо прочего, задается Дефолтное время заезда и выезда, которое будет устанавливаться по умолчанию в календаре при выборе дат и возраста детей, которые соответствуют первой, второй, и третьей категории детей в тарифах отеля.

### Код виджета  
![](https://help.edelink.ru/uploads/images/gallery/2026-02/embedded-image-0l3aprgt.png)

Рис . 10

Если ранее код виджета не был создан, то необходимо нажать Редактировать, затем заполнить все необходимые поля в форме, нажать Генерировать и затем Сохранить полученный результат.

  
Поля для заполнения.

- Выбираете тип виджета, который необходимо создать - сам стартовый виджет, или же основная страница бронирования.
- ID блока, куда будет выводиться виджет или страница бронирования. Например, на странице имеется блок <div id="widget"></div>, тогда следует в поле указать widget.  
    Обязательно выберите тип протокола, соответствующий вашему.
- В случае, если вы управляете цепочкой отелей: есть возможность показывать только отель, для которого был сгенерирован код. Остальные отели в цепочке будут недоступны.
- Вы можете сделать отель, для которого создаете виджет, заранее выбранным в списке.
- Необходимо ввести абсолютный адрес страницы, где будет располагаться основная форма бронирования.

Более подробный пример того, что нужно сделать для получения работоспособных компонентов:

1. Соблюсти валидность документа ( html, head, body должны быть ).
2. Вставить в ту часть документа, где должен располагаться ваш код, блок, например, <div id=”my\_widget”></div>
3. Сгенерированный код вставить в head или перед закрывающим тэгом body.

Опционально можете указать абсолютный путь к вашему css файлу. Он будет включен в отдаваемую форму.  
  
Обратите внимание

- Если Вы сохраните код сниппета в системе, но не обновите его на вашем сайте, то соответствующий виджет у вас работать не будет.
- Если вы сгенерируете код, но не сохраните его в системе, то такой код также работать не будет.
- Вручную код не править. Это приведет к неправильной работе системы.

  
После заполнения всех полей необходимо выполнить следующие 4 шага:

1. Сгенерируйте код, если вы не делали этого ранее
2. Сохраните код в системе
3. Скопируйте сгенерированный код
4. Вставьте код на соответствующую сгенерированному коду страницу Вашего сайта (виджет или же основная форма бронирования).

## Типовые сценарии использования модуля

  
1\. Виджет нужен, например, только на главной странице, при этом у вас цепочка отелей и вы хотите, чтобы в виджете к выбору были доступны все отели в цепочке.

  
Для этого достаточно сгенерировать код единожды в любом из отелей цепочки, сохранить его и вставить на соответствующую страницу. При генерации виджета гостю будут доступны все отели цепочки.  
  
2\. У отельера есть два раздела на сайте. Предположим, что это Гостевые дома и Гостиница. Задача: что при заходе посетителя сайта в раздел “Гостевые дома” предвыбранными в виджете становятся гостевые дома, а остальные отели (Гостиница) недоступны.

  
Для этого следует: сгенерировать и сохранить код в “Гостевых домах”, добавить его на соответствующую страницу, указав при этом в параметрах "Не показывать в данном виджете остальные отели в цепочке" и "Сделать предвыбранным в виджете текущий отель".  
  
3\. Также вы можете просто сделать предвыбранным отель в рамках цепочки, просто выбрав соответствующую опцию, сгенерировав, сохранив код и вставив его на нужную страницу.

## Фиксированная кнопка “Забронировать”. 

Если Вы хотите зафиксировать кнопку “забронировать”, т.е. чтобы она всегда была на верху виджета бронирования, то нужно:

1. Создайте css файл на вашем сайте или добавить следующие строки в css стили уже существующего файла.

```css
#YourID {

    height: 700px !important; /* здесь настраивается высота формы бронирования */ 

}
```

```css
#ecvi-booking-container {

    height: 700px !important; /* здесь настраивается высота формы бронирования */

    overflow-y:scroll;

}
```

Где YourID id блока куда вставляется форма бронирования.

2. При генерации кода виджета добавьте абсолютный путь к этому css файлу, или добавьте путь в соответствующую строку кода.

![](https://help.edelink.ru/uploads/images/gallery/2026-02/embedded-image-j3uaxzix.png) Рис. 11

## Изменение дизайна виджета бронирования

Форма и виджет бронирования поставляются с базовым дизайном, но если Вы или кто то из ваших сотрудников обладает минимальными навыками web верстки (разработки сайтов), то, при желании, можно изменить цвета кнопок, полей / шрифты / формы бронирования. А также скрыть ненужные элементы виджета ( вроде названия отеля ) .

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

1. Создать новый css файл или добавить в один из css файлов, которые уже есть на вашем сайте правила для различных классов формы бронирования.
2. При генерации кода виджета указать абсолютный путь к этому css файлу. См. Рисунок 11.

В результате можно добиться таких изменений в дизайне виджета и основной формы бронирования.

![](https://help.edelink.ru/uploads/images/gallery/2026-02/embedded-image-wqnfqqba.jpeg)

Рис. 12

## Виджет в горизонтальном стиле

![](https://help.edelink.ru/uploads/images/gallery/2026-02/embedded-image-cgdewk2c.jpeg)

 Рис. 13 Виджет (слева) и основная форма бронирования.

Если вы хотите чтобы виджет бронирования имел горизонтальный дизайн как на рисунке 13 справа, то есть два способа:

Не забудьте перед вставкой кода создать <div id=”вашID”> </div> куда будет вставляться виджет/форма.

Первый: просто вставить основную форму бронирования без виджета. тогда при нажатии на кнопку “новый поиск” основная форма будет раскрываться на той же страничке, где находится.

Второй:

1.Сгенерировать и вставить код основной формы бронирования на страницу бронирования вашего сайта например на [www.myhotel.com/bronirovanie](http://www.myhotel.com/bronirovanie)

при этом в коде виджета настройка bookingPath должна сгенерироваться примерно такой :

bookingPath: ‘www.myhotel.com/bronirovanie‘

2\. Вставить этот же код на главную страницу вашего отеля. bookingPath в коде формы будет такой же как и у странички бронирования, тогда форма с главной страницы будет перенаправлять на страницу бронирования.

## Не показывать блок с выбором питания 

Cкрыть питание можно выставив флажок “Скрыть питание” при генерации кода основной страницы бронирования. Для того чтобы изменения вступили в силу нужно пересоздать код и заменить его на странице вашего сайта.

 Если у вас нет отдельной услуги с питанием, то эту информацию можно скрыть. Для этого можно воспользоваться тем же css файлом,где вы меняли цвета и дизайн виджета.

Для начала можно скрыть блок с id #nutrition прописав в файле #nutrition {display:none}

Затем для красоты можно расширить колонку с тарифами. Пропишем там же #rate {width:200%}

В результате получим такой вид см. Рис 12.

![](https://help.edelink.ru/uploads/images/gallery/2026-02/embedded-image-3zyy9ghf.png)

Рис. 12

## Не показывать время в календаре при выборе дат бронирования

Cкрыть время можно выставив флажок “Cкрыть выбор времени при выборе дат” при генерации кода основной страницы бронирования.

## Примеры грамотно настроенных модулей бронирования наших клиентов

Демо:

[http://demo.ecvi.ru/form\_example/index.html](http://demo.ecvi.ru/form_example/index.html)

Сайты отелей:

[https://otdih-v-astrakhani.ru/](https://otdih-v-astrakhani.ru/)

[https://ayvengo45.ru/online-booking](https://ayvengo45.ru/online-booking)

[https://port-inn.ru/en/booking](https://port-inn.ru/en/booking)

# Подключение системы обработки платежей Яндекс.Касса

Для того, чтобы дать возможность гостю оплатить заявку в режиме онлайн (с использованием банковских карт, яндекс.денег и пр.), у вас есть возможность подключить форму к платежной системе Яндекс.Касса. Для этого необходимо выполнить следующие действия.

- Нужно [подать заявку](https://money.yandex.ru/joinups/?source=ecvi) на подключение Кассы и зарегистрироваться в личном кабинете.
- Заполнить [анкету об организации и ее представителях](https://yandex.ru/support/checkout/merchant/docs.html). На основе анкеты Яндекс.Касса сформирует договор — его нужно скачать, подписать и отправить в Яндекс скан.
- Заполнить [технические настройки](https://yandex.ru/support/checkout/merchant/tech.html) и провести интеграцию, указав следующие параметры в личном кабинете яндекс кассы: указать URL для уведомлений (рис.15) -
- Там же необходимо скопировать shopId и ключ API (token)(рис.16), которые необходимо вставить в соответсвующие поля настроек модуля бронирования в систему (рис.17).

Рис.15  
  
![](https://help.edelink.ru/uploads/images/gallery/2026-02/embedded-image-7dchxctp.png)

![](https://help.edelink.ru/uploads/images/gallery/2026-02/embedded-image-igkvjpoi.png)Рис.16

![](https://help.edelink.ru/uploads/images/gallery/2026-02/embedded-image-cywb2etq.png)Рис.17

# Подключение системы обработки платежей через Сбербанк

Для того, чтобы дать возможность гостю оплатить заявку в режиме онлайн с использованием банковских карт, у вас есть возможность подключить форму к платежной системе платежей Сбербанка. Для этого необходимо выполнить следующие действия.

1. Подключить эквайринг сбербанка [https://securepayments.sberbank.ru/wiki/doku.php/start](https://securepayments.sberbank.ru/wiki/doku.php/start)
2. Получить логин/пароль от боевого личного кабинета торговой точки [https://securepayments.sberbank.ru/mportal3/auth/login](https://securepayments.sberbank.ru/mportal3/auth/login)
3. Из данного кабинета написать в службу тех.поддержки сбербанка и прислать им следующий текст “Здравствуйте, просим прислать нам данные для перехода из тестового режима в рабочий 1. Боевой токен для аутентификации 2. боевой закрытый ключ. 3. боевой логин и пароль для API. Наш url для уведомлений обратного вызова https://cm.web-booking.ru/kassa/sberbank/check “
4. Сообщить в нашу тех.поддержку ваш логин/пароль для подключения API сбербанка, а также ответ тех.поддержки со всеми токенами, ключами.

# Подключение системы обработки платежей CloudPayments

Для того, чтобы дать возможность гостю оплатить заявку в режиме онлайн с использованием банковских карт, у вас есть возможность подключить форму к платежной системе платежей CloudPayments. Для этого необходимо выполнить следующие действия.

1. Зарегестрироваться на сайте [https://cloudpayments.ru/](https://cloudpayments.ru/)
2. Заполнить анкету Юр.лица и заключить договор cloudPayments
3. В личном кабинете cloudPayments необходио в разделей сайты добавить сайт с адресом [https://cm.web-booking.ru](https://cm.web-booking.ru)![](https://help.edelink.ru/uploads/images/gallery/2026-02/embedded-image-vapxpujk.png)
4. После этого перейдите в настройка созданного сайта, отметьте галочку “Pay уведомления”. Для уведомлений пропишите следующий адрес: [https://cm.web-booking.ru/kassa/cloudpayments/pay](https://cm.web-booking.ru/kassa/cloudpayments/pay) не забудьте включить боевой режим для сайта.![](https://help.edelink.ru/uploads/images/gallery/2026-02/embedded-image-5xrwhmd5.png)
5. Там же можно скопировать public ID, который необходимо прописать уже в нашей системе в разделе Администрирование->настройка модуля бронирования->Выбор и настройки платежной системы [https://cm.web-booking.ru/backend/manage/bookingsettings](https://cm.web-booking.ru/backend/manage/bookingsettings)
6. Не забудьте также в настройках модуля бронирования отметить галочки “Заносить оплату на счет” и “Создать уведомление в системе“

### Кассовые чеки и требования 54-ФЗ

Также следует учитывать, что для выполнения требований 54-ФЗ (правил проведения платежей) все оплаты должны проводиться по онлайн-кассе. Яндекс.Касса предлагает дополнительные возможности по передаче данных о произведенном платеже в арендованную у их партнеров онлайн-кассу. Подробнее об этом способе оформления платежей можно прочитать по ссылке:

[https://yandex.ru/support/checkout/merchant/online-sales-register.html](https://yandex.ru/support/checkout/merchant/online-sales-register.html)

Данные для формирования чека таким образом форма бронирования (HMA Ecvi) в Яндекс.Кассу передает. Включить передачу чека через Яндекс.Кассу, указать наименование услуги, которая будет фигурировать в электронном чеке, а также ставку НДС следует в разделе Администрирование - Отель - Настройка модуля бронирования:

![](https://help.edelink.ru/uploads/images/gallery/2026-02/embedded-image-s7hxgxw9.png)

В качестве альтернативы вы можете вручную оформлять данные платежи на своем кассовом аппарате.

После выполнения этих шагов можно принимать платежи.