Squarespace

Squarespace støtter egendefinert HTML og JavaScript, noe som betyr at du kan integrere hvilken som helst Wink webkomponent direkte på nettstedet ditt uten en plugin. Denne guiden viser deg hvordan du laster Wink-skriptene globalt og deretter plasserer komponenter på individuelle sider.

Last Wink-skriptene globalt

Å legge til skriptene i nettstedets globale footer og header betyr at Wink er tilgjengelig på hver side uten å gjenta oppsettet.

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

I Header-feltet, legg til stilarket:

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

I Footer-feltet, legg til skriptet og applikasjonslasteren (erstatt 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>

Klikk Save.

Legg til en komponent på en side

Når skriptene er lastet globalt, kan du legge til hvilken som helst Wink-komponent på en side ved å bruke en Code Block.

Åpne siden du vil redigere.
Klikk Edit og legg til en ny Code-blokk der du vil at komponenten skal vises.

Lim inn komponentens HTML, for eksempel en content loader:

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

Klikk Apply og deretter Save.

Tilgjengelige komponenter

Komponent	HTML-tag	Formål
Content loader	`<wink-content-loader>`	Vise hotellkort, rutenett, kart
Lookup	`<wink-lookup>`	Søkelinje for destinasjoner
Search button	`<wink-search-button>`	Åpne reiseplanlegger
Account button	`<wink-account-button>`	Logg inn / brukermeny
Itinerary button	`<wink-itinerary-button>`	Vis gjeldende reiserute
Itinerary picker	`<wink-itinerary-picker>`	Fullstendig reiseruteskjema
Shopping cart	`<wink-shopping-cart-button>`	Handlekurvsammendrag-knapp

Se Web Components for fullstendig attributtreferanse for hver komponent.