Squarespace

Squarespace stödjer anpassad HTML och JavaScript, vilket innebär att du kan bädda in vilken Wink-webbkomponent som helst direkt på din webbplats utan ett plugin. Den här guiden visar hur du laddar Wink-skripten på hela webbplatsen och sedan placerar komponenter på enskilda sidor.

Ladda Wink-skript på hela webbplatsen

Genom att lägga till skripten i webbplatsens globala footer och header blir Wink tillgängligt på varje sida utan att behöva upprepa inställningen.

I Squarespace-redigeraren, gå till Settings → Advanced → Code Injection.

I fältet Header, lägg till stylesheet:

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

I fältet Footer, lägg till skriptet och applikationsladdaren (byt ut YOUR_CLIENT_ID mot ditt Wink 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>

Klicka på Save.

Lägg till en komponent på en sida

När skripten är laddade globalt kan du placera vilken Wink-komponent som helst på vilken sida som helst med hjälp av ett Code Block.

Öppna sidan du vill redigera.
Klicka på Edit och lägg till ett nytt Code-block där du vill att komponenten ska visas.

Klistra in komponentens HTML, till exempel en content loader:

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

Klicka på Apply och sedan Save.

Tillgängliga komponenter

Komponent	HTML-tag	Syfte
Content loader	`<wink-content-loader>`	Visa hotellkort, rutnät, kartor
Lookup	`<wink-lookup>`	Sökruta för destinationer
Search button	`<wink-search-button>`	Öppna resplanväljare
Account button	`<wink-account-button>`	Logga in / användarmeny
Itinerary button	`<wink-itinerary-button>`	Visa aktuell resplan
Itinerary picker	`<wink-itinerary-picker>`	Fullständig resplanformulär
Shopping cart	`<wink-shopping-cart-button>`	Kundvagnssammanfattning

Se Web Components för fullständig attributreferens för varje komponent.