Tarjetas

Una tarjeta representa un único proveedor (por ejemplo, hotel o proveedor de experiencias) o inventario (es decir, tipo de habitación, sala de reuniones, spa, etc.) y muestra los detalles a través de una interfaz interactiva y reservable en forma de tarjeta. Un usuario puede interactuar con una tarjeta de las siguientes maneras:

Hacer clic en el botón Reservar.
Hacer clic en el enlace Galería para ver todas las fotos y videos de este inventario.
Hacer clic en el enlace Mejor oferta, si está disponible, para ver la habitación con mejor precio.
Hacer clic en el enlace Detalles del hotel, si está disponible, para ver la información de la propiedad.

Una tarjeta soporta múltiples caras para minimizar el tamaño de la tarjeta y categorizar los datos; haciéndolos fácilmente consumibles por el usuario y dándote una mayor oportunidad de convertir al usuario en una reserva.

Una tarjeta tiene dos o tres caras:

Una tarjeta de hotel muestra datos de la propiedad en el frente y el mejor tipo de habitación en el reverso. El precio, en ambos lados, muestra el mejor precio para el hotel.
Una tarjeta de tipo de habitación muestra datos del tipo de habitación en el frente y datos de la propiedad en el reverso. El precio muestra el precio del tipo de habitación en el frente y el mejor precio para el hotel en el reverso.
Todas las demás tarjetas (por ejemplo, spa, restaurante, etc.) tienen 3 caras. Ejemplo: Los datos del spa se muestran en la página frontal con el mejor precio del spa. Los datos del tipo de habitación para la habitación con mejor precio están en el segundo lado. Los datos de la propiedad junto con la habitación con mejor precio están en la tercera cara de la tarjeta.

Vista previa de tarjeta — *Tarjeta de tipo de habitación vista frontal con disponibilidad*

Arriba hay un ejemplo de nuestra tarjeta de tipo de habitación. Contiene datos de la propiedad, reseñas y habitación junto con la política de cancelación y comidas.

El resto de este artículo te guía sobre cómo crear, personalizar y mostrar la tarjeta a tus usuarios.

Crear una tarjeta

Arriba hay una imagen tomada de Búsqueda que te muestra algunas de las cosas que puedes hacer con tus resultados de búsqueda. Una de esas acciones es Crear una tarjeta. Haz clic en ese botón y te redirigirá a nuestra página de formulario de tarjeta donde podrás comenzar a personalizar tu tarjeta.

Personalizar tarjeta

El formulario te permite personalizar tu tarjeta de las siguientes maneras:

Dale un nombre para que recuerdes de qué trata la tarjeta.
Selecciona la Personalización que quieres aplicar a esta tarjeta.
Selecciona la cara inicial de la tarjeta que quieres que los usuarios vean primero. Por defecto, es la cara nativa de ese inventario.
Selecciona el distintivo que quieres usar en la tarjeta. Un distintivo permite a los usuarios comparar inventarios en una métrica agregada como eco-amigable.
Agrega palabras clave, separadas por comas, que serán usadas por Web Crawlers.
Agrega títulos y descripciones en los idiomas que quieres que el usuario vea.
Selecciona una o más imágenes que se mostrarán cuando los usuarios hagan clic en el enlace Galería.
Haz clic en el botón Guardar para continuar.

Después de guardar tu tarjeta, serás redirigido a tu página de tarjetas y tu tarjeta estará lista para ser compartida con el mundo.

Compartir tarjeta

Arriba te mostramos una imagen con todas las acciones disponibles para tu tarjeta:

Actualizar Actualiza la configuración de tu tarjeta.
Agregar a WinkLinks Agrega la tarjeta a tu cuenta de WinkLinks.
Incrustar Te muestra cómo incrustar esta tarjeta como un Card en tu sitio web.
Usar con WordPress Te muestra cómo usar nuestro plugin de WordPress para incrustar esta tarjeta en tu sitio web.

A continuación, cubrimos algunas de estas opciones con más detalle.

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>

Aquí te mostramos cómo incrustar tu tarjeta en tu sitio:

La línea 3 te muestra cómo incrustar los estilos de Wink en tu sitio.
Las líneas 6 a 9 te muestran cómo usar el wink-content-loader Web Component y decirle que obtenga una tarjeta de habitación para tu código.
La línea 11 te muestra cómo incrustar nuestro Javascript en tu sitio.
La línea 13 te muestra cómo incrustar el wink-app-loader Web Component y decirle que obtenga tus preferencias de configuración a nivel de página.

API

Los desarrolladores que quieran gestionar tarjetas pueden dirigirse a Desarrolladores > API > Inventario.

Lecturas adicionales

Aprende más sobre nuestra colección de Web Components.
Aprende más sobre el plugin de WordPress de Wink.