Webflow

Webflow understøtter brugerdefineret HTML og JavaScript på tre steder: det sitespecifikke <head>, det sitespecifikke </body>, og per-element kodeindlejringer. Dette gør integrationen af Wink webkomponenter enkel.

Indlæs Wink scripts sitespecifikt

I Webflow Designer, åbn Project Settings → Custom Code.

I sektionen Head Code, tilføj stylesheetet:

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

I sektionen Footer Code, tilføj scriptet og applikationsloaderen (erstat 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 på Save Changes.

Tilføj en komponent til et specifikt element

I Designer, vælg den Div eller Section, hvor du vil placere komponenten.
I højre panel, klik på </> Embed-ikonet (eller tilføj et HTML Embed-element fra Tilføj-panelet).

Indsæt komponentens HTML, for eksempel:

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

Klik på Save & Close.

Brugerdefineret kode per side

Hvis du kun har brug for Wink på specifikke sider, brug da per-side kodeindsprøjtning i stedet for sitespecifik:

Åbn Page Settings for den ønskede side (tandhjulsikon i Pages-panelet).
Rul ned til Custom Code → Before </body> tag.
Indsæt det samme script og app-loader som ovenfor.
Gem sideindstillingerne.

Tilgængelige komponenter

Komponent	HTML-tag	Formål
Content loader	`<wink-content-loader>`	Vis hotelkort, gitter, kort
Lookup	`<wink-lookup>`	Søgefelt til destinationer
Search button	`<wink-search-button>`	Åbn rejseplanvælger
Account button	`<wink-account-button>`	Log ind / brugermenu
Itinerary button	`<wink-itinerary-button>`	Vis aktuel rejseplan
Itinerary picker	`<wink-itinerary-picker>`	Fuld rejseplansformular
Shopping cart	`<wink-shopping-cart-button>`	Oversigt over indkøbskurv

Se Web Components for den fulde attributreference.