Уважаемые пользователи! Если не нашли ответ на свой вопрос в базе знаний, пожалуйста, напишите нам на почту support@ecvi.ru
Skip to main content

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

HMA Ecvi имеет свою форму бронирования, которую можно интегрировать в сайт отеля и предоставить гостям бронировать и оплачивать номера(места) в режиме онлайн.

HMA Ecvi: предварительные настройки

Канал бронирования

Для Экви форма бронирования является, по сути, еще одним “каналом продаж”, как и например стыковка с booking.com. Поэтому прежде всего в разделе Администрирование - Отель - Веб-каналы должен быть включен необходимый канал.

image.png
Рис. 1


Как правило, канал создается и активируется по вашему запросу службой технической поддержки через почту support@ecvi.ru

Типы ресурсов

Все типы ресурсов (типы комнат, коек, коттеджей и т.п.), которые вы хотите представлять в форме на сайте, должны иметь определенные настройки в своих свойствах  в разделе Администрирование - Отель - Типы ресурсов - кнопка image.png Редактировать, в обязательном порядке должны быть указаны следующие параметры:

  • Число основных мест в номере;

  • Переключатель Экспорт установлен в положение активно.

image.png
Рис. 2

Дополнительно можно указать:

  • Дополнительных мест (общая вместимость номера будет рассчитана как сумма основных и дополнительных мест);
  • Общую площадь номера;
  • в разделе image.png Дополнительные параметры описания типа ресурса, а также можно задать Порог предупреждения - параметр, определяющий минимальное оставшееся число номеров на запрошенные гостем даты, после которого в форме бронирования будет выдаваться напоминание: “Осталось всего … номеров”.
Дополнительные опции и загрузка изображений

Для указания того, какие опции присутствуют в номере (фен, кондиционер, телевизор и т.п.), а также для загрузки галереи изображений, нажмите кнопку image.png в правом верхнем углу:

image.pngРис. 3

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

image.pngРис.4

image.png
Рис. 5

Обратите внимание, что при загрузке изображений есть ограничение на максимальный размер файла: 2 Мб. Однако для ускорения работы формы (и учитывая, что изображения всё равно масштабируются для демонстрации в небольшом окне), рекомендуем ограничить размер фотографий максимум 300-500 кб.

Тарифы и питание

image.png
Рис.6

В свойствах пакетов питания и в свойствах тарифов, которые должны быть представлены в форме бронирования, необходимо установить флажок Экспорт. Также рекомендуется ввести Полное описание, которое поможет гостю сориентироваться в услугах.

Обратите внимание, что пакеты питания следует редактировать в разделе Администрирование - Услуги - Список пакетов услуг

а тарифы - в разделе Администрирование - Услуги - Список тарифов.

Модуль бронирования

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

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


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

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

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

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

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

image.png
Рис. 9

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

Код виджета

image.png
Рис . 10


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


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

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

  • В случае, если вы управляете цепочкой отелей: есть возможность показывать только отель, для которого был сгенерирован код. Остальные отели в цепочке будут недоступны.

  • Вы можете сделать отель, для которого создаете виджет, заранее выбранным в списке.

  • Необходимо ввести абсолютный адрес страницы, где будет располагаться основная форма бронирования.

Рис. 11

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

  • Соблюсти валидность документа (html, head, body должны быть);
  • Вставить в ту часть документа, где должен располагаться ваш код, блок, например, <div id=”my_widget”></div>;
  • Сгенерированный код вставить в head или перед закрывающим тэгом body;
  • Опционально можете указать абсолютный путь к вашему css файлу. Он будет включен в отдаваемую форму.

Обратите внимание

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

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

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


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


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

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


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

3. Также вы можете просто сделать предвыбранным отель в рамках цепочки, просто выбрав соответствующую опцию, сгенерировав, сохранив код и вставив его на нужную страницу.

Английский вариант формы бронирования

Для того чтобы заработала англ. версия виджета нужно:

1. В разделе "Администрирование" отеля заполнить английские названия для тарифов, питания и названий ресурсов. Добавить описания на английском для номеров, тарифов и пакетов питания;

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

3. В html коде страницы, на которой стоит виджет (на английской версии сайта), прописать в теге <html lang="en">.

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

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

#YourID {

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

}


#ecvi-booking-container {

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

}

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

image.png
Рис. 12

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

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

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


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

image.png

Рис. 13


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


image.png

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


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

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

Второй: 

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

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

bookingPath: ‘www.myhotel.com/bronirovanie‘

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

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

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

