HubSpot CMS

HubSpot CMS admet mòduls HTML personalitzats i codi d’encapçalament/pie de pàgina a tot el lloc, cosa que facilita la incrustació de components Wink a pàgines de màrqueting i pàgines d’aterratge.

Carrega els scripts de Wink a tot el lloc

A HubSpot, ves a Marketing → Files and Templates → Design Tools.
Obre el main.css del tema actiu o utilitza la configuració global de contingut.
Alternativament, ves a Settings → Website → Pages → Custom Code.

Al camp Head HTML, afegeix la fulla d’estils:

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

Al camp Footer HTML, afegeix l’script i el carregador d’aplicació (substitueix 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>

Desa i publica.

Afegeix un component mitjançant un mòdul HTML personalitzat

A Design Tools, crea un nou mòdul de tipus Rich Text o HTML.

Al contingut per defecte del mòdul, enganxa el HTML del component:

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

Desa el mòdul i arrossega’l a qualsevol plantilla de pàgina o pàgina utilitzant l’editor de pàgines.

Afegeix un component directament a l’editor de pàgines

Si prefereixes no crear un mòdul, pots utilitzar una secció Custom HTML a l’editor drag-and-drop:

Obre la pàgina a l’editor de pàgines de HubSpot.
Fes clic a Add i tria una secció Custom HTML o Embed.
Enganxa l’etiqueta del component al camp HTML.
Fes clic a Apply i publica la pàgina.

Components disponibles

Component	Etiqueta HTML	Propòsit
Content loader	`<wink-content-loader>`	Mostra targetes d’hotels, graelles, mapes
Lookup	`<wink-lookup>`	Barra de cerca per a destinacions
Search button	`<wink-search-button>`	Obre el selector d’itinerari
Account button	`<wink-account-button>`	Iniciar sessió / menú d’usuari
Itinerary button	`<wink-itinerary-button>`	Mostra l’itinerari actual
Itinerary picker	`<wink-itinerary-picker>`	Formulari complet d’itinerari
Shopping cart	`<wink-shopping-cart-button>`	Botó resum del carretó

Consulta Web Components per a la referència completa d’atributs.