Webflow
Webflow soporta HTML y JavaScript personalizados en tres lugares: el <head> de todo el sitio, el </body> de todo el sitio y en incrustaciones de código por elemento. Esto facilita la integración de los componentes web de Wink.
Cargar scripts de Wink en todo el sitio
Sección titulada «Cargar scripts de Wink en todo el sitio»- En el Webflow Designer, abrí Project Settings → Custom Code.
- En la sección Head Code, agregá la hoja de estilos:
<link rel="stylesheet" href="https://elements.wink.travel/styles.css">
- En la sección Footer Code, agregá el script y el cargador de la aplicación (reemplazá
YOUR_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> - Hacé clic en Save Changes.
Agregar un componente a un elemento específico
Sección titulada «Agregar un componente a un elemento específico»- En el Designer, seleccioná el Div o Section donde querés el componente.
- En el panel derecho, hacé clic en el ícono
</>Embed (o agregá un elemento HTML Embed desde el panel Add). - Pegá el HTML del componente, por ejemplo:
<wink-content-loaderlayout="RANKED"id="YOUR_LAYOUT_ID"></wink-content-loader>
- Hacé clic en Save & Close.
Código personalizado por página
Sección titulada «Código personalizado por página»Si solo necesitás Wink en páginas específicas, usá la inyección de código por página en lugar de a nivel global:
- Abrí la Page Settings de la página objetivo (ícono de engranaje en el panel Pages).
- Desplazate hasta Custom Code → Before
</body>tag. - Pegá el mismo script y cargador de app que arriba.
- Guardá la configuración de la página.
Componentes disponibles
Sección titulada «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 |
Consultá Web Components para la referencia completa de atributos.