Виджет
С помощью виджета Контур.Отеля гости смогут искать свободные номера и бронировать их прямо у вас на сайте. Виджет умеет:
- Искать свободные номера по заданным датам и количеству человек в бронировании. Если для всех гостей нужно несколько номеров, виджет предложит нужное количество.
- Показывать результаты поиска во всплывающем окне без перезагрузки страницы.
- Бронировать номера напрямую из результатов поиска.
- Автоматически регистрировать бронирования в Контур.Отеле.
Форма бронирования (обязательный блок)
Основной блок, через который гости могут начинать поиск бронирования.
При необходимости можно менять место установки формы на определенных страницах вашего сайта. Например, на главной странице можно разместить горизонтальную форму под красивым фото отеля. А на внутренних страницах — вертикальный блок справа от основного текста сайта.
Список доступных номеров (необязательный блок)
Блок, в котором отображаются данные обо всех номерах, привязанных к виджету в настройках Контур.Отеля.
Список «принимает» ширину блока, в который он вставляется. Отрегулируйте ширину контейнера для этого блока так, чтобы текст не сильно сжимался и не сильно растягивался. Оптимальной шириной можно считать диапазон от 950 до 1200 пикселей.
- При нажатии на фото доступен просмотр фотографий, загруженных к номеру в Контур.Отеле.
- При нажатии на кнопку «Проверить наличие» гость сможет проверить наличие этого номера на определенные даты.
Для подключения виджета оплатите подписку на модуль онлайн-бронирования в вашем тарифе. Также потребуется помощь разработчика сайта, чтобы вставить код виджета на сайт.
- Выберите категории номеров и тарифы, которые будут размещаться на сайте через виджет. Для этого перейдите в раздел «Сайт», в левый блок «Настройки».
После добавления категорий номеров и тарифов в Контур.Отеле не забывайте выбирать их в модуле онлайн-бронирования. Иначе они не будут отображаться в виджете.
- Создайте код виджета. Для этого:
- В разделе «Сайт» в правом блоке «Виджет» нажмите «Открыть настройки».
- Укажите адреса сайтов, на которых планируете размещать виджет. Виджет будет работать только на указанных в настройках сайтах.
- Выберите тип виджета сразу или разработчик вашего сайта может определить нужную форму виджета во время настройки его работы на сайте.
- Скопируйте код виджета и передайте его разработчику сайта со ссылкой на данную инструкцию.
- Сохраните настройки.
- Вставьте код виджета на сайт. Рекомендуем обратиться за помощью к разработчикам сайта, предоставив им ссылку на данную инструкцию.
Если сайт гостиницы создан с помощью конструктора WIX, встроить на него виджет можно с помощью HTML-элемента.
- Выберите категории номеров и тарифы, которые будут размещаться на сайте через виджет. Для этого перейдите в раздел «Сайт», в левый блок «Настройки».
- Создайте код виджета. Для этого в разделе «Сайт» в правом блоке «Виджет» нажмите «Открыть настройки».
- Укажите адрес сайта, на котором планируете размещать виджет.Обратите внимание, что сайты, сконструированные на платформе Wix, обращаются к серверам Контур.Отеля через окружение. Поэтому помимо основного адреса вашего сайта необходимо прописать дополнительный, с которого будут поступать запросы виджету.Чтобы восстановить адрес окружения, нужно:
- в адресе вашего сайта заменить все точки на дефисы;
- приписать в конце.filesusr.com.
- Выберите тип виджета (вертикальный или горизонтальный блок).
- Скопируйте код виджета по кнопке «Скопировать код».
- Нажмите «Сохранить».
Перейдите в редактор вашего сайта в Wix.
- Откройте редактирование страницы, на которой планируется разместить виджет.
- В колонке элементов слева нажмите на знак «+» (кнопка «Добавить»), затем «Вставка» → «Вставка кода» → «HTML iframe».
- В открывшемся HTML-фрейме нажмите «Вставить код» и выберите «Код». Поле «Добавьте код» необходимо заполнить следующим образом:
- Пропишите первые две строки:
Названия элементов id и class после знака "=" нужно указывать без кавычек.
Пояснение: id – уникальный атрибут контейнера, который позволяет отличить его от других контейнеров в коде. Вместо WidgetId укажите любое имя, состоящее из латинских букв и цифр. - Вставьте код, который скопировали из Контур.Отеля.
- В этом коде найдите строчку:container: “WidgetId”и слово WidgetId замените на уникальное имя, которое вы указали во второй строчке.
- В конце кода добавьте еще две строки:</div>
</body> - Нажмите «Применить».
- Пропишите первые две строки:
- Выровняйте созданный фрейм по ширине страницы и расположению. Важные моменты:
- Виджет не отображается при предпросмотре в редакторе.
- Из-за особенностей использования HTML-iframe окно бронирования будет ограничено размерами фрейма, которые вы установите в редакторе. Если размеры окна бронирования окажутся больше, чем размеры HTML-элемента в редакторе, то появятся дополнительные ползунки.Сам виджет при этом может вмещаться на страницу:
А окно с доступными в результате поиска номерами будет выглядеть так: Чтобы убрать горизонтальный ползунок, необходимо установить ширину фрейма не менее 1034 пикселей. Вертикальный ползунок можно убрать, растянув элемент «с запасом» (например, так, чтобы укладывались все категории) — однако если под виджетом ничего не будет, на странице может образоваться пустое поле. - Чтобы выровнять виджет по центру в верху фрейма, вторую строчку в коде нужно изменить так:
<div id=”WidgetId”; align=”center”>
Чтобы выровнять виджет по правому верхнему углу:
<div id=”WidgetId”; align=”right”>По умолчанию виджет помещается в левый верхний угол фрейма. Если нужно, чтобы виджет имел другое расположение, допишите ко второй строчке аргумент align. - Границы фрейма в редакторе могут пересекаться с другими элементами на странице. Чтобы в процессе бронирования окно с доступными номерами было поверх других элементов, переместите фрейм на передний план (клик по фрейму правой кнопкой мыши/Переместить/На передний план):
- Опубликуйте сайт и проверьте, что все отображается корректно.
- После настройки компьютерной версии не забудьте настроить отображение виджета в мобильных устройствах. Если какие-то кнопки виджета съезжают, попробуйте расширить фрейм до максимально возможного.
При вставке скрипта виджета ему нужно передать настройки, необходимые для отображения блоков на конкретной странице вашего сайта.
Общие моменты
- Передаваемые настройки — это объект
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 |
Чтобы создать приложение vk.com и встроить модуль онлайн-бронирования на страничку вашего отеля:
- Авторизуйтесь в сети vk.com.
- Перейдите по ссылке https://vk.com/apps?act=manage.
- Нажмите «Создать приложение».
- Откроется форма:
- В названии укажите название приложения, например, название вашей гостиницы.
- В платформе выберите «Vk mini Apps».
- Тип выберите «Приложение сообщества».
- Категория «Путешествия».
- Нажмите «Перейти к загрузке приложения», vk предложит подтвердить действия sms-сообщением с кодом или через приложение.
- После подтверждения откроется страница с настройками приложения.
- В разделе «Информация» проверьте и заполните поля следующим образом:
- Название кнопки в сообществах: Забронировать.
- Название кнопки в сниппете: Открыть.
- Группа приложения: выберите группу вашей гостиницы (вы должны быть администратором группы).
- Иконка 32х32: нажмите «Выбрать файл», чтобы выбрать иконку (если у вас есть официальный сайт гостиницы, то можно использовать иконку с сайта).
- Страница помощи: по умолчанию отключена, при включенной странице гость над приложением будет видеть раздел «Помощь», при переходе на которую гость увидит ваш текст (например, инструкцию с правилами оформления бронирования).
- В разделе Настройки проверьте и заполните поля следующим образом:
- Состояние — «Приложение включено и видно всем».
- URL в блоке «Версия для мобильных клиентов» — это адрес приложения из раздела «Продажи» → «Бронирования с сайта» → ссылка на сайт в Контур.Отеле.
- URL в блоке «Версия для vk.com» — это адрес приложения из раздела «Продажи» → «Бронирования с сайта→ ссылка на сайт в Контур.Отеле.
- Размер окна сервиса в блоке «Версия для vk.com» — 795x800.
- URL в блоке «Версия для m.vk.com» — это адрес приложения из раздела «Продажи» → «Бронирования с сайта→ ссылка на сайт в Контур.Отеле.
- Состояние — «Приложение включено и видно всем».
- Нажмите «Сохранить изменения». Если все настройки произведены в соответствии с инструкцией, то модуль автоматически добавится на страничку отеля vk.
Ошибка в консоли | Как исправить |
---|---|
«You have a problem with access to the widget service. |
У виджета нет доступа к настройкам отеля. В разделе «Сайт» в правом блоке «Виджет» нажмите «Открыть настройки». Укажите адреса сайтов, на которых будет размещен виджет. |
Widget.js:51 Provided «form.container» field have correct type but not found in DOM |
Id контейнера, который указывает пользователь не найден. Укажите ID контейнера, который входит в DOM в код. |
Отправьте инструкцию ниже и файл «initWidget.js» разработчику сайта. Скачать файл initWidget.js.
- На страницу index.html разместить скрипт для загрузки виджета:
<script type="text/javascript" src="https://bookonline24.ru/widget.js" />.
- В нужном компоненте, где будет располагаться сам виджет, нужно вставить функцию из файла «initWidget.js».
- Произвести вызов данной функции после рендеринга компонента.
Например, для React это либо используя хук React.useEffect(() => initWidget({...}), []), либо в componentDiDMount).
При вызове функции передать ей параметры, как указано ниже:
initWidget({ id: "тут ввести ID организации из настроек скрипта в К.Отеле (id в скрипте)", type: "horizontalBlock", form: { container: "KonturWidget", // Замените ID элемента для виджета здесь insert: "before" } });