Przejdź do głównej zawartości
Wink

Karty

Karta reprezentuje pojedynczego dostawcę (np. hotel lub dostawcę doświadczeń) 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 Rezerwuj.
  • Kliknąć link Galeria, aby zobaczyć wszystkie zdjęcia i filmy dotyczące tego zasobu.
  • Kliknąć link Najlepsza oferta, jeśli jest dostępny, aby zobaczyć pokój z najlepszą ceną.
  • Kliknąć link Szczegóły hotelu, 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 na przedniej stronie pokazuje cenę typu pokoju, a na odwrocie najlepszą cenę dla hotelu.
  • 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 najlepiej wycenionego pokoju znajdują się na drugiej stronie. Dane obiektu wraz z najlepszą ceną pokoju znajdują się na trzeciej stronie karty.
Podgląd karty
Karta typu pokoju 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ę

Dział zatytułowany „Utwórz kartę”
Akcje
Akcje wyników wyszukiwania

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

Dostosuj kartę

Dział zatytułowany „Dostosuj kartę”

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

  1. Nadaj jej nazwę, abyś pamiętał, czego dotyczy karta.
  2. Wybierz Dostosowanie, które chcesz zastosować do tej karty.
  3. Wybierz początkową stronę karty, którą chcesz, aby użytkownicy zobaczyli jako pierwszą. Domyślnie jest to natywna strona tego zasobu.
  4. Wybierz odznakę, którą chcesz użyć na karcie. Odznaka pozwala użytkownikom porównywać zasoby według zbiorczego kryterium, takiego jak ekologiczny.
  5. Dodaj słowa kluczowe, oddzielone przecinkiem, które będą używane przez Web Crawlers.
  6. Dodaj tytuły i opisy w językach, które chcesz, aby użytkownik widział.
  7. Wybierz jedno lub więcej zdjęć, które będą wyświetlane po kliknięciu przez użytkowników linku Galeria.
  8. Kliknij przycisk Zapisz, aby kontynuować.

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

Udostępnij kartę

Dział zatytułowany „Udostępnij kartę”
Karta
Karta z złożonym menu akcji

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

  • Aktualizuj Aktualizuje konfigurację Twojej karty.
  • Dodaj do WinkLinks Dodaje kartę do Twojego konta WinkLinks.
  • Osadź Pokazuje, jak osadzić tę kartę jako Card na Twojej stronie internetowej.
  • Użyj z WordPress Pokazuje, jak użyć naszego wtyczki WordPress, aby osadzić tę kartę na Twojej stronie.

Niektóre z tych opcji omówimy szczegółowiej poniżej.

Osadź

Dział zatytułowany „Osadź”
<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

Dział zatytułowany „API”

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

Dalsza lektura

Dział zatytułowany „Dalsza lektura”