Squarespace

Squarespace ondersteunt aangepaste HTML en JavaScript, wat betekent dat je elk Wink webcomponent rechtstreeks in je site kunt insluiten zonder een plugin. Deze gids laat zien hoe je de Wink-scripts sitebreed laadt en vervolgens componenten op afzonderlijke pagina’s plaatst.

Laad Wink-scripts sitebreed

Door de scripts toe te voegen aan de globale footer en header van je site, is Wink op elke pagina beschikbaar zonder dat je de setup hoeft te herhalen.

Ga in de Squarespace-editor naar Instellingen → Geavanceerd → Code Injection.

Voeg in het veld Header de stylesheet toe:

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

Voeg in het veld Footer het script en de applicatielader toe (vervang YOUR_CLIENT_ID door je 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 op Opslaan.

Voeg een component toe aan een pagina

Zodra de scripts globaal zijn geladen, kun je elk Wink-component op elke pagina plaatsen met een Code Block.

Open de pagina die je wilt bewerken.
Klik op Bewerken en voeg een nieuw Code-blok toe op de plek waar het component moet verschijnen.

Plak de component-HTML, bijvoorbeeld een content loader:

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

Klik op Toepassen en daarna op Opslaan.

Beschikbare componenten

Component	HTML-tag	Doel
Content loader	`<wink-content-loader>`	Toon hotelkaarten, grids, kaarten
Lookup	`<wink-lookup>`	Zoekbalk voor bestemmingen
Search button	`<wink-search-button>`	Open reisschema-kiezer
Account button	`<wink-account-button>`	Inloggen / gebruikersmenu
Itinerary button	`<wink-itinerary-button>`	Toon huidig reisschema
Itinerary picker	`<wink-itinerary-picker>`	Volledig reisschema-formulier
Shopping cart	`<wink-shopping-cart-button>`	Winkelwagen-samenvattingsknop

Zie Web Components voor de volledige attributenreferentie van elk component.