HubSpot CMS

HubSpot CMS soporta módulos HTML personalizados y código para encabezado/pie de página a nivel de sitio, lo que facilita insertar componentes de Wink en páginas de marketing y páginas de destino.

Cargar scripts de Wink a nivel de sitio

En HubSpot, ve a Marketing → Archivos y Plantillas → Herramientas de Diseño.
Abre el main.css de tu tema activo o usa la configuración global de contenido.
Alternativamente, ve a Configuración → Sitio web → Páginas → Código personalizado.

En el campo Head HTML, agrega la hoja de estilos:

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

En el campo Footer HTML, 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>

Guarda y publica.

Agrega un componente mediante un módulo HTML personalizado

En Herramientas de Diseño, crea un nuevo módulo de tipo Texto enriquecido o HTML.

En el contenido predeterminado del módulo, pega el HTML del componente:

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

Guarda el módulo y arrástralo a cualquier plantilla de página o página usando el editor de páginas.

Agrega un componente directamente en el editor de páginas

Si prefieres no crear un módulo, puedes usar una sección de HTML personalizado en el editor de arrastrar y soltar:

Abre la página en el editor de páginas de HubSpot.
Haz clic en Agregar y elige una sección de HTML personalizado o Insertar.
Pega la etiqueta del componente en el campo HTML.
Haz clic en Aplicar y publica la página.

Componentes disponibles

Componente	Etiqueta HTML	Propósito
Cargador de contenido	`<wink-content-loader>`	Mostrar tarjetas de hotel, cuadrículas, mapas
Búsqueda	`<wink-lookup>`	Barra de búsqueda para destinos
Botón de búsqueda	`<wink-search-button>`	Abrir selector de itinerario
Botón de cuenta	`<wink-account-button>`	Iniciar sesión / menú de usuario
Botón de itinerario	`<wink-itinerary-button>`	Mostrar itinerario actual
Selector de itinerario	`<wink-itinerary-picker>`	Formulario completo de itinerario
Carrito de compras	`<wink-shopping-cart-button>`	Botón resumen del carrito

Consulta Web Components para la referencia completa de atributos.