Ghost

La función integrada de Code Injection de Ghost le permite agregar scripts al <head> global y al </body> de su publicación. Todos los planes de Ghost soportan la inyección de código, lo que facilita insertar componentes de Wink en cualquier página o publicación.

Cargar scripts de Wink en todo el sitio

En el panel de administración de Ghost, vaya a Settings → Code Injection.

En el cuadro Site Header, agregue la hoja de estilos:

<link rel="stylesheet" href="https://elements.wink.travel/styles.css">

En el cuadro Site Footer, agregue el script y el cargador de la aplicación (reemplace YOUR_CLIENT_ID):

<script src="https://elements.wink.travel/elements.js" type="module" defer></script>
<wink-app-loader client-id="YOUR_CLIENT_ID"></wink-app-loader>

Haga clic en Save.

Agregar un componente a una publicación o página

El editor de Ghost soporta una tarjeta HTML que le permite insertar HTML sin procesar en cualquier parte de su contenido.

Abra la publicación o página en el editor de Ghost.
Escriba / para abrir el selector de tarjetas y seleccione HTML.

Pegue el HTML del componente, por ejemplo:

<wink-content-loader
  layout="HOTEL"
  id="YOUR_LAYOUT_ID"
></wink-content-loader>

Haga clic fuera de la tarjeta para previsualizar, luego publique.

Inyección de código por página

Para un componente que solo debe aparecer en una página, Ghost también soporta la inyección de código por página:

Abra la configuración de la publicación o página (icono de engranaje en el editor).
Desplácese hasta Code Injection.
Agregue la etiqueta del componente en el campo Footer (el app-loader global solo debe estar en el footer del sitio).
Guarde.

Componentes disponibles

Componente	Etiqueta HTML	Propósito
Content loader	`<wink-content-loader>`	Mostrar tarjetas de hotel, grillas, mapas
Lookup	`<wink-lookup>`	Barra de búsqueda para destinos
Search button	`<wink-search-button>`	Abrir selector de itinerario
Account button	`<wink-account-button>`	Iniciar sesión / menú de usuario
Itinerary button	`<wink-itinerary-button>`	Mostrar itinerario actual
Itinerary picker	`<wink-itinerary-picker>`	Formulario completo de itinerario
Shopping cart	`<wink-shopping-cart-button>`	Botón resumen del carrito

Consulte Web Components para la referencia completa de atributos.