Webflow

Webflow podržava prilagođeni HTML i JavaScript na tri mjesta: u <head> dijelu za cijelu stranicu, u </body> dijelu za cijelu stranicu i u ugradnjama koda po elementu. To čini integraciju Wink web komponenti jednostavnom.

Učitaj Wink skripte za cijelu stranicu

U Webflow Designeru otvorite Project Settings → Custom Code.

U odjeljku Head Code dodajte stilsku datoteku:

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

U odjeljku Footer Code dodajte skriptu i učitavač aplikacije (zamijenite 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 komponentu određenom elementu

U Designeru odaberite Div ili Section gdje želite komponentu.
U desnom panelu kliknite ikonu </> Embed (ili dodajte element HTML Embed iz Add panela).

Zalijepite HTML komponente, na primjer:

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

Kliknite Save & Close.

Prilagođeni kod po stranici

Ako vam je Wink potreban samo na određenim stranicama, koristite umetanje koda po stranici umjesto za cijelu stranicu:

Otvorite Page Settings za ciljanu stranicu (ikona zupčanika u Pages panelu).
Pomaknite se do Custom Code → Before </body> tag.
Zalijepite istu skriptu i učitavač aplikacije kao gore.
Spremite postavke stranice.

Dostupne komponente

Komponenta	HTML oznaka	Namjena
Content loader	`<wink-content-loader>`	Prikaz hotelskih kartica, mreža, karata
Lookup	`<wink-lookup>`	Tražilica destinacija
Search button	`<wink-search-button>`	Otvori odabir itinerera
Account button	`<wink-account-button>`	Prijava / korisnički izbornik
Itinerary button	`<wink-itinerary-button>`	Prikaži trenutni itinerer
Itinerary picker	`<wink-itinerary-picker>`	Cijeli obrazac itinerera
Shopping cart	`<wink-shopping-cart-button>`	Gumb sažetka košarice

Pogledajte Web Components za potpuni popis atributa.