1. Отель
  2. Прямые продажи
Прямые продажи
Мини-сайт Виджет

Виджет

С помощью виджета Контур.Отеля гости смогут искать свободные номера и бронировать их прямо у вас на сайте. Виджет умеет:

  • Искать свободные номера по заданным датам и количеству человек в бронировании. Если для всех гостей нужно несколько номеров, виджет предложит нужное количество.
  • Показывать результаты поиска во всплывающем окне без перезагрузки страницы.
  • Бронировать номера напрямую из результатов поиска.
  • Автоматически регистрировать бронирования в Контур.Отеле.

Нажмите, чтобы открыть картинку с примером виджета на сайте

Какие блоки можно вставить на сайт

Форма бронирования (обязательный блок)

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

  • Вертикальный вариант (ширина 278 пикселей).
  • Горизонтальный вариант (ширина 848 пикселей).

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

Список доступных номеров (необязательный блок)

Блок, в котором отображаются данные обо всех номерах, привязанных к виджету в настройках Контур.Отеля.

Список «принимает» ширину блока, в который он вставляется. Отрегулируйте ширину контейнера для этого блока так, чтобы текст не сильно сжимался и не сильно растягивался. Оптимальной шириной можно считать диапазон от 950 до 1200 пикселей.

  • При нажатии на фото доступен просмотр фотографий, загруженных к номеру в Контур.Отеле.
  • При нажатии на кнопку «Проверить наличие» гость сможет проверить наличие этого номера на определенные даты.

Как подключить виджет

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

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

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

  2. Создайте код виджета. Для этого:
    1. В разделе «Сайт» в правом блоке «Виджет» нажмите «Открыть настройки».
    2. Укажите адреса сайтов, на которых планируете размещать виджет. Виджет будет работать только на указанных в настройках сайтах.
    3. Выберите тип виджета сразу или разработчик вашего сайта может определить нужную форму виджета во время настройки его работы на сайте.
    4. Скопируйте код виджета и передайте его разработчику сайта со ссылкой на данную инструкцию.
    5. Сохраните настройки.
  3. Вставьте код виджета на сайт. Рекомендуем обратиться за помощью к разработчикам сайта, предоставив им ссылку на данную инструкцию.

Как добавить виджет с помощью конструктора Wix

Если сайт гостиницы создан с помощью конструктора WIX, встроить на него виджет можно с помощью HTML-элемента.

  1. Выберите категории номеров и тарифы, которые будут размещаться на сайте через виджет. Для этого перейдите в раздел «Сайт», в левый блок «Настройки».
  2. Создайте код виджета. Для этого в разделе «Сайт» в правом блоке «Виджет» нажмите «Открыть настройки».
  3. Укажите адрес сайта, на котором планируете размещать виджет.Обратите внимание, что сайты, сконструированные на платформе Wix, обращаются к серверам Контур.Отеля через окружение. Поэтому помимо основного адреса вашего сайта необходимо прописать дополнительный, с которого будут поступать запросы виджету.Чтобы восстановить адрес окружения, нужно:
    • в адресе вашего сайта заменить все точки на дефисы;
    • приписать в конце.filesusr.com.
  4. Выберите тип виджета (вертикальный или горизонтальный блок).
  5. Скопируйте код виджета по кнопке «Скопировать код».
  6. Нажмите «Сохранить».

