Squarespace

Squarespace understøtter brugerdefineret HTML og JavaScript, hvilket betyder, at du kan integrere enhver Wink webkomponent direkte på dit site uden en plugin. Denne vejledning viser dig, hvordan du indlæser Wink-scripts på hele sitet og derefter placerer komponenter på individuelle sider.

Indlæs Wink-scripts på hele sitet

Ved at tilføje scripts til dit sites globale footer og header sikrer du, at Wink er tilgængelig på alle sider uden at gentage opsætningen.

I Squarespace-editoren, gå til Settings → Advanced → Code Injection.

I feltet Header tilføj stylesheet:

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

I feltet Footer tilføj scriptet og applikationsloaderen (erstat YOUR_CLIENT_ID med din 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>

Klik på Save.

Tilføj en komponent til en side

Når scripts er indlæst globalt, kan du indsætte enhver Wink-komponent på en hvilken som helst side ved hjælp af en Code Block.

Åbn den side, du vil redigere.
Klik på Edit og tilføj en ny Code-blok, hvor du ønsker komponenten vist.

Indsæt komponentens HTML, for eksempel en content loader:

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

Klik på Apply og derefter Save.

Tilgængelige komponenter

Komponent	HTML-tag	Formål
Content loader	`<wink-content-loader>`	Vis hotelkort, grids, kort
Lookup	`<wink-lookup>`	Søgefelt til destinationer
Search button	`<wink-search-button>`	Åbn rejseplanvælger
Account button	`<wink-account-button>`	Log ind / brugermenu
Itinerary button	`<wink-itinerary-button>`	Vis aktuel rejseplan
Itinerary picker	`<wink-itinerary-picker>`	Fuld rejseplansformular
Shopping cart	`<wink-shopping-cart-button>`	Oversigt over indkøbskurv

Se Web Components for den fulde attributreference for hver komponent.