Webflow

Tento obsah zatiaľ nie je dostupný vo vašom jazyku.

Webflow supports custom HTML and JavaScript in three places: the site-wide <head>, the site-wide </body>, and per-element code embeds. This makes integrating Wink web components straightforward.

Load Wink scripts site-wide

In the Webflow Designer, open Project Settings → Custom Code.

In the Head Code section, add the stylesheet:

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

In the Footer Code section, add the script and application loader (replace 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>

Click Save Changes.

Add a component to a specific element

In the Designer, select the Div or Section where you want the component.
In the right panel, click the </> Embed icon (or add an HTML Embed element from the Add panel).

Paste the component HTML, for example:

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

Click Save & Close.

Per-page custom code

If you only need Wink on specific pages, use per-page code injection instead of site-wide:

Open the Page Settings for the target page (gear icon in the Pages panel).
Scroll to Custom Code → Before </body> tag.
Paste the same script and app loader as above.
Save the page settings.

Available components

Component	HTML tag	Purpose
Content loader	`<wink-content-loader>`	Display hotel cards, grids, maps
Lookup	`<wink-lookup>`	Search bar for destinations
Search button	`<wink-search-button>`	Open itinerary picker
Account button	`<wink-account-button>`	Sign in / user menu
Itinerary button	`<wink-itinerary-button>`	Show current itinerary
Itinerary picker	`<wink-itinerary-picker>`	Full itinerary form
Shopping cart	`<wink-shopping-cart-button>`	Cart summary button

See Web Components for the full attribute reference.