HubSpot CMS

HubSpot CMS palaiko pasirinktinius HTML modulius ir visos svetainės antraštės/poraštės kodo įterpimą, todėl lengva įterpti Wink komponentus į rinkodaros puslapius ir nukreipimo puslapius.

Įkelkite Wink skriptus visoje svetainėje

HubSpote eikite į Marketing → Files and Templates → Design Tools.
Atidarykite savo aktyvios temos main.css arba naudokite globalias turinio nustatymų parinktis.
Arba eikite į Settings → Website → Pages → Custom Code.

Lauke Head HTML pridėkite stiliaus lapą:

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

Lauke Footer HTML pridėkite skriptą ir programos įkroviklį (pakeiskite 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>

Išsaugokite ir paskelbkite.

Pridėkite komponentą per pasirinktinių HTML modulį

Design Tools sukurkite naują modulį tipo Rich Text arba HTML.

Modulio numatytame turinyje įklijuokite komponento HTML:

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

Išsaugokite modulį ir nutempkite jį į bet kurį puslapio šabloną arba puslapį naudodami puslapio redaktorių.

Pridėkite komponentą tiesiogiai puslapio redaktoriuje

Jei nenorite kurti modulio, galite naudoti Custom HTML sekciją vilkimo ir numetimo redaktoriuje:

Atidarykite puslapį HubSpot puslapio redaktoriuje.
Spustelėkite Add ir pasirinkite Custom HTML arba Embed sekciją.
Įklijuokite komponento žymę į HTML lauką.
Spustelėkite Apply ir paskelbkite puslapį.

Galimi komponentai

Komponentas	HTML žyma	Paskirtis
Turinio įkroviklis	`<wink-content-loader>`	Rodyti viešbučių korteles, tinklus, žemėlapius
Paieška	`<wink-lookup>`	Paieškos juosta kryptims
Paieškos mygtukas	`<wink-search-button>`	Atidaryti maršruto pasirinkimą
Paskyros mygtukas	`<wink-account-button>`	Prisijungimas / vartotojo meniu
Maršruto mygtukas	`<wink-itinerary-button>`	Rodyti esamą maršrutą
Maršruto pasirinkėjas	`<wink-itinerary-picker>`	Pilna maršruto forma
Prekių krepšelio mygtukas	`<wink-shopping-cart-button>`	Krepšelio santraukos mygtukas

Pilną atributų sąrašą žr. Web Components.