Webflow

Webflow podporuje vlastní HTML a JavaScript na třech místech: v celosítovém <head>, v celosítovém </body> a v embed kódech jednotlivých prvků. To usnadňuje integraci Wink webových komponent.

Načtení Wink skriptů celosítově

Ve Webflow Designeru otevřete Project Settings → Custom Code.

V sekci Head Code přidejte stylopis:

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

V sekci Footer Code přidejte skript a načítač aplikace (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>

Klikněte na Save Changes.

Přidání komponenty do konkrétního prvku

V Designeru vyberte Div nebo Section, kam chcete komponentu vložit.
V pravém panelu klikněte na ikonu </> Embed (nebo přidejte prvek HTML Embed z panelu Přidat).

Vložte HTML komponenty, například:

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

Klikněte na Save & Close.

Vlastní kód na jednotlivých stránkách

Pokud potřebujete Wink pouze na konkrétních stránkách, použijte vkládání kódu na stránku místo celosítového:

Otevřete Page Settings pro cílovou stránku (ikona ozubeného kola v panelu Stránky).
Sjeďte dolů do Custom Code → Before </body> tag.
Vložte stejný skript a načítač aplikace jako výše.
Uložte nastavení stránky.

Dostupné komponenty

Komponenta	HTML tag	Účel
Content loader	`<wink-content-loader>`	Zobrazení hotelových karet, mřížek, map
Lookup	`<wink-lookup>`	Vyhledávací lišta destinací
Search button	`<wink-search-button>`	Otevření výběru itineráře
Account button	`<wink-account-button>`	Přihlášení / uživatelské menu
Itinerary button	`<wink-itinerary-button>`	Zobrazení aktuálního itineráře
Itinerary picker	`<wink-itinerary-picker>`	Kompletní formulář itineráře
Shopping cart	`<wink-shopping-cart-button>`	Tlačítko souhrnu košíku

Podívejte se na Web Components pro kompletní referenci atributů.