ServioReservation v4

Розміщення модуля бронювання на сайті готелю

Підтримується два варіанти розміщення модуля бронювання на сайті готелю: безпосереднє вбудовування в сторінку на сайті та посилання на окрему сторінку для модулю.

Для вбудовування модуля в сайт потрібно розмістити тег <section> в потрібному місці на сторінці, та скрипту для завантаження модуля:

   <section 
       class="booking-page-container" 
       id="bookingPageContainer" 
       data-theme="light">
   </section>
   <script 
       id="servioQRBookingScript" 
       src="https://serviobooking.com/ServioQR/js/bookingPage.js" 
       companyKey="772B5716-XXX-XXX-XXXX-AD3060375951"
       isExport="true">
   </script>

Ключ companyKey, надається для після реєстрації модуля в системі, потрібен для однозначної ідентифікації модуля бронювання.

Для посилання на окрему сторінку для модулю необхідно тег <iframe> в потрібному місці на сторінці:

<iframe src="https://serviobooking.com/ServioQR/hms/booking/{сompany_key}"></iframe>

Додаткові параметри які можуть бути використані як ключі для скрипту так і в параметрах URL для модуля бронювання.

Фільтри для використання на сторінці сайту:

• hotels(number[]): Перелік id готелів, які відображаються, перечисленні через кому. Приклад: 1 чи 1,2;
• visibleHotels(boolean): Чи відображати селектор готелів. За замовчуванням true. Приклад: true чи false;
• rooms(number[]): Перелік id типів кімнат, які відображаються, перечисленні через кому. Приклад: 1 чи 1,2;

Приклад для URL: https://domen-hotel.com/booking[/{companyKey}]/?rooms=3,5

Приклад для скрипту:

 <script 
      id="servioQRBookingScript" 
      src="https://serviobooking.com/ServioQR/js/bookingPage.js" 
      companyKey="772B5716-XXX-XXX-XXXX-AD3060375951"
      rooms="1,2"
      visibleHotels="true"
      hotels="1,2"
      isExport="true">
  </script>

Параметри для ініціалізації модуля бронювання:

• adults(number): Кількість повнолітніх гостей. Не може бути нижче за 1(значення за замовчуванням), однак у випадку виходу значення за ліміт встановлений готелем - буде застосовано значення ліміту;
• children(number): Кількість неповнолітніх гостей. Не може бути нижче за 0(значення за замовчуванням), однак у випадку виходу значення за ліміт встановлений готелем - буде застосовано значення ліміту;
• checkInDate(string): Рядкове представлення дати заселення до готелю. Мінімальне значення - теперішня дата. Формат рядка: YYYY-MM-DD, MM/DD/YYYY. Приклад: 2024-12-1, 12/1/2024;
• checkOutDate(string): Рядкове представлення дати виселення з готелю. Мінімальне значення - наступний від дати заселення. Формат рядка: YYYY-MM-DD, MM/DD/YYYY. Приклад: 2024-12-2, 12/2/2024;

Правила для дат:

checkInDate та checkOutDate не вказані: checkInDate = наступний від теперішньої дати день, checkOutDate = наступний день від checkInDate; checkOutDate не вказаний: checkOutDate = наступний день від checkInDate; checkInDate не вказаний: якщо checkOutDate більша за наступний від теперішньої дати день - checkInDate = минулий від checkOutDate день, інакше виконується перше(1) правило.

Приклад для URL: https://serviobooking.com/ServioQR/hms/booking/{company_key}?checkinDate=2025-07-18&checkOutDate=2025-07-24&adults=2&children=1

Приклад для скрипту:

<script 
     id="servioQRBookingScript" 
     src="https://serviobooking.com/ServioQR/js/bookingPage.js" 
     companyKey="772B5716-XXX-XXX-XXXX-AD3060375951"
     checkinDate="2025-07-18"
     checkOutDate="2025-07-24"
     adults="2"
     children="1"
     isExport="true">
 </script>

Налаштування локалізації

Можна прописувати в url.
(лише URL)lang(string): Мова.
Можливі значення: 'uk', 'en'.
Значення за замовчуванням: значення береться з локального сховища поточного сайту, або 'uk' в разі відсутності цього значення.
Приклад: https://serviobooking.com/ServioQR/hms/booking/{key}?lang=en

Приклад для cкрипту:

<script

    id="servioQRBookingScript" 
    src="https://serviobooking.com/ServioQR/js/bookingPage.js" 
    companyKey="772B5716-XXX-XXX-XXXX-AD3060375951"
    lang="uk"
</script>

Налаштування промокоду та тарифу

Доступні для заповнення як в параметрах скрипту так і в параметрах URL

• promoCode(string): Промокод.
  

Приклад: 3NJFO5K13K;

