Squarespace

Squarespace admet HTML i JavaScript personalitzats, cosa que significa que pots incrustar qualsevol component web de Wink directament al teu lloc sense cap complement. Aquesta guia t’ensenya com carregar els scripts de Wink a tot el lloc i després col·locar components a pàgines individuals.

Carrega els scripts de Wink a tot el lloc

Afegir els scripts al peu i capçalera globals del teu lloc fa que Wink estigui disponible a cada pàgina sense repetir la configuració.

A l’editor de Squarespace, ves a Settings → Advanced → Code Injection.

Al camp Header, afegeix la fulla d’estils:

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

Al camp Footer, afegeix l’script i el carregador d’aplicació (substitueix YOUR_CLIENT_ID pel teu Client ID de Wink):

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

Fes clic a Save.

Afegeix un component a una pàgina

Un cop els scripts estan carregats globalment, pots inserir qualsevol component de Wink a qualsevol pàgina utilitzant un bloc de codi.

Obre la pàgina que vols editar.
Fes clic a Edit i afegeix un nou bloc de Code on vulguis que aparegui el component.

Enganxa el HTML del component, per exemple un carregador de contingut:

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

Fes clic a Apply i després a Save.

Components disponibles

Component	Etiqueta HTML	Propòsit
Content loader	`<wink-content-loader>`	Mostra targetes d’hotels, graelles, mapes
Lookup	`<wink-lookup>`	Barra de cerca per a destinacions
Search button	`<wink-search-button>`	Obre el selector d’itinerari
Account button	`<wink-account-button>`	Iniciar sessió / menú d’usuari
Itinerary button	`<wink-itinerary-button>`	Mostra l’itinerari actual
Itinerary picker	`<wink-itinerary-picker>`	Formulari complet d’itinerari
Shopping cart	`<wink-shopping-cart-button>`	Botó resum del carretó

Consulta Web Components per a la referència completa d’atributs de cada component.