Как вставить виджет бронирования на сайт отеля
Чтобы вставить виджет бронирования на сайт отеля, откройте «Управление» → «Настройки» → «Виджет бронирования», выберите один из четырёх вариантов кода (полный iframe, компактный iframe, кнопка-ссылка или popup), нажмите «Копировать» и вставьте код в HTML-блок своего сайта. Цвет кнопок подбирается там же под фирменный стиль.
Виджеты в модуле онлайн-бронирования
Зачем нужен виджет бронирования? Это форма, которую гость видит на сайте вашего отеля и через которую делает бронирование самостоятельно, без звонков. Вы вставляете готовый код на свой сайт, и всё — гости могут бронировать в любое время суток.
Чтобы виджет органично смотрелся на вашем сайте, важно настроить его цвет под фирменный стиль отеля. В этой статье разберём, как выбрать цвет кнопок и получить код для вставки.
Шаг 1. Откройте раздел настроек виджета
Перейдите в раздел Управление → Настройки и выберите вкладку Виджет бронирования.
Здесь вы увидите:
- Цвет кнопок виджета — выбор основного цвета
- Набор готовых цветов на выбор
- Кнопку предпросмотра, которая сразу показывает, как будет выглядеть кнопка «Найти номера»
Шаг 2. Выберите цвет кнопок
Нажмите на цветной квадрат слева или введите код цвета в поле (#RRGGBB). Можно также выбрать один из шести готовых цветов в правом ряду.
Под полем выбора сразу появится предпросмотр — синяя (или выбранная) кнопка «Найти номера» покажет, как виджет будет выглядеть на сайте гостя.
Когда цвет подобран — нажмите Сохранить цвет. Изменение применяется к виджету мгновенно.
Совет: выберите тот же цвет, что используется в логотипе или шапке вашего сайта. Гость увидит единый стиль и больше доверяет такому сайту.
Шаг 3. Выберите способ размещения виджета
Ниже на той же странице находятся четыре варианта кода для вставки:
| Вариант | Когда подходит |
|---|---|
| Вариант 1 · Полный iframe | Отдельная страница «Бронирование» на вашем сайте |
| Вариант 2 · Компактный iframe | Боковая колонка страницы |
| Вариант 3 · Кнопка-ссылка | Соцсети, email-подписи, письма гостям |
| Вариант 4 · Popup-окно | Маленький сайт, где нет места для iframe |
Напротив каждого варианта есть кнопка Копировать — нажмите её и вставьте код в нужное место вашего сайта.
Шаг 4. Проверьте виджет глазами гостя
После вставки кода на сайт — откройте страницу и убедитесь, что виджет работает. Вы также можете использовать кнопку «Открыть виджет» прямо в настройках, чтобы увидеть его в отдельной вкладке.
Гость видит: название отеля, поля для выбора дат и гостей, кнопку «Найти номера». После нажатия — список доступных номеров, форму данных и подтверждение.
На заметку
- Три ссылки в шапке настроек помогут проверить виджет: «Открыть виджет», «Предпросмотр iframe» и «Раздаваемый snippet».
- Если у вас ещё нет сайта — в Hotel OS2 есть встроенный конструктор сайтов, виджет бронирования в него уже включён.
- Ссылку на виджет можно вставить в кнопку меню вашего Telegram-бота, чтобы гости бронировали прямо из мессенджера.
Частые вопросы
Как изменить цвет виджета, если он уже был настроен раньше? Зайдите в Управление → Настройки → Виджет бронирования, выберите новый цвет и нажмите «Сохранить цвет». Изменение применяется сразу.
Можно ли использовать несколько вариантов виджета одновременно? Да. Никто не запрещает разместить, например, полный iframe на странице «Бронирование» и кнопку-ссылку в шапке сайта. Коды независимы.
Подходит ли виджет для мобильных устройств? Да, виджет адаптирован под смартфоны — он корректно отображается на экранах любого размера.
Почему важно нажимать «Сохранить цвет» после выбора? Пока вы не нажмёте кнопку, цвет сохранён только в предпросмотре на экране. Нажмите «Сохранить цвет», чтобы гости увидели изменение.
Что такое UTM-метка в кнопке-ссылке? Это специальный маркер в адресе ссылки. Он позволяет в системе аналитики отличить, откуда пришёл гость — через кнопку на сайте, из письма или из другого места.
4 варианта кода виджета — какой выбрать
| Вариант | Где ставить | Что видит гость |
|---|---|---|
| Полный iframe | Отдельная страница «Бронирование» | Весь процесс брони прямо на странице |
| Компактный iframe | Боковая колонка, главная страница | Поля дат и гостей, кнопка «Найти номера» |
| Кнопка-ссылка | Соцсети, подпись письма, мессенджеры | Кнопка, которая открывает бронирование в новой вкладке |
| Popup-окно | Небольшой сайт без места под форму | Форма открывается поверх страницы |
Варианты можно сочетать: например, полный iframe на странице «Бронирование» и кнопку-ссылку в шапке сайта — коды независимы.
Как вставить код на Tilda, WordPress и свой сайт
Tilda. Добавьте на страницу блок «HTML-код» (T123), вставьте скопированный код и опубликуйте страницу. Для кнопки-ссылки можно не вставлять код, а указать ссылку из настроек в обычной кнопке Tilda.
WordPress. В редакторе страницы добавьте блок «Произвольный HTML» и вставьте код. Если тема режет iframe, используйте вариант «Кнопка-ссылка». Подробная инструкция — модуль бронирования на WordPress.
Свой сайт. Передайте код разработчику: он вставит его в HTML нужной страницы в то место, где должна появиться форма или кнопка.
Если сайта нет совсем, используйте встроенный конструктор сайтов Hotel OS2 — виджет в нём уже стоит.
Виджет в соцсетях и мессенджерах
В соцсетях и мессенджерах iframe не вставить, поэтому используйте кнопку-ссылку:
- Telegram — поставьте ссылку на виджет в кнопку меню бота или в закреплённое сообщение канала;
- ВКонтакте — в кнопку действия сообщества или в меню; подробнее — бронирование отеля во ВКонтакте;
- подпись письма и автоответы — та же ссылка в тексте «Забронировать номер».
Гость попадает в тот же модуль бронирования с теми же ценами, а бронь сразу встаёт в шахматку.
Как проверить виджет глазами гостя
- Нажмите «Открыть виджет» в настройках — он откроется в отдельной вкладке.
- Проверьте «Предпросмотр iframe», чтобы увидеть, как форма выглядит на странице.
- Откройте свой сайт с телефона: виджет адаптирован под смартфоны, но тесная колонка сайта может его сжать.
- Пройдите бронь до шага подтверждения на реальные даты и убедитесь, что видны нужные тарифы и цены.
Если тариф не появляется, проверьте его по чек-листу почему тариф не виден в модуле бронирования.
Частые вопросы
Где взять код виджета бронирования?
В «Управление» → «Настройки» → «Виджет бронирования»: напротив каждого из четырёх вариантов есть кнопка «Копировать».
Можно ли поставить несколько виджетов на один сайт?
Да, коды независимы: например, полный iframe на странице бронирования и кнопку-ссылку в шапке.
Работает ли виджет бронирования на телефоне?
Да, виджет адаптирован под смартфоны. Проверьте только, чтобы колонка сайта, куда вы его вставили, не была слишком узкой.
Как вставить виджет бронирования на Tilda?
Добавьте блок «HTML-код» (T123), вставьте скопированный код виджета и опубликуйте страницу.
Читайте также
Эта статья была полезна?