Webflow

Webflow stödjer anpassad HTML och JavaScript på tre platser: i hela webbplatsens <head>, i hela webbplatsens </body>, och per-element kodinbäddningar. Detta gör integrationen av Wink webbkomponenter enkel.

Ladda Wink-skript för hela webbplatsen

I Webflow Designer, öppna Project Settings → Custom Code.

I sektionen Head Code, lägg till stylesheet:

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

I sektionen Footer Code, lägg till skriptet och applikationsladdaren (byt ut 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>

Klicka på Save Changes.

Lägg till en komponent i ett specifikt element

I Designer, välj den Div eller Section där du vill ha komponenten.
I högra panelen, klicka på ikonen </> Embed (eller lägg till ett HTML Embed-element från Add-panelen).

Klistra in komponentens HTML, till exempel:

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

Klicka på Save & Close.

Anpassad kod per sida

Om du bara behöver Wink på specifika sidor, använd kodinjektion per sida istället för för hela webbplatsen:

Öppna Page Settings för målsidan (kugghjulsikonen i Pages-panelen).
Scrolla till Custom Code → Before </body> tag.
Klistra in samma skript och app-laddare som ovan.
Spara sidinställningarna.

Tillgängliga komponenter

Komponent	HTML-tag	Syfte
Content loader	`<wink-content-loader>`	Visa hotellkort, rutnät, kartor
Lookup	`<wink-lookup>`	Sökruta för destinationer
Search button	`<wink-search-button>`	Öppna resplanväljare
Account button	`<wink-account-button>`	Logga in / användarmeny
Itinerary button	`<wink-itinerary-button>`	Visa aktuell resplan
Itinerary picker	`<wink-itinerary-picker>`	Fullständig resplanformulär
Shopping cart	`<wink-shopping-cart-button>`	Kundvagnssammanfattning knapp

Se Web Components för fullständig attributreferens.