Webflow

Webflow støtter egendefinert HTML og JavaScript på tre steder: i hele nettstedets <head>, i hele nettstedets </body>, og per-element kodeinnbeddinger. Dette gjør integrering av Wink webkomponenter enkel.

Last inn Wink-skript på hele nettstedet

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

I seksjonen Head Code, legg til stilarket:

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

I seksjonen Footer Code, legg til skriptet og applikasjonslasteren (erstatt 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>

Klikk Save Changes.

Legg til en komponent i et spesifikt element

I Designer, velg Div eller Section der du vil ha komponenten.
I høyre panel, klikk på </> Embed-ikonet (eller legg til et HTML Embed-element fra Add-panelet).

Lim inn komponentens HTML, for eksempel:

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

Klikk Save & Close.

Egendefinert kode per side

Hvis du kun trenger Wink på spesifikke sider, bruk kodeinnsprøyting per side i stedet for på hele nettstedet:

Åpne Page Settings for mål-siden (tannhjulikon i Pages-panelet).
Bla ned til Custom Code → Before </body> tag.
Lim inn samme skript og app-laster som ovenfor.
Lagre sideinnstillingene.

Tilgjengelige komponenter

Komponent	HTML-tag	Formål
Content loader	`<wink-content-loader>`	Vis hotellkort, rutenett, kart
Lookup	`<wink-lookup>`	Søkelinje for destinasjoner
Search button	`<wink-search-button>`	Åpne reiseplanlegger
Account button	`<wink-account-button>`	Logg inn / brukermeny
Itinerary button	`<wink-itinerary-button>`	Vis gjeldende reiserute
Itinerary picker	`<wink-itinerary-picker>`	Fullstendig reiseruteskjema
Shopping cart	`<wink-shopping-cart-button>`	Handlekurvsammendrag-knapp

Se Web Components for fullstendig attributtreferanse.