Cards

Une carte représente un fournisseur (par exemple, un hôtel ou un prestataire d’expériences) ou un inventaire (par exemple, un type de chambre, une salle de réunion, un spa, etc.) et présente les détails via une interface interactive et réservable. Un utilisateur peut interagir avec une carte des manières suivantes :

Cliquez sur leBook bouton.
Cliquez sur leGallerylien pour voir toutes les photos et vidéos de cet inventaire.
CliquezBest deallien, si disponible, pour voir la chambre au meilleur prix.
CliquezHotel detailslien, si disponible, pour voir les informations de la propriété.

Une carte prend en charge plusieurs faces pour minimiser la taille de la carte et catégoriser les données ; la rendant facilement consommable par l’utilisateur et vous donnant une plus grande chance de convertir l’utilisateur en une réservation.

Une carte a deux ou trois faces :

La carte d’un hôtel présente les informations de l’établissement au recto et le meilleur type de chambre au verso. Le prix, recto verso, indique le meilleur tarif pour l’hôtel.
La carte de type de chambre présente les informations relatives au type de chambre au recto et les informations sur l’établissement au verso. Le prix indique le prix de la chambre au recto et le meilleur tarif pour l’hôtel au verso.
Toutes les autres cartes (par exemple, restaurant spa, etc.) ont trois faces. Exemple : les données du spa s’affichent sur la première page, avec le meilleur prix. Les informations sur le type de chambre pour la chambre la plus avantageuse figurent sur la deuxième face. Les informations sur l’établissement et la chambre la plus avantageuse figurent sur la troisième face.

Aperçu de la carte — *Carte de type de chambre en façade avec disponibilité*

Ci-dessus, un exemple de notre fiche de type de chambre. Elle contient les informations sur l’établissement, les avis et la chambre, ainsi que les conditions d’annulation et les repas.

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

Créer une carte

Actes — *Actions des résultats de recherche*

Ci-dessus, une image prise à partir deRechercheet vous présente quelques actions possibles avec vos résultats de recherche. L’une de ces actions estMake a cardCliquez 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 des manières suivantes :

Donnez-lui un nom pour vous rappeler de quoi parle la carte.
Sélectionnez le Personnalisation vous souhaitez postuler à cette carte.
Sélectionnez la face de la carte que vous souhaitez montrer en premier aux utilisateurs. Par défaut, il s’agit de la face native de cet inventaire.
Sélectionnez le badge Vous souhaitez utiliser la carte. Un badge permet aux utilisateurs de comparer l’inventaire selon une mesure globale, telle que eco-friendly.
Ajoutez des mots-clés, séparés par une virgule, qui seront utilisés par Robots d’exploration Web.
Ajoutez des titres et des descriptions dans les langues que vous souhaitez que l’utilisateur voie.
Sélectionnez une ou plusieurs images qui s’afficheront lorsque les utilisateurs cliqueront dessus. Gallery lien.
Cliquez sur le Save bouton 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.

Carte de partage

Ci-dessus, vous trouverez une image avec toutes les actions disponibles pour votre carte :

Mise à jourMet à jour la configuration de votre carte.
Ajouter à WinkLinksAjoute la carte à votre compte WinkLinks.
IntégrerVous montre comment intégrer cette carte en tant queCartedans votre site Web.
Utiliser avec WordPressVous montre comment utiliser notrePlugin WordPresspour intégrer cette carte dans votre site Web.

Nous couvrons certaines de ces options, plus en détail, 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 vous montre comment intégrer les styles Wink dans votre site.
Les lignes 6 à 9 vous montrent comment utiliser lechargeur de contenu winkComposant Web et dites-lui de récupérer une carte de chambre d’amis pour votre code.
La ligne 11 vous montre comment intégrer notre Javascript dans votre site.
La ligne 13 vous montre comment intégrer lechargeur d’application winkComposant Web et dites-lui 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 surDéveloppeurs > API > Inventaire.

Lectures complémentaires

En savoir plus sur notre collection deComposants Web.
En savoir plus sur lePlugin WordPress Wink.