Webflow
Webflow admite HTML y JavaScript personalizados en tres lugares: el <head> de todo el sitio, el </body> de todo el sitio y las 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 encabezado, añade la hoja de estilos:
<link rel="stylesheet" href="https://elements.wink.travel/styles.css">
- En la sección Código en el pie de página, añade 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.
Añadir un componente a un elemento específico
Sección titulada «Añadir 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 icono
</>Incrustar (o añade un elemento HTML Embed desde el panel Añadir). - 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 (icono 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 la app que arriba.
- Guarda la configuración de la página.
Componentes disponibles
Sección titulada «Componentes disponibles»| Componente | Etiqueta HTML | Propósito |
|---|---|---|
| Cargador de contenido | <wink-content-loader> | Mostrar tarjetas de hoteles, cuadrículas, mapas |
| Búsqueda | <wink-lookup> | Barra de búsqueda para destinos |
| Botón de búsqueda | <wink-search-button> | Abrir selector de itinerario |
| Botón de cuenta | <wink-account-button> | Iniciar sesión / menú de usuario |
| Botón de itinerario | <wink-itinerary-button> | Mostrar itinerario actual |
| Selector de itinerario | <wink-itinerary-picker> | Formulario completo de itinerario |
| Carrito de compras | <wink-shopping-cart-button> | Botón resumen del carrito |
Consulta Componentes web para la referencia completa de atributos.