HubSpot CMS

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

Cargar scripts de Wink en todo el sitio

En HubSpot, vaya a Marketing → Archivos y plantillas → Herramientas de diseño.
Abra el main.css de su tema activo o use la configuración global de contenido.
Alternativamente, vaya a Configuración → Sitio web → Páginas → Código personalizado.

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

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

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

Guarde y publique.

Agregar un componente mediante un módulo HTML personalizado

En Herramientas de diseño, cree un nuevo módulo de tipo Rich Text o HTML.

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

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

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

Agregar un componente directamente en el editor de páginas

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

Abra la página en el editor de páginas de HubSpot.
Haga clic en Agregar y elija una sección de HTML personalizado o Insertar.
Pegue la etiqueta del componente en el campo HTML.
Haga clic en Aplicar y publique la página.

Componentes disponibles

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

Consulte Web Components para la referencia completa de atributos.