Перейдите в редактор вашего сайта в Wix.

  1. Откройте редактирование страницы, на которой планируется разместить виджет.
  2. В колонке элементов слева нажмите на знак «+» (кнопка «Добавить»), затем «Вставка» → «Вставка кода» → «HTML iframe».
  3. В открывшемся HTML-фрейме нажмите «Вставить код» и выберите «Код». Поле «Добавьте код» необходимо заполнить следующим образом:
    1. Пропишите первые две строки:

      Названия элементов id и class после знака "=" нужно указывать без кавычек.

      <body><div id=WidgetId>
      Пояснение: id – уникальный атрибут контейнера, который позволяет отличить его от других контейнеров в коде. Вместо WidgetId укажите любое имя, состоящее из латинских букв и цифр.
    2. Вставьте код, который скопировали из Контур.Отеля.
    3. В этом коде найдите строчку:container: “WidgetId”и слово WidgetId замените на уникальное имя, которое вы указали во второй строчке.
    4. В конце кода добавьте еще две строки:</div>
      </body>
    5. Нажмите «Применить».
    В результате код должен выглядеть примерно следующим образом:
  4. Выровняйте созданный фрейм по ширине страницы и расположению. Важные моменты:
    • Виджет не отображается при предпросмотре в редакторе.
    • Из-за особенностей использования HTML-iframe окно бронирования будет ограничено размерами фрейма, которые вы установите в редакторе. Если размеры окна бронирования окажутся больше, чем размеры HTML-элемента в редакторе, то появятся дополнительные ползунки.Сам виджет при этом может вмещаться на страницу:
      А окно с доступными в результате поиска номерами будет выглядеть так:
      Чтобы убрать горизонтальный ползунок, необходимо установить ширину фрейма не менее 1034 пикселей. Вертикальный ползунок можно убрать, растянув элемент «с запасом» (например, так, чтобы укладывались все категории) — однако если под виджетом ничего не будет, на странице может образоваться пустое поле.
    • Чтобы выровнять виджет по центру в верху фрейма, вторую строчку в коде нужно изменить так:
      <div id=”WidgetId”; align=”center”>
      Чтобы выровнять виджет по правому верхнему углу:
      <div id=”WidgetId”; align=”right”>По умолчанию виджет помещается в левый верхний угол фрейма. Если нужно, чтобы виджет имел другое расположение, допишите ко второй строчке аргумент align.
    • Границы фрейма в редакторе могут пересекаться с другими элементами на странице. Чтобы в процессе бронирования окно с доступными номерами было поверх других элементов, переместите фрейм на передний план (клик по фрейму правой кнопкой мыши/Переместить/На передний план):
  5. Опубликуйте сайт и проверьте, что все отображается корректно.
  6. После настройки компьютерной версии не забудьте настроить отображение виджета в мобильных устройствах. Если какие-то кнопки виджета съезжают, попробуйте расширить фрейм до максимально возможного.

Настройка виджета

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

Общие моменты

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

Стили виджета

Установлен класс на контейнер кнопки, поскольку классы на самой кнопке мы не контролируем (React UI):

  • Для кнопки в списке комнат этот класс называется WidgetCardPriceButtonContainer.
  • Для кнопки на форме поиска этот класс называется WidgetBookingControlButtonContainer.
  • Для кнопки на форме бронирования этот класс называется WidgetBookingFormButtonContainer.
  • Для кнопки в выборе количества гостей — WidgetGuestSelectControlButtonContainer.
  • Для кнопки +/- в выборе количества гостей — WidgetNumberInputButton.

Описание полей настроек

Поле Тип значения По умолчанию Описание
id string – ID организации (проставляется в настройках виджета автоматически).
type «verticalBlock», «horizontalBlock» – Тип формы для поиска бронирования: вертикальный или горизонтальный.
form.container string, HTMLDomElement – Контейнер для вставки формы поиска бронирований: ID элемента или ссылка на его DOM-элемент.
form.insert «before», «after» «after» Тип вставки формы: до или после контента внутри контейнера. По умолчанию вставляется в конец контейнера.
roomsList.container string, HTMLDomElement – Контейнер для вставки списка доступных номеров для бронирования: ID элемента или ссылка на его DOM-элемент.
roomsList.insert «before», «after», «replace» «after» Тип вставки списка номеров: до, после или вместо контента внутри контейнера. По умолчанию вставляется в конец контейнера.
hooks BookingHooks – Хуки — функции, которые могут быть вызваны на различные события виджета.

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

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

Поле Тип значения Описание
hooks.onBooking function Функция, вызываемая после оформления бронирования. В аргумент этой функции будет передан массив бронирований. Каждый забронированный номер или кровать = 1 бронированию. Если было забронировано 3 номера, в аргументе будет информация о 3 бронированиях. См. описание объекта бронирования с типом Booking ниже.
hooks.onError function Функция, вызываемая при возникновения ошибки. Принимает аргумент типа Error.
hooks.onOldBrowser function Функция вызывается, если у пользователя браузер IE < 9. В этом случае виджет не показывается.
hooks.onInit function Функция вызывается после успешной инициализации виджета.

Объект события BookingEvent

Хук onBooking принимает аргумент типа BookingEvent. Вы можете использовать эту функцию, чтобы отметить выполнение цели Яндекс.Метрики или Google.Analytics.

