Webflow

Sinusuportahan ng Webflow ang custom HTML at JavaScript sa tatlong lugar: ang site-wide <head>, ang site-wide </body>, at per-element code embeds. Ginagawa nitong diretso ang pag-integrate ng Wink web components.

I-load ang Wink scripts site-wide

Sa Webflow Designer, buksan ang Project Settings → Custom Code.

Sa seksyong Head Code, idagdag ang stylesheet:

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

Sa seksyong Footer Code, 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-click ang Save Changes.

Magdagdag ng component sa isang partikular na elemento

Sa Designer, piliin ang Div o Section kung saan mo gustong ilagay ang component.
Sa kanang panel, i-click ang </> Embed icon (o magdagdag ng HTML Embed element mula sa Add panel).

I-paste ang component HTML, halimbawa:

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

I-click ang Save & Close.

Per-page custom code

Kung kailangan mo lang ang Wink sa mga partikular na pahina, gamitin ang per-page code injection sa halip na site-wide:

Buksan ang Page Settings para sa target na pahina (gear icon sa Pages panel).
Mag-scroll sa Custom Code → Before </body> tag.
I-paste ang parehong script at app loader tulad ng nasa itaas.
I-save ang page settings.

Mga available na components

Component	HTML tag	Layunin
Content loader	`<wink-content-loader>`	Ipakita ang hotel cards, grids, maps
Lookup	`<wink-lookup>`	Search bar para sa mga destinasyon
Search button	`<wink-search-button>`	Buksan ang itinerary picker
Account button	`<wink-account-button>`	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.