Webflow

Webflow podpira prilagojen HTML in JavaScript na treh mestih: v celotnem spletnem mestu v <head>, v celotnem spletnem mestu pred </body> in v vdelavah kode na posameznih elementih. To omogoča enostavno integracijo Wink spletnih komponent.

Naložite Wink skripte za celotno spletno mesto

V Webflow Designerju odprite Project Settings → Custom Code.

V razdelku Head Code dodajte slogovno datoteko:

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

V razdelku Footer Code dodajte skripto in nalagalnik aplikacije (zamenjajte 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>

Kliknite Save Changes.

Dodajte komponento na določen element

V Designerju izberite Div ali Section, kamor želite dodati komponento.
V desnem panelu kliknite ikono </> Embed (ali dodajte element HTML Embed iz Add panela).

Prilepite HTML komponente, na primer:

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

Kliknite Save & Close.

Prilagojena koda na posamezni strani

Če potrebujete Wink samo na določenih straneh, uporabite vdelavo kode na posamezni strani namesto za celotno spletno mesto:

Odprite Page Settings za ciljno stran (ikona zobnika v Pages panelu).
Pomaknite se do Custom Code → Before </body> tag.
Prilepite isto skripto in nalagalnik aplikacije kot zgoraj.
Shrani nastavitve strani.

Na voljo komponente

Komponenta	HTML oznaka	Namen
Content loader	`<wink-content-loader>`	Prikaz hotelskih kartic, mrež, zemljevidov
Lookup	`<wink-lookup>`	Iskalna vrstica za destinacije
Search button	`<wink-search-button>`	Odpri izbirnik poti
Account button	`<wink-account-button>`	Prijava / uporabniški meni
Itinerary button	`<wink-itinerary-button>`	Prikaži trenutno pot
Itinerary picker	`<wink-itinerary-picker>`	Celoten obrazec poti
Shopping cart	`<wink-shopping-cart-button>`	Gumb za povzetek košarice

Oglejte si Web Components za celoten seznam atributov.