Cards

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

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

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

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

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

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

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

У решті цієї статті ви дізнаєтесь, як створити, налаштувати та показати картку своїм користувачам.

Створити картку

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

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

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

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

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

Поділитися карткою

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

ОновленняОновлює конфігурацію вашої картки.
Додати до WinkLinksДодає картку до вашого облікового запису WinkLinks.
ВбудуватиПоказує, як вбудувати цю картку якКарткана ваш веб-сайт.
Використовуйте з 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Веб-компонент і накажіть йому отримати картку гостьової кімнати для вашого коду.
У рядку 11 показано, як вбудувати наш Javascript на ваш сайт.
У рядку 13 показано, як вбудуватизавантажувач програм winkВеб-компонент і накажіть йому отримати налаштування конфігурації на рівні сторінки.

API

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

Додаткова інформація

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