https://serviobooking.com/ServioQR/hms/booking/{key}?promoCode=3NJFO5K13K

• tarifs(number[]): Перелік id тарифів, що відображаються, перечисленні через кому.
  

Приклад: 1 чи 1,2

https://serviobooking.com/ServioQR/hms/booking/{key}?tarifs=1,2

Приклад для скрипту промокод:

<script 
     id="servioQRBookingScript" 
     src="https://serviobooking.com/ServioQR/js/bookingPage.js" 
     companyKey="772B5716-XXX-XXX-XXXX-AD3060375951"
     promoCode="3NJFO5K13K"
     isExport="true">
 </script>

Приклад для скрипту тариф:

<script 
     id="servioQRBookingScript" 
     src="https://serviobooking.com/ServioQR/js/bookingPage.js" 
     companyKey="772B5716-XXX-XXX-XXXX-AD3060375951"
     tarifs="1,2"
 </script>

Налаштування URL для оплати\скасування бронювання

Для оплати\скасування бронювання використовується наступний URL

https://serviobooking.com/ServioQR/hms/HotelPayment/PaymentInfo?companyKey={key}&code={Guest.GuestCode}

Це посилання у форматі HTML в шаблон підтвердження бронювання в HMS: Наприклад: <a href="h https://serviobooking.com/ServioQR/hms/HotelPayment/PaymentInfo?companyKey=9213697E-CA9F-4AE6-B2E5-C05C3BE47CCF&code={Guest.GuestCode}" target="_blank">Щоб здійснити оплату, будь ласка, перейдіть за посиланням.
To make a payment, please click on the link.</a>

Приклад посилання у форматі HTML в шаблон підтвердження бронювання групи в HMS: <a href="h https://serviobooking.com/ServioQR/hms/HotelPayment/PaymentInfo?companyKey=9213697E-CA9F-4AE6-B2E5-C05C3BE47CCF&account={Group.GroupAccount}" target="_blank">Посилання на оплату. Payment link.</a>

Приклад посилання у форматі HTML в шаблон друк рахунку в HMS: <a href="h https://serviobooking.com/ServioQR/hms/HotelPayment/PaymentInfo?companyKey=9213697E-CA9F-4AE6-B2E5-C05C3BE47CCF&account=I{Bill.BillID}" target="_blank">Посилання на оплату. Payment link.</a>

Приклад посилання у форматі HTML в шаблон друку картки заходу в HMS: <a href="h https://serviobooking.com/ServioQR/hms/HotelPayment/PaymentInfo?companyKey=9213697E-CA9F-4AE6-B2E5-C05C3BE47CCF&account=A{ManagerActivity.Account}" target="_blank">Посилання на оплату. Payment link.</a>

Google Ads

Відслідковується 5 кроків:

   1. choose_date - "Пошук" номерів.
   2. choose_hotel_room - вибір номеру
   3. add_user_data - бронювання
   4. order_created - формування рахунку для оплати
   5. purchase - оплата бронювання

Інструкція для додавання тегів для відслідковування

Для того, щоб мати змогу відслідковувати ефективність реклами чи модуля бронювання, потрібно підключили сервіс Google Analytics до сайту. Зайти на https://analytics.google.com/ Створити аккаунт та отримати код відслідковування.

Крок №1: створити акаунт

Крок №2: створити ресурс

Крок №3: вказати відомості про компанію

Крок №4: вкащати бізнес цілі

Крок №5: вибрати платформу і почати збір даних

Після завершення всіх кроків потрібно перейти по стрілці в додаткові налаштування.

Відкрити огляд інструкції тега.

Скопіювати код відслідковування та передачи його адміністратору сайту чи веб-розробнику для встановлення на всі сторінки сайту. Код вставляється в базовий шаблон сайту, одразу після елемента <HEAD>, щоб він відобразився на кожній його сторінці.

Маємо 5 подій для відслідковування кожного кроку процесу бронювання

   1. choose_date - завершення першого кроку
   2. choose_hotel_room - завершення другого кроку
   3. add_user_data - завершення третього кроку
   4. order_created - завершення четвертого кроку
   5. purchase - успішна оплата 

Скрипти для відправки подій вже вбудовані в модуль бронювання, тож вони мають автоматично з'явитися в GA4. Для того, щоб відмітити події як конверсії, потрібно перейти: Адміністратор > Огляд даних > Ключові події

Після переходу в розділ, потрібно натиснути “Створити ключову подію”

У вікні, що відкрилось прописати назви подій і натиснути кнопку “Зберегти”. Потрібно повторити процедуру 4 рази, щоб створити 4 події (назви краще копіювати, ніж переписувати):

   1. choose_date
   2. choose_hotel_room
   3. add_user_data
   4. order_created
   
   5. purchase - створювати не потрібно, подія є стандартною для GA4