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-content-loaderВеб-компонент и скажите ему, чтобы он извлек карточку гостевого номера для вашего кода.
В строке 11 показано, как встроить наш Javascript на ваш сайт.
Строка 13 показывает, как встроитьwink-app-loaderВеб-компонент и укажите ему, как получить настройки конфигурации на уровне страницы.

API

Разработчики, желающие управлять картами, могут перейти по ссылкеРазработчики > API > Инвентарь.

Дальнейшее чтение

Узнайте больше о нашей коллекцииВеб-компоненты.
Узнайте больше оWink WordPress плагин.