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 Diseñador de Webflow, abre Configuración del proyecto → Código personalizado.
- En la sección Código en el Head, agrega la hoja de estilos:
<link rel="stylesheet" href="https://elements.wink.travel/styles.css">
- En la sección Código en el Footer, agrega el script y el cargador de la aplicación (reemplaza
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> - Haz clic en Guardar cambios.
Agregar un componente a un elemento específico
Sección titulada «Agregar un componente a un elemento específico»- En el Diseñador, selecciona el Div o Sección donde quieres el componente.
- En el panel derecho, haz clic en el ícono
</>Embed (o agrega un elemento HTML Embed desde el panel Agregar). - Pega el HTML del componente, por ejemplo:
<wink-content-loaderlayout="RANKED"id="YOUR_LAYOUT_ID"></wink-content-loader>
- Haz clic en Guardar y cerrar.
Código personalizado por página
Sección titulada «Código personalizado por página»Si solo necesitas Wink en páginas específicas, usa la inyección de código por página en lugar de en todo el sitio:
- Abre la Configuración de página para la página objetivo (ícono de engranaje en el panel de Páginas).
- Desplázate a Código personalizado → Antes de la etiqueta
</body>. - Pega el mismo script y cargador de app que arriba.
- Guarda 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 hotel, rejillas, 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.