Встраивание на сайт

Страница модуля онлайн-бронирования

Ссылка на тестовую страницу модуля бронирования как пример интеграции: https://online-demo.resortshop.ru/new/. Используйте ссылку на ваш модуль, если он уже подключен, чтобы получить актуальные для вас данные.

Для отображения модуля на странице необходимо добавить ссылки на предоставляемые скрипты, CSS-стили и шрифт.

Внутри файла есть пути, включающие строку v_XXX, где XXX - версия модуля. При обновлении версия будет меняться, поэтому эти пути нужно будет обновлять на сайте.

Блоки для вставки на страницу

<!-- точка входа приложения -->
<div id="appONL4"></div>

<!-- всплывающие уведомления и диалоговые окна -->
<div id="onl4-wrapper">
  <div id="appONL4Modals"></div>
</div>

Внутри div можно расположить временное содержимое, которое будет отображаться до загрузки модуля.

Обязательные глобальные переменные

window.onlBaseURL = 'http://online-demo.resortshop.ru/';
window.onlAPIKey = '...'; // обязательно определить
window.onlDivision = '...'; // обязательно определить

При загрузке страницы для пользователя автоматически создается сессия. Сессия имеет ограниченный срок жизни: 30-60 минут в зависимости от действий пользователя.

Дополнительные переменные

• window.onlExternalId - внешний идентификатор, сохраняется в брони как lead_id; обычно используется для связки с CRM.
• window.onlPromoPage - ключ промо-страницы.

Переопределение основных цветов

window.onlTheme = {
  primary: "#007748",
  negative: "#c10015",
  warning: "#f2c037",
};

Значения поиска по умолчанию

window.onlDefaults = {
  dateSelectorOpen: true, // открытие окна выбора дат после загрузки модуля
  dateIn: "17.11.2024", // дата заезда по умолчанию
  dateInDays: 7, // смещение даты заезда на X дней от текущей даты
  days: 7, // дней проживания от dateIn или dateInDays
  rooms: [
    {
      adults: 1, // количество взрослых в номере
      children: [10], // возраст детей через запятую: [10, 6, 12]
    },
  ],
  autoSearch: true, // автоматический поиск номеров после загрузки модуля
  autoSelectSingleTariff: true, // автоматический выбор тарифа, если доступен только один тариф
};

Callback для действий пользователя

window.onlCallback позволяет задать функцию, которая вызывается при определенных действиях пользователя. Функция принимает три параметра: идентификатор сеанса, код действия и данные.

Функцию можно использовать для связи с системой сквозной аналитики, CRM и другими системами. Действия: search, addToCart, deleteFromCart, confirm.

window.onlCallback = (session, action, data) => {
  console.log("CallBack", {
    session: session,
    action: action,
    data: data,
  });
};

URL-параметры

• dateIn - дата заезда в формате дд.мм.гггг.
• dateOut - дата выезда в формате дд.мм.гггг.
• dateSelectorOpen - открытие окна выбора дат после загрузки модуля: true или false.
• autoSearch - автоматический поиск номеров после загрузки модуля: true или false.

http://online-demo.resortshop.ru/new/?dateIn=20.01.2024&dateOut=30.01.2024&autoSearch=true

URL-параметры имеют приоритет над глобальными переменными, описанными выше.

Страница оплаты счетов, выставленных вне онлайн-бронирования

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

Пример ссылки:

https://online-demo.resortshop.ru/bill/?bill=111&pin=111111

Модуль оплаты счетов должен располагаться на отдельной странице сайта по аналогии со страницей бронирования. Для отображения модуля нужно добавить ссылки на предоставляемые скрипты, CSS-стили и шрифт.

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

На странице должны быть определены window.onlDivision, window.onlBaseURL, window.onlAPIKey, а также блоки:

<!-- точка входа приложения -->
<div id="appONL4Bill"></div>

<!-- всплывающие уведомления и диалоговые окна -->
<div id="onl4-wrapper">
  <div id="appONL4Modals"></div>
</div>

По умолчанию пользователю доступны все типы оплаты, у которых стоит галочка "Оплата внешних счетов", если для них не задано ограничение.

Дополнительные настройки

window.onlExternalId = '...'; // внешний идентификатор, сохраняется в брони как lead_id

window.onlBillPayments = [
  "8a0cba65-e87a-4141-a54c-a5a8250c0a51",
  "a19ad18e-3be7-4f62-a0ef-27407cd4654f"
]; // использование определенных типов оплаты; ключ типа оплаты берется из админки

window.onlBillTheme = {
  primary: "#1976d2", // основной цвет
  background: "white", // цвет заднего фона
  negative: "#c10015", // цвет предупреждения
};

Страница модуля предварительной регистрации

Ссылка на предварительную регистрацию создается в Здравнице на странице заявки или может приходить автоматически на почту за несколько дней до заезда.

Модуль предварительной регистрации должен располагаться на отдельной странице сайта по аналогии со страницей бронирования. Для отображения модуля нужно добавить ссылки на предоставляемые скрипты, CSS-стили и шрифт.

Обязательная переменная и блоки

На странице должна быть определена переменная window.onlBaseURL, а также блоки:

<!-- точка входа приложения -->
<div id="appONL4Reg"></div>

<!-- всплывающие уведомления и диалоговые окна -->
<div id="onl4-wrapper">
  <div id="appONL4Modals"></div>
</div>

Пример ссылки для предварительной регистрации:

https://online-demo.resortshop.ru/registration/?uId=0903b1d6-f820-465c-b066-4792d1c7bd4f

Цвета и формат дат

window.onlRegThemeColor = {
  primary: "#1976D2",
  secondary: "#ffffff",
  error: "#FF5252",
  warning: "#ff6e6e",
};

window.onlRegDateFormat = "lll";

Поддерживаемые форматы дат описаны в документации Moment.js: https://momentjs.com/docs/#/displaying/format/.

Изображения, извлеченные из PDF