HubSpot CMS

HubSpot CMS tukee mukautettuja HTML-moduuleja sekä koko sivuston header/footer-koodia, mikä tekee Wink-komponenttien upottamisesta markkinointisivuille ja laskeutumissivuille helppoa.

Lataa Wink-skriptit koko sivustolle

Mene HubSpotissa kohtaan Marketing → Files and Templates → Design Tools.
Avaa aktiivisen teeman main.css tai käytä globaaleja sisältöasetuksia.
Vaihtoehtoisesti mene kohtaan Settings → Website → Pages → Custom Code.

Lisää Head HTML -kenttään tyylitiedosto:

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

Lisää Footer HTML -kenttään skripti ja sovelluksen lataaja (korvaa 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>

Tallenna ja julkaise.

Lisää komponentti mukautetun HTML-moduulin kautta

Design Toolsissa luo uusi moduuli tyypillä Rich Text tai HTML.

Liitä moduulin oletussisältöön komponentin HTML:

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

Tallenna moduuli ja vedä se mihin tahansa sivupohjaan tai sivulle sivunmuokkaimella.

Lisää komponentti suoraan sivunmuokkaimessa

Jos et halua luoda moduulia, voit käyttää Custom HTML -osiota vedä-ja-pudota -editorissa:

Avaa sivu HubSpotin sivunmuokkaimessa.
Klikkaa Add ja valitse Custom HTML tai Embed -osio.
Liitä komponenttitag HTML-kenttään.
Klikkaa Apply ja julkaise sivu.

Saatavilla olevat komponentit

Komponentti	HTML-tagi	Tarkoitus
Content loader	`<wink-content-loader>`	Näytä hotellikortit, ruudukot, kartat
Lookup	`<wink-lookup>`	Hakupalkki kohteille
Search button	`<wink-search-button>`	Avaa matkasuunnitelman valitsin
Account button	`<wink-account-button>`	Kirjaudu sisään / käyttäjävalikko
Itinerary button	`<wink-itinerary-button>`	Näytä nykyinen matkasuunnitelma
Itinerary picker	`<wink-itinerary-picker>`	Koko matkasuunnitelman lomake
Shopping cart	`<wink-shopping-cart-button>`	Ostoskorin yhteenvetopainike

Katso Web Components täydellinen attribuuttiviite.