Webflow

Webflow ondersteunt aangepaste HTML en JavaScript op drie plaatsen: de site-brede <head>, de site-brede </body>, en per-element code-embeds. Dit maakt het integreren van Wink webcomponenten eenvoudig.

Laad Wink-scripts site-breed

Open in de Webflow Designer Projectinstellingen → Aangepaste code.

Voeg in de sectie Head Code het stylesheet toe:

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

Voeg in de sectie Footer Code het script en de applicatielader toe (vervang 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>

Klik op Wijzigingen opslaan.

Voeg een component toe aan een specifiek element

Selecteer in de Designer de Div of Sectie waar je het component wilt plaatsen.
Klik in het rechterpaneel op het </> Embed-icoon (of voeg een HTML Embed-element toe vanuit het Add-paneel).

Plak de component-HTML, bijvoorbeeld:

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

Klik op Opslaan & Sluiten.

Aangepaste code per pagina

Als je Wink alleen op specifieke pagina’s nodig hebt, gebruik dan per-pagina code-injectie in plaats van site-breed:

Open de Pagina-instellingen voor de doelpagina (tandwiel-icoon in het Pagina-paneel).
Scroll naar Aangepaste code → Voor de </body> tag.
Plak hetzelfde script en de app-lader als hierboven.
Sla de pagina-instellingen op.

Beschikbare componenten

Component	HTML-tag	Doel
Content loader	`<wink-content-loader>`	Toon hotelkaarten, grids, kaarten
Lookup	`<wink-lookup>`	Zoekbalk voor bestemmingen
Zoekknop	`<wink-search-button>`	Open reisschema-kiezer
Accountknop	`<wink-account-button>`	Inloggen / gebruikersmenu
Reisschema-knop	`<wink-itinerary-button>`	Toon huidig reisschema
Reisschema-kiezer	`<wink-itinerary-picker>`	Volledig reisschema-formulier
Winkelwagen	`<wink-shopping-cart-button>`	Samenvattingsknop winkelwagen

Zie Web Components voor de volledige attributenreferentie.