Cards

Una tarjeta representa a un único proveedor (p. ej., un hotel o un proveedor de experiencias) o inventario (p. ej., tipo de habitación, sala de reuniones, spa, etc.) y muestra los detalles mediante una interfaz de usuario interactiva y reservable. El usuario puede interactuar con una tarjeta de las siguientes maneras:

Haga clic en elBook botón.
Haga clic en elGalleryEnlace para ver todas las fotos y vídeos de este inventario.
Haga clicBest dealEnlace, si está disponible, para ver la habitación con mejor precio.
Haga clicHotel detailsEnlace, si está disponible, para ver la información de la propiedad.

Una tarjeta admite múltiples caras para minimizar el tamaño de la tarjeta y categorizar los datos, lo que hace que sea fácilmente consumible por el usuario y le brinda una mayor posibilidad de convertir al usuario en una reserva.

Una carta tiene dos o tres caras:

La tarjeta de un hotel muestra los datos del establecimiento en el anverso y el mejor tipo de habitación en el reverso. El precio, en ambos lados, muestra el mejor precio del hotel.
La tarjeta de tipo de habitación muestra los datos del tipo de habitación en el anverso y los del establecimiento en el reverso. El precio muestra el precio de la habitación en el anverso y el mejor precio del hotel en el reverso.
Todas las demás tarjetas (p. ej., restaurante de spa, etc.) tienen tres caras. Ejemplo: Los datos del spa se muestran en la portada con el mejor precio. Los datos del tipo de habitación con el mejor precio se muestran en la segunda cara. Los datos del alojamiento, junto con la habitación con el mejor precio, se muestran en la tercera cara.

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

Arriba se muestra un ejemplo de nuestra tarjeta de tipo de habitación. Contiene información sobre el alojamiento, las reseñas y la habitación, además de la política de cancelación y las comidas.

El resto de este artículo le mostrará cómo crear, personalizar y exponer la tarjeta a sus usuarios.

Crear una tarjeta

Comportamiento — *Acciones de resultados de búsqueda*

Arriba hay una imagen tomada deBuscary te muestra algunas de las cosas que puedes hacer con tus resultados de búsqueda. Una de esas acciones esMake a cardHaz clic en ese botón y accederás a nuestra página de formulario de tarjeta, donde podrás empezar a personalizarla.

Personalizar tarjeta

El formulario le permite personalizar su tarjeta de las siguientes maneras:

Ponle un nombre para que puedas recordar de qué se trata la tarjeta.
Seleccione el Personalización desea aplicar a esta tarjeta.
Seleccione la cara inicial de la tarjeta que desea que los usuarios vean primero. Por defecto, es la cara nativa de ese inventario.
Seleccione el badge que desea usar en la tarjeta. Una insignia permite a los usuarios comparar el inventario según una métrica agregada como eco-friendly.
Agregue palabras clave, separadas por una coma, que serán utilizadas por Rastreadores web.
Agrega títulos y descripciones en los idiomas que quieres que el usuario vea.
Seleccione una o más imágenes que se mostrarán cuando los usuarios hagan clic en ellas. Gallery enlace.
Haga clic en el Save botón para continuar.

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

Compartir tarjeta

Arriba se muestra una imagen con todas las acciones disponibles para su tarjeta:

ActualizarActualiza la configuración de tu tarjeta.
Añadir a WinkLinksAgrega la tarjeta a tu cuenta de WinkLinks.
EmpotrarLe muestra cómo incrustar esta tarjeta como unaTarjetaen su sitio web.
Usar con WordPressLe muestra cómo utilizar nuestroComplemento de WordPresspara incrustar esta tarjeta en su sitio web.

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

Empotrar

<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ón te explicamos cómo insertar tu tarjeta en tu sitio:

La línea 3 le muestra cómo integrar los estilos Wink en su sitio.
Las líneas 6 a 9 le muestran cómo utilizar elcargador de contenido de winkComponente web y dígale que busque una tarjeta de habitación de invitados para su código.
La línea 11 le muestra cómo integrar nuestro Javascript en su sitio.
La línea 13 le muestra cómo incrustar elCargador de aplicaciones winkComponente web y dígale que obtenga sus preferencias de configuración a nivel de página.

API

Los desarrolladores que quieran administrar tarjetas pueden dirigirse aDesarrolladores > API > Inventario.

Lectura adicional

Conozca más sobre nuestra colección deComponentes web.
Obtenga más información sobre elPlugin Wink para WordPress.