Cartes

Une carte représente un fournisseur unique (par exemple un hôtel ou un prestataire d’expérience) ou un inventaire (c’est-à-dire un type de chambre, une salle de réunion, un spa, etc.) et expose les détails via une interface interactive et réservable sous forme de carte. Un utilisateur peut interagir avec une carte de la manière suivante :

Cliquer sur le bouton Réserver.
Cliquer sur le lien Galerie pour voir toutes les photos et vidéos de cet inventaire.
Cliquer sur le lien Meilleure offre, si disponible, pour voir la chambre au meilleur prix.
Cliquer sur le lien Détails de l'hôtel, si disponible, pour voir les informations sur l’établissement.

Une carte supporte plusieurs faces pour minimiser la taille de la carte et catégoriser les données ; ce qui la rend facilement consommable par l’utilisateur et vous donne plus de chances de convertir l’utilisateur en réservation.

Une carte a soit deux, soit trois faces :

Une carte hôtel affiche les données de l’établissement sur le devant et le meilleur type de chambre au dos. Le prix, sur les deux faces, affiche le meilleur prix pour l’hôtel.
Une carte type de chambre affiche les données du type de chambre sur le devant et les données de l’établissement au dos. Le prix affiche le prix du type de chambre sur le devant et le meilleur prix pour l’hôtel au dos.
Toutes les autres cartes (par exemple spa, restaurant, etc.) ont 3 faces. Exemple : les données du spa s’affichent sur la première face avec le meilleur prix du spa. Les données du type de chambre pour la chambre au meilleur prix sont sur la deuxième face. Les données de l’établissement ainsi que la chambre au meilleur prix sont sur la troisième face de la carte.

Aperçu de la carte — *Carte type de chambre vue de face avec disponibilité*

Ci-dessus un exemple de notre carte type de chambre. Elle contient les données de l’établissement, des avis et de la chambre ainsi que la politique d’annulation et les repas.

Le reste de cet article vous guide pour créer, personnaliser et exposer la carte à vos utilisateurs.

Créer une carte

Ci-dessus une image extraite de Recherche qui vous montre certaines des actions possibles avec vos résultats de recherche. L’une de ces actions est Créer une carte. Cliquez sur ce bouton et vous serez redirigé vers notre page de formulaire de carte où vous pourrez commencer à personnaliser votre carte.

Personnaliser la carte

Le formulaire vous permet de personnaliser votre carte de la manière suivante :

Donnez-lui un nom pour vous souvenir du contenu de la carte.
Sélectionnez la Personnalisation que vous souhaitez appliquer à cette carte.
Sélectionnez la face initiale de la carte que vous voulez que les utilisateurs voient en premier. Par défaut, c’est la face native de cet inventaire.
Sélectionnez le badge que vous souhaitez utiliser sur la carte. Un badge permet aux utilisateurs de comparer l’inventaire selon une métrique agrégée telle que écologique.
Ajoutez des mots-clés, séparés par une virgule, qui seront utilisés par les robots d’indexation.
Ajoutez des titres et descriptions dans les langues que vous souhaitez que l’utilisateur voie.
Sélectionnez une ou plusieurs images qui s’afficheront lorsque les utilisateurs cliqueront sur le lien Galerie.
Cliquez sur le bouton Enregistrer pour continuer.

Après avoir enregistré votre carte, vous êtes redirigé vers votre page de cartes et votre carte est maintenant prête à être partagée avec le monde.

Partager la carte

Ci-dessus une image montrant toutes les actions disponibles pour votre carte :

Mettre à jour Met à jour la configuration de votre carte.
Ajouter à WinkLinks Ajoute la carte à votre compte WinkLinks.
Intégrer Vous montre comment intégrer cette carte en tant que Carte dans votre site web.
Utiliser avec WordPress Vous montre comment utiliser notre plugin WordPress pour intégrer cette carte dans votre site web.

Nous détaillons certaines de ces options ci-dessous.

Intégrer

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

Voici comment intégrer votre carte dans votre site :

La ligne 3 montre comment intégrer les styles Wink dans votre site.
Les lignes 6 à 9 montrent comment utiliser le composant Web wink-content-loader et lui indiquer de récupérer une carte de chambre d’hôte pour votre code.
La ligne 11 montre comment intégrer notre Javascript dans votre site.
La ligne 13 montre comment intégrer le composant Web wink-app-loader et lui indiquer de récupérer vos préférences de configuration au niveau de la page.

API

Les développeurs qui souhaitent gérer les cartes peuvent se rendre sur Développeurs > API > Inventaire.

Pour aller plus loin

En savoir plus sur notre collection de Composants Web.
En savoir plus sur le plugin WordPress Wink.