Cards

Eine Karte repräsentiert einen einzelnen Anbieter (z. B. ein Hotel oder einen Erlebnisanbieter) oder ein Inventar (z. B. Zimmertyp, Tagungsraum, Spa usw.) und stellt die Details über eine interaktive, buchbare Karten-Benutzeroberfläche dar.

Ein Benutzer kann auf folgende Weise mit einer Karte interagieren:

Klicken Sie auf dasBook Taste.
Klicken Sie auf dasGalleryLink, um alle Fotos und Videos zu diesem Inventar anzuzeigen.
Klicken Sie aufBest dealKlicken Sie auf den Link, falls verfügbar, um das Zimmer mit dem besten Preis anzuzeigen.
Klicken Sie aufHotel detailsLink, falls verfügbar, um Immobilieninformationen anzuzeigen.

Eine Karte unterstützt mehrere Flächen, um die Größe der Karte zu minimieren und die Daten zu kategorisieren. Dadurch ist sie für den Benutzer leicht nutzbar und Sie haben eine größere Chance, den Benutzer zu einer Buchung zu bewegen.

Eine Karte hat entweder zwei oder drei Seiten:

Eine Hotelkarte zeigt auf der Vorderseite die Objektdaten und auf der Rückseite den besten Zimmertyp. Der Preis auf beiden Seiten zeigt den besten Preis für das Hotel an.
Eine Zimmerkategoriekarte zeigt auf der Vorderseite die Daten zur Zimmerkategorie und auf der Rückseite die Daten zur Unterkunft. Die Preiskarte zeigt auf der Vorderseite den Preis der Zimmerkategorie und auf der Rückseite den besten Preis für das Hotel.
Alle anderen Karten (z. B. Spa-Restaurant usw.) haben drei Seiten. Beispiel: Auf der Vorderseite werden die Spa-Daten mit dem besten Preis angezeigt. Die Zimmerkategoriedaten für das günstigste Zimmer finden Sie auf der zweiten Seite. Die Objektdaten und das günstigste Zimmer finden Sie auf der dritten Kartenseite.

Kartenvorschau — *Zimmerkategoriekarte mit Verfügbarkeit auf der Vorderseite*

Oben sehen Sie ein Beispiel unserer Zimmerkategoriekarte. Sie enthält Informationen zu Unterkunft, Bewertung und Zimmer sowie Stornierungsbedingungen und Verpflegung.

Der Rest dieses Artikels führt Sie durch die Erstellung, Anpassung und Bereitstellung der Karte für Ihre Benutzer.

Erstellen einer Karte

Oben ist ein Bild ausSuchenund zeigt Ihnen einige der Dinge, die Sie mit Ihren Suchergebnissen tun können. Eine dieser Aktionen istMake a card. Klicken Sie auf diese Schaltfläche. Sie werden dann zu unserer Kartenformularseite weitergeleitet, wo Sie mit der individuellen Gestaltung Ihrer Karte beginnen können.

Karte anpassen

Mit dem Formular können Sie Ihre Karte auf folgende Weise anpassen:

Geben Sie ihr einen Namen, damit Sie sich daran erinnern, worum es auf der Karte geht.
Wählen Sie die Anpassung Sie möchten diese Karte beantragen.
Wählen Sie die Kartenseite aus, die den Benutzern zuerst angezeigt werden soll. Standardmäßig ist dies die native Seite dieses Inventars.
Wählen Sie die badge Sie möchten auf der Karte verwenden. Ein Badge ermöglicht Benutzern den Vergleich des Inventars anhand einer aggregierten Metrik wie eco-friendly.
Fügen Sie durch Kommas getrennte Schlüsselwörter hinzu, die verwendet werden von Webcrawler.
Fügen Sie Titel und Beschreibungen in den Sprachen hinzu, die der Benutzer sehen soll.
Wählen Sie ein oder mehrere Bilder aus, die angezeigt werden, wenn Benutzer auf das Gallery Link.
Klicken Sie auf das Save Schaltfläche, um fortzufahren.

Nachdem Sie Ihre Karte gespeichert haben, werden Sie auf Ihre Kartenseite weitergeleitet und können Ihre Karte nun mit der Welt teilen.

Karte teilen

Oben sehen Sie ein Bild mit allen verfügbaren Aktionen für Ihre Karte:

AktualisierenAktualisiert Ihre Kartenkonfiguration.
Zu WinkLinks hinzufügenFügt die Karte Ihrem WinkLinks-Konto hinzu.
EinbettenZeigt Ihnen, wie Sie diese Karte einbetten alsKartein Ihre Website.
Verwendung mit WordPressZeigt Ihnen, wie Sie unsereWordPress-Pluginum diese Karte in Ihre Website einzubetten.

Einige dieser Optionen werden im Folgenden ausführlicher behandelt.

Einbetten

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

So betten Sie Ihre Karte in Ihre Site ein:

Zeile 3 zeigt Ihnen, wie Sie die Wink-Stile in Ihre Site einbetten.
Die Zeilen 6 bis 9 zeigen Ihnen, wie Sie dieWink-InhaltsladerWebkomponente und weisen Sie sie an, eine Gästezimmerkarte für Ihren Code abzurufen.
Zeile 11 zeigt Ihnen, wie Sie unser Javascript in Ihre Site einbetten.
Zeile 13 zeigt Ihnen, wie Sie dieWink-App-LoaderWebkomponente und weisen Sie sie an, Ihre Konfigurationseinstellungen auf Seitenebene abzurufen.

API

Entwickler, die Karten verwalten möchten, können zuEntwickler > API > Inventar.

Weiterführende Literatur

Erfahren Sie mehr über unsere Sammlung vonWebkomponenten.
Erfahren Sie mehr über dieWink WordPress-Plugin.