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 el
Book
botón. - Haga clic en el
Gallery
Enlace para ver todas las fotos y vídeos de este inventario. - Haga clic
Best deal
Enlace, si está disponible, para ver la habitación con mejor precio. - Haga clic
Hotel details
Enlace, 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.
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
Sección titulada «Crear una tarjeta»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 card
Haz clic en ese botón y accederás a nuestra página de formulario de tarjeta, donde podrás empezar a personalizarla.
Personalizar tarjeta
Sección titulada «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
Sección titulada «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
Sección titulada «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.
Los desarrolladores que quieran administrar tarjetas pueden dirigirse aDesarrolladores > API > Inventario.
Lectura adicional
Sección titulada «Lectura adicional»- Conozca más sobre nuestra colección deComponentes web.
- Obtenga más información sobre elPlugin Wink para WordPress.