Zum Inhalt springen

Webkomponenten

Webkomponentenist ein Standard, mit dem Sie komplette Javascript-Funktionen in Ihre Website integrieren können, ohne Programmierkenntnisse zu haben. Dank dieser innovativen Technologie können Sie Wink-Reiseangebote ganz einfach einbetten. Dieser Artikel führt Sie durch unsere Sammlung von Webkomponenten und zeigt Ihnen, wie Sie diese verwenden.

Es gibt drei Dinge, die Sie in jede Seite einbinden müssen, auf der Sie eine unserer Webkomponenten anzeigen möchten.

  1. Binden Sie unser Stylesheet ein.
  2. Integrieren Sie unser Javascript.
  3. Integrieren Sie unseren Anwendungslader.

Fügen Sie unsere CSS-Stile in den Kopf Ihres Dokuments ein.

<html>
<head>
<link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
</head>
</html>

Fügen Sie unser Javascript am Ende Ihres Dokuments ein. (Wir empfehlen, direkt über dem End-Body-Tag).

<html>
<body>
<script src="https://elements.wink.travel/elements.js" type="module" defer></script>
</body>
</html>

Ihre Site ist jetzt bereit und kann unsere Webkomponenten anzeigen.

Lesen Sie unten mehr über unsere Komponentenbibliothek.

Der Loader ist für die Statusbeibehaltung und die Verwaltung der Interaktion zwischen unseren Komponenten verantwortlich. (Fügen Sie es unter unserem Javascript ein).

<html>
<body>
<wink-app-loader
client-id="YOUR CLIENT ID GOES HERE"
configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
></wink-app-loader>
</body>
</html>

Der Content Loader ist das Herzstück unserer Webkomponentenbibliothek. Er ist für die Anzeige Ihres Inventars (Karten, Raster, Karten) verantwortlich.

Verfügbare Attribute:

  • Layout
  • Ausweis
  • Sortieren

Das Attributsortist nur verfügbar, wenn das LayoutRANKEDund Sie möchten kein vorhandenes Ranglistenraster verwenden. Lassen Sie in diesen Fällenid leer.

Verfügbare Layouttypen:

  • AD_BANNER
  • MAP
  • HOTEL
  • GUEST_ROOM
  • MEETING_ROOM
  • SPA
  • RESTAURANT
  • ACTIVITY
  • ATTRACTION
  • PLACE
  • ADD_ON
  • LIST
  • SEARCH
  • RANKED

Verfügbare Sortiertypen:

  • MEMBER
  • PRICE_LOW_TO_HIGH
  • PRICE_HIGH_TO_LOW
  • PRICE
  • POPULARITY
  • ECO
  • EXPERIENCE
  • PERK
  • LOYALTY
  • PACKAGE
<html>
<body>
<wink-content-loader
layout="GUEST_ROOM"
id="2de7ee9c-61c9-11ef-9722-42004e494300"
></wink-content-loader>
</body>
</html>

Beispiele finden Sie fürKarten,Gitter Und Karten.

Die Suchfunktion funktioniert hervorragend mit einem Ihrer Ranglistenraster. Ihre Benutzer können damit nach Hotels und Reisezielen suchen, und das Raster wird entsprechend den Suchergebnissen aktualisiert.

<html>
<body>
<wink-lookup></wink-lookup>
</body>
</html>
Lookup-Webkomponente
Lookup-Webkomponente

Wenn Sie auf die Komponente oben klicken, wird ein Modalfenster geöffnet, in das Sie das gesuchte Reiseziel oder Hotel eingeben können.

Nachschlagemodal
Nachschlagemodal mit Ergebnissen

Die Reiseroutenschaltfläche zeigt die aktuelle Reiseroute an. Wenn Sie darauf klicken, wird die vollständige Reiseroutenauswahl modal angezeigt.

<html>
<body>
<wink-itinerary></wink-itinerary>
</body>
</html>
Reiserouten-Webkomponente
Reiserouten-Webkomponente

Wenn Sie auf die Schaltfläche oben klicken, wird ein Fenster geöffnet, in dem Sie Ihre Reiseroute aktualisieren können.

Suchmodal
Reiseroutenauswahl als Modal

Die Suchfunktion ist eine reine Symbolschaltfläche der Reiseroutenauswahl. Wenn Sie darauf klicken, wird die vollständige Reiseroutenauswahl modal angezeigt.

<html>
<body>
<wink-search></wink-search>
</body>
</html>
Suchwebkomponente
Suchwebkomponente

Wenn Sie auf die Schaltfläche oben klicken, wird ein Fenster geöffnet, in dem Sie Ihre Reiseroute aktualisieren können.

Suchmodal
Reiseroutenauswahl als Modal

Die Reiseroutenkomponente zeigt ein Reiseroutenformular an, mit dem Benutzer interagieren können.

<html>
<body>
<wink-itinerary-form></wink-itinerary-form>
</body>
</html>
ReiseroutenformularWebkomponente
Webkomponente für Reiseroutenformulare

Durch Ändern der Reiseroute in einer unserer Reiseroutenkomponenten wird das Ereignis zur Reiseroutenaktualisierung für alle Bestände ausgelöst, die derzeit auf der Seite angezeigt werden.

Mit der Schaltfläche „Konto“ können Sie Ihrer Site eine Wink-Authentifizierung hinzufügen.

<html>
<body>
<wink-account></wink-account>
</body>
</html>
Konto-Webkomponente
Webkomponente mit der Schaltfläche „Konto“

Wenn der Benutzer nicht authentifiziert ist, wird er durch Klicken auf die Schaltfläche zur Authentifizierung weitergeleitet. Nach der Authentifizierung wird sein Profilsymbol angezeigt.

Schaltfläche „Konto“ bei Authentifizierung
Webkomponente „Kontoschaltfläche (authentifiziert)“

Wenn Sie auf die Schaltfläche klicken, wird das benutzerspezifische Dropdown-Menü geöffnet.

Schaltfläche „Konto“ bei Authentifizierung
Webkomponente „Kontoschaltfläche (öffnen)“

Es gibt zwei Dinge, die Sie in jede Seite einbinden müssen, auf der Sie die TripPay-Zahlungswebkomponente verwenden möchten.

  1. Binden Sie unser Stylesheet ein.
  2. Integrieren Sie unser Javascript.

Fügen Sie unsere CSS-Stile in den Kopf Ihres Dokuments ein.

<html>
<head>
<link rel="stylesheet" href="https://elements.trippay.io/styles.css"></link>
</head>
</html>

Fügen Sie unser Javascript am Ende Ihres Dokuments ein. (Wir empfehlen, direkt über dem End-Body-Tag).

<html>
<body>
<script src="https://elements.trippay.io/elements.js" type="module" defer></script>
</body>
</html>

Ihre Site ist jetzt bereit und kann unsere Webkomponenten anzeigen.

Mit der Zahlungskomponente können Sie TripPay darüber informieren, dass ein Reisender etwas kaufen möchte, sowie über die Regeln und Preise für diese Artikel.

Das Widget verfügt über ein erforderliches Attribut:

  • idDie Kennung des Buchungsvertrags, den Sie ausführen möchten.
<html>
<body>
<trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
</body>
</html>

So erstellen Sie den Buchungsvertragid, lesen Sie die Anleitung:Integration mit TripPay. ::

Das Widget bereitet den Vertrag zur Ausführung vor und zeigt Zahlungsdetails an(Abbildung 1)an den Benutzer, um die Buchung abzuschließen.

Zahlungsdetails
Abbildung 1. Beispiel eines Zahlungsformulars