Webflow
Webflow acceptă HTML și JavaScript personalizat în trei locuri: <head> la nivel de site, </body> la nivel de site și încorporări de cod pe elemente individuale. Acest lucru face integrarea componentelor web Wink simplă.
Încarcă scripturile Wink la nivel de site
Secțiune intitulată „Încarcă scripturile Wink la nivel de site”- În Webflow Designer, deschide Project Settings → Custom Code.
- În secțiunea Head Code, adaugă foaia de stil:
<link rel="stylesheet" href="https://elements.wink.travel/styles.css">
- În secțiunea Footer Code, adaugă scriptul și încărcătorul aplicației (înlocuiește
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> - Apasă Save Changes.
Adaugă un component la un element specific
Secțiune intitulată „Adaugă un component la un element specific”- În Designer, selectează Div sau Section unde dorești componenta.
- În panoul din dreapta, apasă pe pictograma
</>Embed (sau adaugă un element HTML Embed din panoul Add). - Lipește HTML-ul componentei, de exemplu:
<wink-content-loaderlayout="RANKED"id="YOUR_LAYOUT_ID"></wink-content-loader>
- Apasă Save & Close.
Cod personalizat pe pagină
Secțiune intitulată „Cod personalizat pe pagină”Dacă ai nevoie de Wink doar pe anumite pagini, folosește injectarea de cod pe pagină în loc de la nivel de site:
- Deschide Page Settings pentru pagina țintă (pictograma roată din panoul Pages).
- Derulează la Custom Code → Before
</body>tag. - Lipește același script și încărcător de aplicație ca mai sus.
- Salvează setările paginii.
Componente disponibile
Secțiune intitulată „Componente disponibile”| Component | HTML tag | Scop |
|---|---|---|
| Content loader | <wink-content-loader> | Afișează carduri de hotel, grile, hărți |
| Lookup | <wink-lookup> | Bară de căutare pentru destinații |
| Search button | <wink-search-button> | Deschide selectorul de itinerariu |
| Account button | <wink-account-button> | Autentificare / meniu utilizator |
| Itinerary button | <wink-itinerary-button> | Afișează itinerariul curent |
| Itinerary picker | <wink-itinerary-picker> | Formular complet de itinerariu |
| Shopping cart | <wink-shopping-cart-button> | Buton sumar coș de cumpărături |
Vezi Web Components pentru referința completă a atributelor.