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 > Инвентарь.
Дальнейшее чтение
Заголовок раздела «Дальнейшее чтение»- Узнайте больше о нашей коллекцииВеб-компоненты.
- Узнайте больше оWink WordPress плагин.