HubSpot CMS

HubSpot CMS støtter tilpassede HTML-moduler og nettstedomfattende header/footer-kode, noe som gjør det enkelt å integrere Wink-komponenter på markedsføringssider og landingssider.

Last inn Wink-skript nettstedomfattende

I HubSpot, gå til Marketing → Files and Templates → Design Tools.
Åpne ditt aktive tema sin main.css eller bruk de globale innstillingene for innhold.
Alternativt, gå til Settings → Website → Pages → Custom Code.

I feltet Head HTML, legg til stilarket:

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

I feltet Footer HTML, legg til skriptet og applikasjonslasteren (erstatt 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>

Lagre og publiser.

Legg til en komponent via en tilpasset HTML-modul

I Design Tools, opprett en ny modul av typen Rich Text eller HTML.

Lim inn komponentens HTML i modulens standardinnhold:

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

Lagre modulen og dra den inn i en hvilken som helst sidemal eller side ved hjelp av sideeditoren.

Legg til en komponent direkte i sideeditoren

Hvis du foretrekker å ikke lage en modul, kan du bruke en Custom HTML-seksjon i dra-og-slipp-editoren:

Åpne siden i HubSpot sideeditor.
Klikk Add og velg en Custom HTML eller Embed-seksjon.
Lim inn komponenttaggen i HTML-feltet.
Klikk Apply og publiser siden.

Tilgjengelige komponenter

Komponent	HTML-tag	Formål
Content loader	`<wink-content-loader>`	Vis hotellkort, rutenett, kart
Lookup	`<wink-lookup>`	Søkelinje for destinasjoner
Search button	`<wink-search-button>`	Åpne reiseplanlegger
Account button	`<wink-account-button>`	Logg inn / brukermeny
Itinerary button	`<wink-itinerary-button>`	Vis gjeldende reiserute
Itinerary picker	`<wink-itinerary-picker>`	Fullstendig reiseruteskjema
Shopping cart	`<wink-shopping-cart-button>`	Handlekurvsammendrag-knapp

Se Web Components for fullstendig attributtreferanse.