07 февраля 2024

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

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

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

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

Анастасия Федякова
Руководитель отдела frontend-разработки

Что такое модуль бронирования

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

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

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

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

Зачем интегрировать модуль бронирования

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

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

Кто занимается интеграцией

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

Что влияет на конверсию

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

Этапы интеграции

1. Первое касание с клиентом

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

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

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

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

2. Дизайн

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

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

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

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

3. Интеграция

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

Форма поиска может быть стандартной и в виде виджет-кнопки. Стандартная показывает выбор дат заезда, выезда и количество гостей на первом экране и встраивается в сайт. Виджет-кнопка сохраняет положение при скролле и устанавливается поверх контента. Выбор формата формы поиска зависит от технических возможностей сайта.
Как интегрировать модуль онлайн-бронирования TL: Booking Engine
Форма бронирования гостиницы может открываться в модальном окне или на отдельной странице. Модальная форма особенно подходит одностраничным сайтам.
Интеграция формы онлайн-бронирования TL: Booking Engine
На этом этапе скрываются:
— сторонние формы бронирования, чтобы брони поступали через одну форму;
— социальные сети на странице бронирования;
— jivo-чаты, консультанты и другие всплывающие виджеты на странице бронирования.

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

4. Тестирование интеграции

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

5. Постинтеграция

Если после тестирования мы нашли ошибки или получили правки от клиента, то на этом этапе мы все исправляем. А еще, например, если через год после интеграции в отеле изменился брендбук, то мы можем поправить тексты на кнопках, жирность текста, шрифт, цвет баннера и многое другое.
Модуль бронирования TravelLine красиво и органично адаптируется под любой сайт, становится его полноценной частью. Вы подбираете индивидуальные скрипты под сайт, и модуль гладенько в него вписывается. Мы заинтересованы в том, чтобы гостю понравилось бронировать на сайте. Прямая связь: чем удобнее, проще и красивее гостю, тем больше мы зарабатываем.
Ольга Калмыкова
Менеджер по бронированию в Arkhyz Family Club

Частые вопросы про интеграцию

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.
Модуль бронирования — это сердце онлайн-продаж. Без него никак.

Подключите модуль бронирования от TravelLine со встроенной программой лояльности для гостей, чтобы сделать сайт главной площадкой продаж.
Редактор: Диля Галлямова.
Упоминая в этой публикации Meta, Facebook и Instagram, сообщаем, что они признаны экстремистскими организациями
и их деятельность запрещена на территории РФ.

Похожие статьи

Что должен уметь модуль бронирования

Собрали шесть важных функций модуля бронирования, которые делают его идеальным и повышают продажи....
, | 15 февраля 2023

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

Рассказали, как разные элементы работают в модуле бронирования, и покажем все на примере нашей формы...
, , | 11 мая 2023

Воронка продаж: 4 шага к аналитике через модуль бронирования TravelLine

Если вы запускаете платную рекламу, то воронка поможет рассчитать стоимость брони — сколько вы потра...
, , | 09 марта 2023

Искусство бронирования: как сэкономить время и деньги при выборе отеля

Собрали подробную инструкцию, как забронировать отель в России, чтобы это было выгодно и быстро....
, | 26 июля 2023

Бесплатные услуги в гостинице: что к ним относится

В статье разбираемся в бесплатных услугах: какие обязательны, а какие стоит включить без доплаты, чт...
, , | 20 мая 2024

Как повысить продажи услуг и средний чек в гостинице

В статье рассказали, что такое средний чек гостиницы, как его рассчитать и увеличить. Плюс 10 кейсов...
, | 16 мая 2024

Подпишитесь на блог TravelLine

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