Как интегрировать модуль бронирования на сайт гостиницы

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

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

Сегодня расскажем, почему этот процесс важен, какие есть особенности интеграции, и ответим на часто задаваемые вопросы.

Модуль бронирования — это специальный инструмент, который встраивается в сайт отеля, чтобы гости могли найти и забронировать проживание. Модуль состоит из двух форм: поиск и бронирование.

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

2. Форма бронирования — это отдельная страница или модальное окно, где гость выбирает номер, тариф, услуги, способ оплаты и вводит свои данные. Она выглядит как плитка с описанием категорий и фотографиями.

У всех частей модуля бронирования есть технические названия, которые мы используем в работе. Это элементы формы поиска:

А это основные элементы формы бронирования:

Модуль бронирования — это отдельный элемент, которого нет на сайте по умолчанию. Чтобы модуль работал бесшовно, нужно его интегрировать. Так он станет частью сайта.

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

За функциональность интеграции формы отвечает целая команда: девять frontend-разработчиков, три дизайнера, два специалиста по качеству программного обеспечения. Все они следят, чтобы форма бронирования гостиницы выглядела как полноценная часть сайта и бесшовно встраивалась в него.

Мы постоянно анализируем эффективность модуля TravelLine, чтобы наши клиенты гарантированно получали бронирования. Даже цвет кнопки может повлиять на конверсию! Например, на схеме ниже видно, в какой части экрана форма поиска работает эффективнее всего: чем ярче зеленый цвет, тем больше кликов.

Когда приходит заявка на интеграцию модуля бронирования, назначается менеджер, который будет работать с клиентом. Он присылает клиенту коммерческое предложение с описанием процесса интеграции, примерами внешнего вида модуля бронирования. После этого менеджер переходит к составлению ТЗ — технического задания.

Для грамотного ТЗ менеджер задает клиенту вопросы:
1. Какой пример понравился клиенту?
2. Есть ли у отеля брендбук?
3. Как клиент хочет расположить формы?
4. Нужны ли дополнительные кнопки?

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

Если нужно, чтобы модуль предлагал разные объекты сети отелей или управляющих компаний, то менеджер включает эту информацию в ТЗ. Эта возможность реализуется через табы — возможность переключения между объектами в модуле. А еще на табах можно реализовать разные типы модуля бронирования: для проживания, услуг, сертификатов.

Вот что делает дизайнер:

1. Подбирает максимально конверсионное положение формы поиска и формы бронирования.

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

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

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

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

Форма бронирования гостиницы может открываться в модальном окне или на отдельной странице. Модальная форма особенно подходит одностраничным сайтам.

На этом этапе скрываются:
— сторонние формы бронирования, чтобы брони поступали через одну форму;
— социальные сети на странице бронирования;
— jivo-чаты, консультанты и другие всплывающие виджеты на странице бронирования.

Добавляются:
— seo-заголовки главной страницы и страницы бронирования для максимального привлечения поисковых систем;
— уникальный идентификатор для каждого номера, чтобы кнопка «Забронировать» вела сразу на нужную категорию.

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

Если после тестирования мы нашли ошибки или получили правки от клиента, то на этом этапе мы все исправляем. А еще, например, если через год после интеграции в отеле изменился брендбук, то мы можем поправить тексты на кнопках, жирность текста, шрифт, цвет баннера и многое другое.

1. Я хочу, чтобы модуль бронирования был салатовым, а кнопки желтыми. Можно?

К сожалению, нет. Наша главная задача — сделать модуль частью сайта, сделать его конверсионным. Чтобы модуль подходил по дизайну и приносил брони, мы тщательно подбираем цвета и проверяем внешний вид модуля по регламенту WCAG (Web Content Accessibility Guidelines). Это руководство по доступности веб-контента, в котором прописано, как сделать веб-контент более доступным для людей с ограниченными возможностями.

2. Сотрудники TravelLine просят дать доступы к сайту, чтобы интегрировать модуль. Это безопасно?

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

Чтобы вы не беспокоились, что все сломается, перед интеграцией создается резервная копия страниц, на которые вносятся изменения. Если что-то пойдет не так, то можно откатить, как было до интеграции, и ничего не потеряется.

3. Мы дадим вам доступы к сайту для интеграции, может, вы сразу и фотки нам поправите?

Нет, на сайте проводится только интеграция модуля. Сопровождением сайта мы не занимаемся.

Если ваш сайт на CMS Битрикс, то вы можете обратиться за сопровождением к нашим партнерам.

4. Как обновления модуля появляются у нас, если мы не настраивали их вручную на сайте?

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

5. Мы хотим сами интегрировать модуль бронирования. Можно?

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

6. Модуль бронирования можно установить на любой сайт-конструктор?

Мы точно без проблем устанавливаем модуль на эти конструкторы сайтов: Beeline, Craftum, Creatium, Flexbe, Google Business, LP, LPmotor, Tilda, VK Link, Webflow, WIX, Тинькофф и Яндекс Бизнес. Возможности конструкторов, которых нет в этом списке, мы изучаем по запросу.

7. Можно изменить шрифт в модуле бронирования?
Да, но только на шрифты от Google Fonts.