Webflow
Webflow admet HTML i JavaScript personalitzats en tres llocs: el <head> de tot el lloc, el </body> de tot el lloc i incrustacions de codi per element. Això facilita la integració dels components web de Wink.
Carrega els scripts de Wink a tot el lloc
Section titled “Carrega els scripts de Wink a tot el lloc”- A Webflow Designer, obre Project Settings → Custom Code.
- A la secció Head Code, afegeix la fulla d’estils:
<link rel="stylesheet" href="https://elements.wink.travel/styles.css">
- A la secció Footer Code, afegeix l’script i el carregador de l’aplicació (substitueix
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> - Fes clic a Save Changes.
Afegeix un component a un element específic
Section titled “Afegeix un component a un element específic”- Al Designer, selecciona el Div o Section on vols el component.
- Al panell dret, fes clic a la icona
</>Embed (o afegeix un element HTML Embed des del panell Add). - Enganxa el HTML del component, per exemple:
<wink-content-loaderlayout="RANKED"id="YOUR_LAYOUT_ID"></wink-content-loader>
- Fes clic a Save & Close.
Codi personalitzat per pàgina
Section titled “Codi personalitzat per pàgina”Si només necessites Wink en pàgines específiques, utilitza la injecció de codi per pàgina en lloc de la de tot el lloc:
- Obre la Page Settings de la pàgina desitjada (icona d’engranatge al panell Pages).
- Desplaça’t a Custom Code → Before
</body>tag. - Enganxa el mateix script i carregador d’aplicació que abans.
- Desa la configuració de la pàgina.
Components disponibles
Section titled “Components disponibles”| Component | Etiqueta HTML | Propòsit |
|---|---|---|
| Content loader | <wink-content-loader> | Mostra targetes d’hotels, graelles, mapes |
| Lookup | <wink-lookup> | Barra de cerca per destinacions |
| Search button | <wink-search-button> | Obre el selector d’itinerari |
| Account button | <wink-account-button> | Iniciar sessió / menú d’usuari |
| Itinerary button | <wink-itinerary-button> | Mostra l’itinerari actual |
| Itinerary picker | <wink-itinerary-picker> | Formulari complet d’itinerari |
| Shopping cart | <wink-shopping-cart-button> | Botó resum del carretó |
Consulta Web Components per a la referència completa d’atributs.