Squarespace

Squarespace obsługuje niestandardowy HTML i JavaScript, co oznacza, że możesz osadzić dowolny komponent webowy Wink bezpośrednio na swojej stronie bez wtyczki. Ten przewodnik pokazuje, jak załadować skrypty Wink na całej stronie, a następnie umieścić komponenty na poszczególnych stronach.

Załaduj skrypty Wink na całej stronie

Dodanie skryptów do globalnego stopki i nagłówka witryny oznacza, że Wink jest dostępny na każdej stronie bez powtarzania konfiguracji.

W edytorze Squarespace przejdź do Settings → Advanced → Code Injection.

W polu Header dodaj arkusz stylów:

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

W polu Footer dodaj skrypt i loader aplikacji (zamień YOUR_CLIENT_ID na swój Client ID Wink):

<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.

Dodaj komponent do strony

Gdy skrypty są załadowane globalnie, możesz dodać dowolny komponent Wink na dowolną stronę, używając Code Block.

Otwórz stronę, którą chcesz edytować.
Kliknij Edit i dodaj nowy blok Code w miejscu, gdzie chcesz umieścić komponent.

Wklej HTML komponentu, na przykład loader treści:

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

Kliknij Apply, a następnie Save.

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 każdego komponentu.