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, añade la hoja de estilos:

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

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

Guarda y publica.

Añadir un componente mediante un módulo HTML personalizado

En Herramientas de Diseño, crea un nuevo módulo de tipo Rich Text 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.

Añadir 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
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.