Saltar al contingut
Academy

Cards

Una targeta representa un únic proveïdor (per exemple, un hotel o un proveïdor d’experiències) o inventari (és a dir, un tipus d’habitació, una sala de reunions, un spa, etc.) i exposa els detalls a través d’una interfície d’usuari de targeta interactiva i que es pot reservar. Un usuari pot interactuar amb una targeta de les maneres següents:

  • Feu clic aBookbotó.
  • Feu clic aGalleryenllaç per veure totes les fotos i vídeos d’aquest inventari.
  • Feu clicBest dealenllaç, si està disponible, per veure l’habitació amb el millor preu.
  • Feu clicHotel detailsenllaç, si n’hi ha, per veure la informació de la propietat.

Una targeta admet múltiples cares per minimitzar la mida de la targeta i categoritzar les dades; fent-la fàcilment consumible per l’usuari i donant una major possibilitat de convertir l’usuari en una reserva.

Una carta té dues o tres cares:

  • Una targeta d’hotel mostra les dades de la propietat a la part frontal i el millor tipus d’habitació al revers. El preu, a banda i banda, mostra el millor preu de l’hotel.
  • Una targeta de tipus d’habitació mostra les dades del tipus d’habitació a la part frontal i les dades de la propietat a la part posterior. El preu mostra el preu del tipus d’habitació a la part frontal i el millor preu de l’hotel a la part posterior.
  • Totes les altres targetes (per exemple, restaurant de spa, etc.) tenen 3 cares. Exemple: les dades del spa es mostren a la pàgina principal amb el millor preu del spa. Les dades del tipus d’habitació per a l’habitació amb el millor preu es troben a la segona cara. Les dades de la propietat juntament amb l’habitació amb el millor preu es troben a la tercera cara de la targeta.
Vista prèvia de la targeta
Targeta de tipus d’habitació frontal amb disponibilitat

A dalt hi ha un exemple de la nostra targeta de tipus d’habitació. Conté la propietat, la ressenya i les dades de l’habitació, juntament amb la política de cancel·lació i els àpats.

La resta d’aquest article us guiarà sobre com crear, personalitzar i exposar la targeta als vostres usuaris.

Crea una targeta

Section titled “Crea una targeta”
Accions
Accions dels resultats de la cerca

A dalt hi ha una imatge extreta deCercai et mostra algunes de les coses que pots fer amb els resultats de la cerca. Una d’aquestes accions ésMake a cardFeu clic en aquest botó i us redirigirà a la nostra pàgina de formulari de targeta, on podreu començar a personalitzar la vostra targeta.

Personalitza la targeta

Section titled “Personalitza la targeta”

El formulari et permet personalitzar la teva targeta de les maneres següents:

  1. Posa-li un nom per recordar de què tracta la targeta.
  2. Seleccioneu el Personalització vols sol·licitar aquesta targeta.
  3. Seleccioneu la cara inicial de la carta que voleu que els usuaris vegin primer. Per defecte, és la cara original d’aquest inventari.
  4. Seleccioneu el badge que voleu utilitzar a la targeta. Una insígnia permet als usuaris comparar l’inventari en una mètrica agregada com ara eco-friendly.
  5. Afegiu paraules clau, separades per una coma, que seran utilitzades per Rastrejadors web.
  6. Afegiu títols i descripcions en els idiomes que voleu que l’usuari vegi.
  7. Seleccioneu una o més imatges que es mostraran quan els usuaris facin clic a Gallery enllaç.
  8. Feu clic a Save botó per continuar.

Després de desar la targeta, se us redirigirà a la pàgina de les vostres targetes i ja la podeu compartir amb el món.

Targeta per compartir

Section titled “Targeta per compartir”
Targeta
Targeta amb menú d’accions replegat

A dalt es mostra una imatge amb totes les accions disponibles per a la teva targeta:

  • ActualitzacióActualitza la configuració de la targeta.
  • Afegeix a WinkLinksAfegeix la targeta al teu compte de WinkLinks.
  • IncrustarEt mostra com incrustar aquesta targeta com aTargetaal vostre lloc web.
  • Utilitzar amb WordPressEt mostra com utilitzar el nostreComplement de WordPressper incrustar aquesta targeta al vostre lloc web.

A continuació, tractem algunes d’aquestes opcions amb més detall.

Incrustar

Section titled “Incrustar”
<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>

A continuació s’explica com s’insereix la targeta al lloc web:

  • La línia 3 us mostra com integrar els estils Wink al vostre lloc web.
  • Les línies 6 a 9 us mostren com utilitzar-lescarregador de contingut winkComponent web i digueu-li que busqui una targeta d’habitació per al vostre codi.
  • La línia 11 us mostra com integrar el nostre Javascript al vostre lloc web.
  • La línia 13 mostra com incrustar elcarregador d’aplicacions winkComponent web i indica-li que obtingui les teves preferències de configuració a nivell de pàgina.

API

Section titled “API”

Els desenvolupadors que vulguin gestionar targetes poden anar aDesenvolupadors > API > Inventari.

Lectures addicionals

Section titled “Lectures addicionals”