Squarespace

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

Cargar scripts de Wink en todo el sitio

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

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

En el campo Header, agregue la hoja de estilos:

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

En el campo Footer, agregue el script y el cargador de la aplicación (reemplace YOUR_CLIENT_ID con su 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>

Haga clic en Save.

Agregar un componente a una página

Una vez que los scripts están cargados globalmente, puede colocar cualquier componente de Wink en cualquier página usando un Code Block.

Abra la página que desea editar.
Haga clic en Edit y agregue un nuevo bloque de Code donde quiera que aparezca el componente.

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

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

Haga clic en Apply y luego en Save.

Componentes disponibles

Componente	Etiqueta HTML	Propósito
Content loader	`<wink-content-loader>`	Mostrar tarjetas de hoteles, grillas, 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

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