Webflow

Webflow podporuje vlastný HTML a JavaScript na troch miestach: v celosystémovom <head>, v celosystémovom </body> a v kódových vložkách pre jednotlivé prvky. To uľahčuje integráciu Wink webových komponentov.

Načítanie Wink skriptov celosystémovo

Vo Webflow Designer otvorte Project Settings → Custom Code.

V sekcii Head Code pridajte štýlový súbor:

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

V sekcii Footer Code pridajte skript a načítač aplikácie (nahraďte 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.

Pridanie komponentu do konkrétneho prvku

V Designeri vyberte Div alebo Section, kde chcete komponent.
V pravom paneli kliknite na ikonu </> Embed (alebo pridajte prvok HTML Embed z panela Add).

Vložte HTML komponentu, napríklad:

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

Kliknite na Save & Close.

Vlastný kód pre jednotlivé stránky

Ak potrebujete Wink len na konkrétnych stránkach, použite vkladanie kódu pre jednotlivé stránky namiesto celosystémového:

Otvorte Page Settings pre cieľovú stránku (ikona ozubeného kolieska v paneli Pages).
Prejdite na Custom Code → Before </body> tag.
Vložte rovnaký skript a načítač aplikácie ako vyššie.
Uložte nastavenia stránky.

Dostupné komponenty

Komponent	HTML tag	Účel
Content loader	`<wink-content-loader>`	Zobrazenie hotelových kariet, mriežok, máp
Lookup	`<wink-lookup>`	Vyhľadávací panel pre destinácie
Search button	`<wink-search-button>`	Otvoriť výber itinerára
Account button	`<wink-account-button>`	Prihlásenie / používateľské menu
Itinerary button	`<wink-itinerary-button>`	Zobraziť aktuálny itinerár
Itinerary picker	`<wink-itinerary-picker>`	Kompletný formulár itinerára
Shopping cart	`<wink-shopping-cart-button>`	Tlačidlo súhrnu košíka

Pozrite si Web Components pre kompletný zoznam atribútov.