Webflow

Webflow obsługuje niestandardowy HTML i JavaScript w trzech miejscach: w całej witrynie w <head>, w całej witrynie w </body> oraz w osadzeniach kodu dla poszczególnych elementów. Ułatwia to integrację komponentów webowych Wink.

Załaduj skrypty Wink w całej witrynie

W Webflow Designer otwórz Project Settings → Custom Code.

W sekcji Head Code dodaj arkusz stylów:

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

W sekcji Footer Code dodaj skrypt i loader aplikacji (zamień 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>

Kliknij Save Changes.

Dodaj komponent do konkretnego elementu

W Designerze wybierz Div lub Section, w którym chcesz umieścić komponent.
W prawym panelu kliknij ikonę </> Embed (lub dodaj element HTML Embed z panelu Add).

Wklej HTML komponentu, na przykład:

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

Kliknij Save & Close.

Niestandardowy kod na poszczególnych stronach

Jeśli potrzebujesz Wink tylko na wybranych stronach, użyj wstrzyknięcia kodu na poziomie strony zamiast w całej witrynie:

Otwórz Page Settings dla wybranej strony (ikona koła zębatego w panelu Pages).
Przewiń do Custom Code → Before </body> tag.
Wklej ten sam skrypt i loader aplikacji co powyżej.
Zapisz ustawienia strony.

Dostępne komponenty

Komponent	Znacznik HTML	Przeznaczenie
Content loader	`<wink-content-loader>`	Wyświetlanie kart hoteli, siatek, map
Lookup	`<wink-lookup>`	Pasek wyszukiwania destynacji
Search button	`<wink-search-button>`	Otwórz wybór planu podróży
Account button	`<wink-account-button>`	Logowanie / menu użytkownika
Itinerary button	`<wink-itinerary-button>`	Pokaż aktualny plan podróży
Itinerary picker	`<wink-itinerary-picker>`	Pełny formularz planu podróży
Shopping cart	`<wink-shopping-cart-button>`	Przycisk podsumowania koszyka

Zobacz Web Components dla pełnej referencji atrybutów.