HubSpot CMS

HubSpot CMS ondersteunt aangepaste HTML-modules en site-brede header/footer code, waardoor het eenvoudig is om Wink-componenten in marketingpagina’s en landingspagina’s in te sluiten.

Laad Wink-scripts site-breed

Ga in HubSpot naar Marketing → Bestanden en Sjablonen → Ontwerptools.
Open de main.css van je actieve thema of gebruik de globale inhoudsinstellingen.
Ga eventueel naar Instellingen → Website → Pagina’s → Aangepaste Code.

Voeg in het veld Head HTML de stylesheet toe:

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

Voeg in het veld Footer HTML het script en de applicatielader toe (vervang 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>

Sla op en publiceer.

Voeg een component toe via een aangepaste HTML-module

Maak in de Ontwerptools een nieuwe module aan van het type Rich Text of HTML.

Plak in de standaardinhoud van de module de component-HTML:

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

Sla de module op en sleep deze in een paginatemplate of pagina met de pagina-editor.

Voeg een component direct toe in de pagina-editor

Als je liever geen module maakt, kun je een Aangepaste HTML-sectie gebruiken in de drag-and-drop editor:

Open de pagina in de HubSpot pagina-editor.
Klik op Toevoegen en kies een Aangepaste HTML of Embed sectie.
Plak de component-tag in het HTML-veld.
Klik op Toepassen en publiceer de pagina.

Beschikbare componenten

Component	HTML-tag	Doel
Content loader	`<wink-content-loader>`	Toon hotelkaarten, grids, kaarten
Lookup	`<wink-lookup>`	Zoekbalk voor bestemmingen
Search button	`<wink-search-button>`	Open reisschema-kiezer
Account button	`<wink-account-button>`	Inloggen / gebruikersmenu
Itinerary button	`<wink-itinerary-button>`	Toon huidig reisschema
Itinerary picker	`<wink-itinerary-picker>`	Volledig reisschemaformulier
Shopping cart	`<wink-shopping-cart-button>`	Winkelwagen samenvattingsknop

Zie Web Components voor de volledige attributenreferentie.