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 mediante 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 los datos de la propiedad en el frente y el mejor tipo de habitación en la parte trasera. El precio, en ambos lados, muestra el mejor precio para el hotel.
Una tarjeta de tipo de habitación muestra los datos del tipo de habitación en el frente y los datos de la propiedad en la parte trasera. El precio muestra el precio del tipo de habitación en el frente y el mejor precio para el hotel en la parte trasera.
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 la segunda cara. 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 la 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 datos de la 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 la insignia que quieres usar en la tarjeta. Una insignia permite a los usuarios comparar inventarios según una métrica agregada como eco-amigable.
Añade palabras clave, separadas por comas, que serán usadas por los Web Crawlers.
Añade 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 Añade 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 Componente Web wink-content-loader y decirle que obtenga una tarjeta de habitación para invitados 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 Componente Web wink-app-loader 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 Componentes Web.
Aprende más sobre el plugin de WordPress de Wink.