Karty

Karta reprezentuje pojedynczego dostawcę (np. hotel lub dostawcę atrakcji) lub zasób (np. typ pokoju, sala konferencyjna, spa itp.) i udostępnia szczegóły za pomocą interaktywnego, rezerwacyjnego interfejsu karty. Użytkownik może wchodzić w interakcję z kartą na następujące sposoby:

Kliknąć przycisk Book.
Kliknąć link Gallery, aby zobaczyć wszystkie zdjęcia i filmy dotyczące tego zasobu.
Kliknąć link Best deal, jeśli jest dostępny, aby zobaczyć pokój z najlepszą ceną.
Kliknąć link Hotel details, jeśli jest dostępny, aby zobaczyć informacje o obiekcie.

Karta obsługuje wiele stron, aby zminimalizować rozmiar karty i skategoryzować dane; dzięki temu są one łatwo przyswajalne dla użytkownika i zwiększa się szansa na konwersję użytkownika na rezerwację.

Karta ma dwie lub trzy strony:

Karta hotelu pokazuje dane obiektu na przedniej stronie oraz najlepszy typ pokoju na odwrocie. Cena, na obu stronach, pokazuje najlepszą cenę dla hotelu.
Karta typu pokoju pokazuje dane typu pokoju na przedniej stronie oraz dane obiektu na odwrocie. Cena pokazuje cenę typu pokoju na przedniej stronie oraz najlepszą cenę dla hotelu na odwrocie.
Wszystkie pozostałe karty (np. spa, restauracja itp.) mają 3 strony. Przykład: dane spa wyświetlane są na pierwszej stronie wraz z najlepszą ceną spa. Dane typu pokoju dla pokoju z najlepszą ceną znajdują się na drugiej stronie. Dane obiektu wraz z pokojem o najlepszej cenie znajdują się na trzeciej stronie karty.

Podgląd karty — *Karta typu pokoju widoczna z przodu z dostępnością*

Powyżej znajduje się przykład naszej karty typu pokoju. Zawiera dane obiektu, recenzje i dane pokoju wraz z polityką anulacji i posiłkami.

Reszta tego artykułu przeprowadzi Cię przez proces tworzenia, dostosowywania i udostępniania karty użytkownikom.

Utwórz kartę

Powyższy obraz pochodzi z Search i pokazuje niektóre z rzeczy, które możesz zrobić z wynikami wyszukiwania. Jedną z tych akcji jest Make a card. Kliknij ten przycisk, a zostaniesz przekierowany do formularza karty, gdzie możesz zacząć dostosowywać swoją kartę.

Dostosuj kartę

Formularz pozwala dostosować kartę w następujący sposób:

Nadaj jej nazwę, abyś pamiętał, czego dotyczy karta.
Wybierz Customization, którą chcesz zastosować do tej karty.
Wybierz początkową stronę karty, którą chcesz, aby użytkownicy zobaczyli jako pierwszą. Domyślnie jest to natywna strona tego zasobu.
Wybierz badge, którego chcesz użyć na karcie. Badge pozwala użytkownikom porównywać zasoby według zbiorczego kryterium, takiego jak eco-friendly.
Dodaj słowa kluczowe, oddzielone przecinkami, które będą używane przez Web Crawlers.
Dodaj tytuły i opisy w językach, które chcesz, aby użytkownik widział.
Wybierz jedno lub więcej zdjęć, które będą wyświetlane po kliknięciu przez użytkowników linku Gallery.
Kliknij przycisk Save, aby kontynuować.

Po zapisaniu karty zostaniesz przekierowany na stronę swoich kart, a Twoja karta jest gotowa do udostępnienia światu.

Udostępnij kartę

Powyżej znajduje się obraz pokazujący wszystkie dostępne akcje dla Twojej karty:

Update Aktualizuje konfigurację Twojej karty.
Add to WinkLinks Dodaje kartę do Twojego konta WinkLinks.
Embed Pokazuje, jak osadzić tę kartę jako Card na Twojej stronie internetowej.
Use with WordPress Pokazuje, jak używać naszego WordPress plugin do osadzenia tej karty na Twojej stronie.

Niektóre z tych opcji omawiamy szczegółowo poniżej.

Embed

<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>

Oto jak osadzić kartę na swojej stronie:

Linia 3 pokazuje, jak osadzić style Wink na swojej stronie.
Linie od 6 do 9 pokazują, jak użyć wink-content-loader Web Component i polecić mu pobranie karty pokoju gościnnego dla Twojego kodu.
Linia 11 pokazuje, jak osadzić nasz Javascript na stronie.
Linia 13 pokazuje, jak osadzić wink-app-loader Web Component i polecić mu pobranie preferencji konfiguracji na poziomie strony.

API

Deweloperzy, którzy chcą zarządzać kartami, mogą przejść do Developers > API > Inventory.

Dalsza lektura

Dowiedz się więcej o naszej kolekcji Web Components.
Dowiedz się więcej o Wink WordPress plugin.