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