Squarespace

Squarespace suportă HTML și JavaScript personalizat, ceea ce înseamnă că poți încorpora orice componentă web Wink direct în site-ul tău fără un plugin. Acest ghid îți arată cum să încarci scripturile Wink la nivel de site și apoi să plasezi componente pe pagini individuale.

Încarcă scripturile Wink la nivel de site

Adăugarea scripturilor în footer-ul și header-ul global al site-ului înseamnă că Wink este disponibil pe fiecare pagină fără a repeta configurarea.

În editorul Squarespace, mergi la Settings → Advanced → Code Injection.

În câmpul Header, adaugă stylesheet-ul:

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

În câmpul Footer, adaugă scriptul și loader-ul aplicației (înlocuiește YOUR_CLIENT_ID cu Client ID-ul tău Wink):

<script src="https://elements.wink.travel/elements.js" type="module" defer></script>
<wink-app-loader client-id="YOUR_CLIENT_ID"></wink-app-loader>

Apasă Save.

Adaugă o componentă pe o pagină

Odată ce scripturile sunt încărcate global, poți plasa orice componentă Wink pe orice pagină folosind un Code Block.

Deschide pagina pe care vrei să o editezi.
Apasă Edit și adaugă un nou bloc Code acolo unde vrei să apară componenta.

Lipește HTML-ul componentei, de exemplu un content loader:

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

Apasă Apply apoi Save.

Componente disponibile

Componentă	Tag HTML	Scop
Content loader	`<wink-content-loader>`	Afișează carduri, grile, hărți de hoteluri
Lookup	`<wink-lookup>`	Bară de căutare pentru destinații
Search button	`<wink-search-button>`	Deschide selectorul de itinerariu
Account button	`<wink-account-button>`	Autentificare / meniu utilizator
Itinerary button	`<wink-itinerary-button>`	Afișează itinerariul curent
Itinerary picker	`<wink-itinerary-picker>`	Formular complet pentru itinerariu
Shopping cart	`<wink-shopping-cart-button>`	Buton sumar coș de cumpărături

Vezi Web Components pentru referința completă a atributelor fiecărei componente.