Composants Web

Composants Web est une norme qui vous permet d’intégrer des fonctionnalités JavaScript complètes dans votre site web sans savoir coder. Grâce à cette technologie géniale, vous pouvez intégrer l’inventaire de voyages Wink avec très peu de complications. Cet article vous guide à travers notre collection de composants web et vous montre comment les utiliser.

Intégrer Wink

Il y a trois éléments que vous devez inclure dans toute page où vous souhaitez afficher l’un de nos composants web.

Inclure notre feuille de style.
Inclure notre Javascript.
Inclure notre chargeur d’application.

Feuille de style

Incluez nos styles CSS dans l’en-tête de votre document.

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

Javascript

Incluez notre Javascript en bas de votre document. (Nous recommandons juste au-dessus de la balise de fin body).

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

Votre site est maintenant prêt et capable d’afficher nos composants web.

Composants

Lisez ci-dessous à propos de notre bibliothèque de composants.

Chargeur d’application

Le chargeur est responsable de la gestion de l’état et des interactions entre nos composants. (Incluez-le sous notre Javascript).

<html>
  <body>
    <wink-app-loader
      client-id="VOTRE ID CLIENT ICI"
      configuration-id="VOTRE ID DE PERSONNALISATION ICI"
    ></wink-app-loader>
  </body>
</html>

Chargeur de contenu

Le chargeur de contenu est au cœur de notre bibliothèque de composants web. Il est responsable de l’affichage de votre inventaire (cartes, grilles, cartes géographiques).

Attributs disponibles :

layout
id
sort

L’attribut sort est uniquement disponible lorsque le layout est RANKED et que vous ne souhaitez pas utiliser une grille classée existante. Dans ces cas, laissez id vide.

Types de layout disponibles :

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

Types de tri disponibles :

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>

Des exemples sont disponibles pour les cartes, grilles et cartes géographiques.

Recherche

Le composant Lookup fonctionne très bien avec l’une de vos grilles classées. Il permet à vos utilisateurs de rechercher un hôtel ou une destination et la grille se met à jour en fonction des résultats de recherche.

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

Cliquer sur le composant ci-dessus ouvre une fenêtre modale qui vous permet de taper la destination ou l’hôtel que vous recherchez.

Itinéraire

Le bouton itinéraire affiche l’itinéraire actuel sur le bouton. Lorsque vous cliquez dessus, le sélecteur d’itinéraire complet s’affiche en modal.

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

Composant web Itinéraire

Cliquer sur le bouton ci-dessus ouvre une fenêtre modale qui vous permet de mettre à jour votre itinéraire.

Recherche

Search est un bouton icône uniquement du sélecteur d’itinéraire. Lorsque vous cliquez dessus, le sélecteur d’itinéraire complet s’affiche en modal.

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

Cliquer sur le bouton ci-dessus ouvre une fenêtre modale qui vous permet de mettre à jour votre itinéraire.

Formulaire d’itinéraire

Le composant itinéraire affiche un formulaire d’itinéraire avec lequel les utilisateurs peuvent interagir.

<html>
  <body>
    <wink-itinerary-form></wink-itinerary-form>
  </body>
</html>

Modifier l’itinéraire, dans n’importe lequel de nos composants itinéraire, déclenche l’événement de mise à jour de l’itinéraire pour tout inventaire que vous avez actuellement affiché sur la page.

Compte

Le bouton compte vous permet d’ajouter l’authentification Wink à votre site.

<html>
  <body>
    <wink-account></wink-account>
  </body>
</html>

Cliquer sur le bouton, lorsque l’utilisateur n’est pas authentifié, redirige l’utilisateur vers l’authentification. Lorsque l’utilisateur est authentifié, il affiche l’icône de profil de l’utilisateur.

Lorsque vous cliquez sur le bouton, il ouvre le menu déroulant spécifique à l’utilisateur.

Intégrer TripPay

Il y a deux éléments que vous devez inclure dans toute page où vous souhaitez utiliser le composant web de paiement TripPay.

Inclure notre feuille de style.
Inclure notre Javascript.

Feuille de style

Incluez nos styles CSS dans l’en-tête de votre document.

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

Javascript

Incluez notre Javascript en bas de votre document. (Nous recommandons juste au-dessus de la balise de fin body).

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

Votre site est maintenant prêt et capable d’afficher nos composants web.

Composants

Paiement

Le composant de paiement vous permet d’informer TripPay qu’un voyageur souhaite acheter quelque chose ainsi que les règles et prix pour ces articles.

Il y a un attribut obligatoire pour le widget :

id L’identifiant du contrat de réservation que vous souhaitez exécuter.

<html>
  <body>
    <trip-pay id="<INSERT_BOOKING_CONTRACT_ID>"></trip-pay>
  </body>
</html>

Le widget prépare le contrat pour exécution et affiche les détails de paiement (Figure 1) à l’utilisateur pour finaliser la réservation.

Détails du paiement — *Figure 1. Exemple de formulaire de paiement*

Erreurs

Si vous recevez un message d’erreur lors de l’intégration de l’un de nos composants web, que ce soit sur WinkLinks ou sur votre propre site web, plusieurs choses peuvent avoir mal tourné :

Disponibilité

L’inventaire peut ne plus être disponible. Allez sur Wink Studio et vérifiez si le statut de la « carte » est disponible. S’il ne l’est pas, il apparaîtra en rouge. Dans ce cas, vous pouvez attendre et peut-être que le fournisseur le rende à nouveau disponible ou le retirer de votre liste.

Retiré

L’inventaire peut avoir été retiré. Allez sur Wink Studio et vérifiez si le statut de la « carte » est disponible. S’il ne l’est pas, il apparaîtra en rouge. Dans ce cas, vous pouvez attendre et peut-être que le fournisseur le rende à nouveau disponible ou le retirer de votre liste.

Personnalisation

Vous avez peut-être accidentellement supprimé la personnalisation que vous aviez définie pour accompagner votre inventaire. Assurez-vous que la personnalisation est toujours disponible et définissez-en une nouvelle si elle manque.

Application

Ceci est uniquement pour les développeurs web. Si vous avez accidentellement supprimé l’Application ; rendant l’ID client indisponible, veuillez créer une nouvelle application et utiliser le nouvel ID client pour intégrer nos Composants Web.