Webflow

Webflow podržava prilagođeni HTML i JavaScript na tri mesta: u <head> delu za ceo sajt, u </body> delu za ceo sajt i u kodovima za ugradnju po elementu. Ovo olakšava integraciju Wink web komponenti.

Učitajte Wink skripte za ceo sajt

U Webflow Designer-u otvorite Project Settings → Custom Code.

U sekciji Head Code dodajte stilsku datoteku:

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

U sekciji Footer Code dodajte skriptu i učitavač aplikacije (zamenite 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 na Save Changes.

Dodajte komponentu na određeni element

U Designer-u izaberite Div ili Section gde želite komponentu.
U desnom panelu kliknite na ikonu </> Embed (ili dodajte HTML Embed element iz Add panela).

Nalepite HTML komponente, na primer:

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

Kliknite na Save & Close.

Prilagođeni kod po stranici

Ako vam je Wink potreban samo na određenim stranicama, koristite ugradnju koda po stranici umesto za ceo sajt:

Otvorite Page Settings za ciljnu stranicu (ikona zupčanika u Pages panelu).
Skrolujte do Custom Code → Before </body> tag.
Nalepite istu skriptu i učitavač aplikacije kao gore.
Sačuvajte podešavanja stranice.

Dostupne komponente

Komponenta	HTML tag	Namena
Content loader	`<wink-content-loader>`	Prikaz hotelskih kartica, mreža, mapa
Lookup	`<wink-lookup>`	Pretraživač destinacija
Search button	`<wink-search-button>`	Otvaranje izbora itinerera
Account button	`<wink-account-button>`	Prijava / korisnički meni
Itinerary button	`<wink-itinerary-button>`	Prikaz trenutnog itinerera
Itinerary picker	`<wink-itinerary-picker>`	Kompletan formular itinerera
Shopping cart	`<wink-shopping-cart-button>`	Dugme za pregled korpe

Pogledajte Web Components za kompletnu referencu atributa.