HubSpot CMS

Sinusuportahan ng HubSpot CMS ang mga custom HTML module at site-wide header/footer code, kaya madaling i-embed ang mga Wink component sa mga marketing page at landing page.

I-load ang Wink scripts site-wide

Sa HubSpot, pumunta sa Marketing → Files and Templates → Design Tools.
Buksan ang aktibong theme na main.css o gamitin ang global content settings.
Bilang alternatibo, pumunta sa Settings → Website → Pages → Custom Code.

Sa Head HTML field, idagdag ang stylesheet:

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

Sa Footer HTML field, idagdag ang script at application loader (palitan ang 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-save at i-publish.

Magdagdag ng component gamit ang Custom HTML module

Sa Design Tools, gumawa ng bagong module na uri ay Rich Text o HTML.

Sa default na nilalaman ng module, i-paste ang component HTML:

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

I-save ang module at i-drag ito sa anumang page template o page gamit ang page editor.

Magdagdag ng component direkta sa page editor

Kung ayaw mong gumawa ng module, maaari kang gumamit ng Custom HTML section sa drag-and-drop editor:

Buksan ang page sa HubSpot page editor.
I-click ang Add at piliin ang Custom HTML o Embed section.
I-paste ang component tag sa HTML field.
I-click ang Apply at i-publish ang page.

Mga available na component

Component	HTML tag	Layunin
Content loader	`<wink-content-loader>`	Ipakita ang mga hotel card, grid, mapa
Lookup	`<wink-lookup>`	Search bar para sa mga destinasyon
Search button	`<wink-search-button>`	Buksan ang itinerary picker
Account button	`<wink-account-button>`	Mag-sign in / user menu
Itinerary button	`<wink-itinerary-button>`	Ipakita ang kasalukuyang itinerary
Itinerary picker	`<wink-itinerary-picker>`	Buong itinerary form
Shopping cart	`<wink-shopping-cart-button>`	Cart summary button

Tingnan ang Web Components para sa buong attribute reference.