Ghost

La función integrada de Code Injection de Ghost te permite añadir scripts al <head> global y al </body> de tu publicación. Todos los planes de Ghost soportan la inyección de código, facilitando la inserción de componentes de Wink en cualquier página o entrada.

Cargar scripts de Wink en todo el sitio

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

En el cuadro Site Header, añade la hoja de estilos:

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

En el cuadro Site Footer, añade el script y el cargador de la aplicación (reemplaza 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>

Haz clic en Save.

Añadir un componente a una entrada o página

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

Abre la entrada o página en el editor de Ghost.
Escribe / para abrir el selector de tarjetas y selecciona HTML.

Pega el HTML del componente, por ejemplo:

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

Haz clic fuera de la tarjeta para previsualizar y luego publica.

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:

Abre la configuración de la entrada o página (icono de engranaje en el editor).
Desplázate a Code Injection.
Añade la etiqueta del componente en el campo Footer (el app-loader global solo debe estar en el footer del sitio).
Guarda.

Componentes disponibles

Componente	Etiqueta HTML	Propósito
Content loader	`<wink-content-loader>`	Mostrar tarjetas de hotel, cuadrículas, 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

Consulta Web Components para la referencia completa de atributos.