type onBooking = (booking: Booking [] => void;

Поля объекта Booking:

Поле Тип значения Описание
id string Уникальный ID бронирования, присвоенный в системе Контур.Отель.
price float Стоимость бронирования.
prepayment float Предоплата по бронированию.
fromDate string Дата «от» в формате дд.мм.гггг.
toDate string Дата «до» в формате дд.мм.гггг.
adultsCount int Кол-во взрослых в бронировании.
kidsCount int Кол-во детей** в бронировании.
roomCategory string Название категории номера.
customer BookingCustomer Контактные данные о клиенте.
comment string Текстовый комментарий клиента в свободной форме.

** Кол-во детей в возрасте, установленном для бесплатного заселения в настройках Контур.Отеля.

*** Указана расчетная предоплата по тарифу, а не фактически полученная от клиента. Учитывайте, что даже если онлайн-оплата включена, это не гарантирует получение указанной суммы предоплаты по разным, не зависящим от нас, причинам.

Поля объекта BookingCustomer

Поле Тип значения Описание
fio string ФИО клиента
phone string Номер телефона
email string E-mail

Настройка виджета Вконтакте

Чтобы создать приложение vk.com и встроить модуль онлайн-бронирования на страничку вашего отеля:

  1. Авторизуйтесь в сети vk.com.
  2. Перейдите по ссылке https://vk.com/apps?act=manage.
  3. Нажмите «Создать приложение».
  4. Откроется форма:
    1. В названии укажите название приложения, например, название вашей гостиницы.
    2. В платформе выберите «Vk mini Apps».
    3. Тип выберите «Приложение сообщества».
    4. Категория «Путешествия».
  5. Нажмите «Перейти к загрузке приложения», vk предложит подтвердить действия sms-сообщением с кодом или через приложение.
  6. После подтверждения откроется страница с настройками приложения.
  7. В разделе «Информация» проверьте и заполните поля следующим образом:
    1. Название кнопки в сообществах: Забронировать.
    2. Название кнопки в сниппете: Открыть.
    3. Группа приложения: выберите группу вашей гостиницы (вы должны быть администратором группы).
    4. Иконка 32х32: нажмите «Выбрать файл», чтобы выбрать иконку (если у вас есть официальный сайт гостиницы, то можно использовать иконку с сайта).
    5. Страница помощи: по умолчанию отключена, при включенной странице гость над приложением будет видеть раздел «Помощь», при переходе на которую гость увидит ваш текст (например, инструкцию с правилами оформления бронирования).
  8. В разделе Настройки проверьте и заполните поля следующим образом:
    1. Состояние — «Приложение включено и видно всем».
    2. URL в блоке «Версия для мобильных клиентов» — это адрес приложения из раздела «Продажи» → «Бронирования с сайта» → ссылка на сайт в Контур.Отеле.
    3. URL в блоке «Версия для vk.com» — это адрес приложения из раздела «Продажи» → «Бронирования с сайта→ ссылка на сайт в Контур.Отеле.
    4. Размер окна сервиса в блоке «Версия для vk.com» — 795x800.
    5. URL в блоке «Версия для m.vk.com» — это адрес приложения из раздела «Продажи» → «Бронирования с сайта→ ссылка на сайт в Контур.Отеле.
  9. Нажмите «Сохранить изменения». Если все настройки произведены в соответствии с инструкцией, то модуль автоматически добавится на страничку отеля vk.

Когда виджет не работает

Возможные ошибки при работе с виджетом
Ошибка в консоли Как исправить

«You have a problem with access to the widget service.
Check widget settings and widget option availability for your organization.»

«Failed to load resource: the server responded with a status of 400 ()

У виджета нет доступа к настройкам отеля. 

В разделе «Сайт» в правом блоке «Виджет» нажмите «Открыть настройки». Укажите адреса сайтов, на которых будет размещен виджет.
Widget.js:51 Provided «form.container» field have correct type but not found in DOM

Id контейнера, который указывает пользователь не найден.

Укажите ID контейнера, который входит в DOM в код.

Как встроить виджет в SPA-приложения (React, Vue, Angular)?

Отправьте инструкцию ниже и файл «initWidget.js» разработчику сайта. Скачать файл initWidget.js.

  1. На страницу index.html разместить скрипт для загрузки виджета: 

    
<script type="text/javascript" src="https://bookonline24.ru/widget.js" />.

  2. В нужном компоненте, где будет располагаться сам виджет, нужно вставить функцию из файла «initWidget.js».
  3. Произвести вызов данной функции после рендеринга компонента.
    Например, для React это либо используя хук React.useEffect(() => initWidget({...}), []), либо в componentDiDMount).
    При вызове функции передать ей параметры, как указано ниже:
      
    
initWidget({
    id: "тут ввести ID организации из настроек скрипта в К.Отеле (id в скрипте)",
    type: "horizontalBlock",
    form: {
        container: "KonturWidget", // Замените ID элемента для виджета здесь
        insert: "before"
    }
});

База знаний