Ghost

La función integrada de Code Injection de Ghost te permite agregar 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 publicación.

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, agrega la hoja de estilos:

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

En el cuadro Site Footer, agrega 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.

Agregar un componente a una publicación 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 publicación 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, 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 inyección de código por página:

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

Componentes disponibles

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