Если у вас нет отдельной услуги с питанием, то эту информацию можно скрыть, для этого можно воспользоваться тем же css файлом, где вносили изменения в цвете и дизайне виджета.
Для начала можно скрыть блок с id  #nutrition прописав в файле #nutrition {display:none}, затем для красоты можно расширить колонку с тарифами. Пропишем там же #rate {width:200%}

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

image.png
Рис. 15

Промокоды

Настройка промокодов позволяет бронировать клиентам номера со скидкой  только на вашем сайте. Промокоды могут действовать на выбранных вами тарифах в определенный период проведения акций.
Для начала нужно создать сами промокоды, для этого перейдем в раздел Администрирование -> Услуги -> Промокоды (см. рис. 13), в этом разделе по кнопке image.png Добавить промокод можно создать новый промод, необходимо заполнить следующие поля: 

  • Наименование промокода в системе;
  • Код - промокод, который будут вводить на сайте;
  • Действителен с - до - сроки проведения акции на сайте;
  • Заезд с - до - дата заезда для которой применим промокод;
  • Скидка - размер скидки в %.

Завершающий этап настройки - для того чтобы активировать промокоды на используемых в модуле тарифах, то нужно в подразделе Список тарифов” зайти в настройки тарифа по кнопке image.png Редактировать и поставить галочку “Применять промокоды”.

Пример использования - чтобы на новогодние каникулы предоставлялась скидки для клиентов которые будут бронировать номера в начале декабря, то вам нужно указать действителен с 1 декабря до 10 декабря. Заезд с 1 января до 14 января.
Также следует учитывать, что если клиент заезжает 14 января, а выезжает 14 февраля, то клиент получить скидку на весь период проживания, так как дата заезда попадает в период проведения акции.

image.png
Рис. 16


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

Демо:

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

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

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

https://ayvengo45.ru/online-booking 

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

Подключение ЮKassa

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

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

  • Заполнить технические настройки и провести интеграцию, указав следующие параметры в личном кабинете яндекс кассы: указать URL для уведомлений (рис.17) - https://hma.ecvi.ru/kassa/yandex/paymentaviso
    Для отелей, которые используют вход в ECVI через адрес apart.ecvi.ru URL для уведомлений отличается:
    https://apart.ecvi.ru/kassa/yandex/paymentaviso

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

image.png
Рис.17

image.png
Рис.18

image.png
Рис.19

Подключение СБЕР

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


  1. Получить логин/пароль от боевого личного кабинета торговой точки https://securepayments.sberbank.ru/mportal3/auth/login

  2. Из данного кабинета написать в службу тех.поддержки сбербанка и прислать им следующий текст “Здравствуйте, просим прислать нам данные для перехода из тестового режима в рабочий  1. Боевой токен для аутентификации 2. боевой закрытый ключ. 3. боевой логин и пароль для API. Наш url для уведомлений обратного вызова https://hma.ecvi.ru/kassa/sberbank/check"
    Для отелей с адресом apart.ecvi.ru url для уведомлений обратного вызова - https://apart.ecvi.ru/kassa/sberbank/check

Дополнительные параметры не нужны; HTTP-метод - Get; Тип callback - Статический; Тип подписки - Симметричный; Только открытый ключ.

Подключение CloudPayments

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

  1. Зарегистрироваться на сайте https://cloudpayments.ru/

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

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

    image.png
    Рис.20


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

    image.png
    Рис.21

  5. Там же можно скопировать public ID, который необходимо прописать уже в нашей системе в разделе Администрирование->настройка модуля бронирования->Выбор и настройки платежной системы

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


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

Также следует учитывать, что для выполнения требований 54-ФЗ (правил проведения платежей) все оплаты должны проводиться по кассе. 

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

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

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

image.png
Рис.22

В качестве альтернативы вы можете вручную оформлять данные платежи на своем кассовом аппарате. Для этого в разделе настроек Модуля бронирования перейдите к группе параметров Настройки ОФД

Флажок Заносить оплату на счет определяет, будет ли система автоматически создавать платеж на лицевом счете гостя. В случае, если регистрируете платежи автоматически с помощью онлайн-кассы партнеров Яндекса или Сбербанка, платеж можно заносить автоматически (флажок должен быть установлен). Если вы планируете проводить платежи вручную - снимите флажок “Заносить оплату на счет”. А для того, чтобы не пропустить факт проведения гостем онлайн оплаты и знать её характеристики, вы можете установить флажки:

Создавать уведомление в системе - информация появится в списке уведомлений на иконке в верхнем правом углу рабочего экрана;

Создавать напоминание по заявке - сообщение о платеже появится в подразделе Напоминания в карточке заявки и в разделе Заявки - Напоминания.

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