Squarespace

Squarespace soporta HTML y JavaScript personalizados, lo que significa que puedes insertar cualquier componente web de Wink directamente en tu sitio sin un plugin. Esta guía te muestra cómo cargar los scripts de Wink en todo el sitio y luego colocar componentes en páginas individuales.

Cargar los scripts de Wink en todo el sitio

Agregar los scripts al pie de página y encabezado globales de tu sitio significa que Wink estará disponible en cada página sin repetir la configuración.

En el editor de Squarespace, ve a Settings → Advanced → Code Injection.

En el campo Header, añade la hoja de estilos:

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

En el campo Footer, añade el script y el cargador de la aplicación (reemplaza YOUR_CLIENT_ID con tu 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>

Haz clic en Save.

Añadir un componente a una página

Una vez que los scripts están cargados globalmente, puedes colocar cualquier componente de Wink en cualquier página usando un bloque de código.

Abre la página que quieres editar.
Haz clic en Edit y añade un nuevo bloque de Code donde quieras que aparezca el componente.

Pega el HTML del componente, por ejemplo un content loader:

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

Haz clic en Apply y luego en Save.

Componentes disponibles

Componente	Etiqueta HTML	Propósito
Content loader	`<wink-content-loader>`	Mostrar tarjetas de hoteles, cuadrículas, mapas
Lookup	`<wink-lookup>`	Barra de búsqueda para destinos
Search button	`<wink-search-button>`	Abrir selector de itinerario
Account button	`<wink-account-button>`	Iniciar sesión / menú de usuario
Itinerary button	`<wink-itinerary-button>`	Mostrar itinerario actual
Itinerary picker	`<wink-itinerary-picker>`	Formulario completo de itinerario
Shopping cart	`<wink-shopping-cart-button>`	Botón resumen del carrito

Consulta Web Components para la referencia completa de atributos de cada componente.