HubSpot CMS

HubSpot CMS understøtter brugerdefinerede HTML-moduler og site-wide header/footer-kode, hvilket gør det nemt at integrere Wink-komponenter på marketing- og landingssider.

Indlæs Wink scripts site-wide

Gå i HubSpot til Marketing → Files and Templates → Design Tools.
Åbn dit aktive themes main.css eller brug de globale indholdsindstillinger.
Alternativt gå til Settings → Website → Pages → Custom Code.

Tilføj i feltet Head HTML stylesheetet:

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

Tilføj i feltet Footer HTML scriptet og applikationsloaderen (erstat 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>

Gem og publicer.

Tilføj en komponent via et brugerdefineret HTML-modul

Opret i Design Tools et nyt modul af typen Rich Text eller HTML.

Indsæt i modullets standardindhold komponentens HTML:

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

Gem modulet og træk det ind i en hvilken som helst sidemal eller side via sideeditoren.

Tilføj en komponent direkte i sideeditoren

Hvis du foretrækker ikke at oprette et modul, kan du bruge en Custom HTML sektion i drag-and-drop editoren:

Åbn siden i HubSpot sideeditor.
Klik på Add og vælg en Custom HTML eller Embed sektion.
Indsæt komponent-tagget i HTML-feltet.
Klik på Apply og publicer siden.

Tilgængelige komponenter

Komponent	HTML-tag	Formål
Content loader	`<wink-content-loader>`	Vis hotelkort, grids, kort
Lookup	`<wink-lookup>`	Søgefelt til destinationer
Search button	`<wink-search-button>`	Åbn rejseplanvælger
Account button	`<wink-account-button>`	Log ind / brugermenu
Itinerary button	`<wink-itinerary-button>`	Vis aktuel rejseplan
Itinerary picker	`<wink-itinerary-picker>`	Fuld rejseplansformular
Shopping cart	`<wink-shopping-cart-button>`	Oversigt over indkøbskurv

Se Web Components for den fulde attributreference.