Картки

Картка представляє одного постачальника (наприклад, готель або провайдера вражень) або інвентар (тобто тип кімнати, конференц-зал, спа тощо) і відображає деталі через інтерактивний, доступний для бронювання інтерфейс картки. Користувач може взаємодіяти з карткою наступними способами:

Натиснути кнопку Book.
Натиснути посилання Gallery, щоб побачити всі фотографії та відео цього інвентарю.
Натиснути посилання Best deal, якщо воно доступне, щоб побачити кімнату з найкращою ціною.
Натиснути посилання Hotel details, якщо воно доступне, щоб побачити інформацію про об’єкт.

Картка підтримує кілька сторінок, щоб мінімізувати розмір картки та категоризувати дані; це робить їх легкими для сприйняття користувачем і дає вам більші шанси конвертувати користувача у бронювання.

Картка має дві або три сторінки:

Картка готелю показує дані про об’єкт на лицьовій стороні та найкращий тип кімнати на звороті. Ціна на обох сторонах відображає найкращу ціну для готелю.
Картка типу кімнати показує дані про тип кімнати на лицьовій стороні та дані про об’єкт на звороті. Ціна відображає ціну типу кімнати на лицьовій стороні та найкращу ціну для готелю на звороті.
Всі інші картки (наприклад, спа, ресторан тощо) мають 3 сторінки. Приклад: дані спа відображаються на лицьовій стороні з найкращою ціною спа. Дані типу кімнати для кімнати з найкращою ціною — на другій стороні. Дані про об’єкт разом із кімнатою з найкращою ціною — на третій стороні картки.

Попередній перегляд картки — *Картка типу кімнати з доступністю на лицьовій стороні*

Вище наведено приклад нашої картки типу кімнати. Вона містить дані про об’єкт, відгуки та кімнату разом із політикою скасування та харчуванням.

Далі в цій статті ми розповімо, як створити, налаштувати та показати картку вашим користувачам.

Створення картки

Вище зображено скріншот із Пошуку, який показує деякі дії, які можна виконати з результатами пошуку. Одна з цих дій — Make a card. Натисніть цю кнопку, і вас перенаправить на сторінку форми картки, де ви зможете почати налаштовувати свою картку.

Налаштування картки

Форма дозволяє налаштувати картку наступними способами:

Дайте їй ім’я, щоб пам’ятати, про що ця картка.
Виберіть Налаштування, які хочете застосувати до цієї картки.
Виберіть початкову сторону картки, яку користувачі побачать першою. За замовчуванням це рідна сторона цього інвентарю.
Виберіть значок, який хочете використовувати на картці. Значок дозволяє користувачам порівнювати інвентар за агрегованою метрикою, наприклад, еко-дружній.
Додайте ключові слова, розділені комою, які будуть використовуватися веб-краулерами.
Додайте заголовки та описи мовами, які хочете показувати користувачам.
Виберіть одне або кілька зображень, які відображатимуться, коли користувачі натискають посилання Gallery.
Натисніть кнопку Save, щоб продовжити.

Після збереження картки вас перенаправить на сторінку карток, і ваша картка готова до поширення.

Поширення картки

Вище показано зображення з усіма доступними діями для вашої картки:

Update Оновлює конфігурацію вашої картки.
Add to WinkLinks Додає картку до вашого облікового запису WinkLinks.
Embed Показує, як вбудувати цю картку як Card на ваш сайт.
Use with WordPress Показує, як використовувати наш плагін WordPress для вбудовування цієї картки на ваш сайт.

Деякі з цих опцій ми розглянемо детальніше нижче.

Вбудування

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="GUEST_ROOM"
       id="2de7ee9c-61c9-11ef-9722-42004e494300"
    ></wink-content-loader>

    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>

    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

Ось як вбудувати вашу картку на сайт:

Рядок 3 показує, як додати стилі Wink на ваш сайт.
Рядки 6–9 показують, як використовувати веб-компонент wink-content-loader і вказати йому завантажити картку гостинної кімнати для вашого коду.
Рядок 11 показує, як додати наш Javascript на ваш сайт.
Рядок 13 показує, як вбудувати веб-компонент wink-app-loader і вказати йому завантажити ваші налаштування конфігурації на рівні сторінки.

API

Розробники, які хочуть керувати картками, можуть перейти до Developers > API > Inventory.

Додаткове читання

Дізнайтеся більше про нашу колекцію веб-компонентів.
Дізнайтеся більше про плагін Wink WordPress.