Skip to main content

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

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

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


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


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


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

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

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


Рис. 9


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


Код виджета

Рис . 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 стили уже существующего файла.

#YourID {

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

}

#ecvi-booking-container {

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

    overflow-y:scroll;

}

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

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

Рис. 11


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


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


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

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

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

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


Рис. 12


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


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


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

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

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

Второй: 

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

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

bookingPath: ‘www.myhotel.com/bronirovanie‘

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

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

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

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

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

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

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


Рис. 12

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

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


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


Демо:

http://demo.ecvi.ru/form_example/index.html


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

https://otdih-v-astrakhani.ru/

https://ayvengo45.ru/online-booking 

https://port-inn.ru/en/booking



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

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

  • Нужно подать заявку на подключение Кассы и зарегистрироваться в личном кабинете.

  • Заполнить анкету об организации и ее представителях. На основе анкеты Яндекс.Касса сформирует договор — его нужно скачать, подписать и отправить в Яндекс скан.

  • Заполнить технические настройки и провести интеграцию, указав следующие параметры в личном кабинете яндекс кассы: указать URL для уведомлений (рис.15) - 

  • Там же необходимо скопировать shopId и ключ API (token)(рис.16), которые необходимо вставить в соответсвующие поля настроек модуля бронирования в систему (рис.17).


Рис.15

Рис.16

Рис.17





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


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


  1. Подключить эквайринг сбербанка https://securepayments.sberbank.ru/wiki/doku.php/start

  2. Получить логин/пароль от боевого личного кабинета торговой точки 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/

  2. Заполнить анкету Юр.лица и заключить договор cloudPayments

  3. В личном кабинете cloudPayments необходио в разделей сайты добавить сайт с адресом https://cm.web-booking.ru

  4. После этого перейдите в настройка созданного сайта,  отметьте галочку “Pay уведомления”. Для уведомлений пропишите следующий адрес: https://cm.web-booking.ru/kassa/cloudpayments/pay не забудьте включить боевой режим для сайта.

  5. Там же можно скопировать public ID, который необходимо прописать уже в нашей системе в разделе Администрирование->настройка модуля бронирования->Выбор и настройки платежной системы https://cm.web-booking.ru/backend/manage/bookingsettings

  6. Не забудьте также в настройках модуля бронирования отметить галочки “Заносить оплату на счет” и “Создать уведомление в системе“



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


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

https://yandex.ru/support/checkout/merchant/online-sales-register.html

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



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


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




Back to top