Karten

Eine Karte repräsentiert einen einzelnen Lieferanten (z. B. Hotel oder Erlebnisanbieter) oder ein Inventar (d. h. Zimmertyp, Tagungsraum, Spa usw.) und zeigt die Details über eine interaktive, buchbare Karten-Benutzeroberfläche an. Ein Benutzer kann auf folgende Weise mit einer Karte interagieren:

Klicken Sie auf die Schaltfläche Buchen.
Klicken Sie auf den Link Galerie, um alle Fotos und Videos für dieses Inventar zu sehen.
Klicken Sie auf den Link Bestes Angebot, falls verfügbar, um das preiswerteste Zimmer zu sehen.
Klicken Sie auf den Link Hoteldetails, falls verfügbar, um Informationen zur Unterkunft zu sehen.

Eine Karte unterstützt mehrere Ansichten, um die Größe der Karte zu minimieren und die Daten zu kategorisieren; so sind sie für den Benutzer leicht konsumierbar und Sie haben eine größere Chance, den Benutzer zu einer Buchung zu konvertieren.

Eine Karte hat entweder zwei oder drei Ansichten:

Eine Hotelkarte zeigt auf der Vorderseite die Objektdaten und auf der Rückseite den besten Zimmertyp. Der Preis wird auf beiden Seiten angezeigt und zeigt den besten Preis für das Hotel.
Eine Zimmertyp-Karte zeigt auf der Vorderseite die Zimmertyp-Daten und auf der Rückseite die Objektdaten. Der Preis zeigt auf der Vorderseite den Preis des Zimmertyps und auf der Rückseite den besten Preis für das Hotel.
Alle anderen Karten (z. B. Spa, Restaurant usw.) haben 3 Ansichten. Beispiel: Spa-Daten werden auf der Vorderseite mit dem besten Spa-Preis angezeigt. Zimmertyp-Daten für das preiswerteste Zimmer befinden sich auf der zweiten Seite. Objektdaten zusammen mit dem besten Zimmerpreis befinden sich auf der dritten Kartenansicht.

Kartenvorschau — *Vorderseite einer Zimmertyp-Karte mit Verfügbarkeit*

Oben sehen Sie ein Beispiel unserer Zimmertyp-Karte. Sie enthält Objekt-, Bewertungs- und Zimmerdaten sowie Stornierungsbedingungen und Verpflegung.

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

Karte erstellen

Oben sehen Sie ein Bild aus der Suche, das einige der Möglichkeiten zeigt, die Sie mit Ihren Suchergebnissen haben. Eine dieser Aktionen ist Karte erstellen. Klicken Sie auf diese Schaltfläche, und Sie werden zu unserem Kartenformular weitergeleitet, wo Sie mit der Anpassung Ihrer Karte beginnen können.

Karte anpassen

Das Formular ermöglicht Ihnen, Ihre Karte auf folgende Weise anzupassen:

Geben Sie ihr einen Namen, damit Sie sich merken, worum es bei der Karte geht.
Wählen Sie die Anpassung aus, die Sie auf diese Karte anwenden möchten.
Wählen Sie die anfängliche Kartenansicht aus, die die Nutzer zuerst sehen sollen. Standardmäßig ist dies die native Ansicht dieses Inventars.
Wählen Sie das Abzeichen aus, das Sie auf der Karte verwenden möchten. Ein Abzeichen ermöglicht es Nutzern, Inventar anhand eines aggregierten Merkmals wie umweltfreundlich zu vergleichen.
Fügen Sie Schlüsselwörter hinzu, getrennt durch Kommas, die von Web-Crawlern verwendet werden.
Fügen Sie Titel und Beschreibungen in den Sprachen hinzu, die der Nutzer sehen soll.
Wählen Sie ein oder mehrere Bilder aus, die angezeigt werden, wenn Nutzer auf den Link Galerie klicken.
Klicken Sie auf die Schaltfläche Speichern, um fortzufahren.

Nach dem Speichern Ihrer Karte werden Sie zu Ihrer Kartenübersicht weitergeleitet und Ihre Karte ist nun bereit, mit der Welt geteilt zu werden.

Karte teilen

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

Aktualisieren Aktualisiert Ihre Kartenkonfiguration.
Zu WinkLinks hinzufügen Fügt die Karte Ihrem WinkLinks-Konto hinzu.
Einbetten Zeigt Ihnen, wie Sie diese Karte als Card in Ihre Website einbetten.
Mit WordPress verwenden Zeigt Ihnen, wie Sie unser WordPress-Plugin verwenden, um diese Karte in Ihre Website einzubetten.

Einige dieser Optionen erläutern wir im Folgenden ausführlicher.

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 Website ein:

Zeile 3 zeigt, wie Sie die Wink-Styles in Ihre Website einbinden.
Die Zeilen 6 bis 9 zeigen, wie Sie die wink-content-loader Web-Komponente verwenden und ihr mitteilen, eine Gästeraum-Karte für Ihren Code abzurufen.
Zeile 11 zeigt, wie Sie unser Javascript in Ihre Website einbinden.
Zeile 13 zeigt, wie Sie die wink-app-loader Web-Komponente einbetten und ihr mitteilen, Ihre konfigurationsbezogenen Einstellungen auf Seitenebene abzurufen.

API

Entwickler, die Karten verwalten möchten, können zu Developers > API > Inventory wechseln.

Weiterführende Literatur

Erfahren Sie mehr über unsere Sammlung von Web Components.
Erfahren Sie mehr über das Wink WordPress-Plugin.