Webflow

Webflow supporta HTML e JavaScript personalizzati in tre posizioni: il <head> a livello di sito, il </body> a livello di sito e gli embed di codice per singolo elemento. Questo rende semplice l’integrazione dei web component Wink.

Carica gli script Wink a livello di sito

Nel Webflow Designer, apri Project Settings → Custom Code.

Nella sezione Head Code, aggiungi il foglio di stile:

<link rel="stylesheet" href="https://elements.wink.travel/styles.css">

Nella sezione Footer Code, aggiungi lo script e il loader dell’applicazione (sostituisci 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>

Clicca su Save Changes.

Aggiungi un componente a un elemento specifico

Nel Designer, seleziona il Div o la Section dove vuoi inserire il componente.
Nel pannello a destra, clicca sull’icona </> Embed (o aggiungi un elemento HTML Embed dal pannello Add).

Incolla l’HTML del componente, per esempio:

<wink-content-loader
  layout="RANKED"
  id="YOUR_LAYOUT_ID"
></wink-content-loader>

Clicca su Save & Close.

Codice personalizzato per pagina

Se ti serve Wink solo in pagine specifiche, usa l’iniezione di codice per pagina invece che a livello di sito:

Apri le Page Settings della pagina target (icona ingranaggio nel pannello Pages).
Scorri fino a Custom Code → Before </body> tag.
Incolla lo stesso script e loader dell’app come sopra.
Salva le impostazioni della pagina.

Componenti disponibili

Componente	Tag HTML	Scopo
Content loader	`<wink-content-loader>`	Mostrare schede hotel, griglie, mappe
Lookup	`<wink-lookup>`	Barra di ricerca per destinazioni
Search button	`<wink-search-button>`	Aprire il selettore itinerario
Account button	`<wink-account-button>`	Accesso / menu utente
Itinerary button	`<wink-itinerary-button>`	Mostrare l’itinerario corrente
Itinerary picker	`<wink-itinerary-picker>`	Form completo per itinerario
Shopping cart	`<wink-shopping-cart-button>`	Pulsante riepilogo carrello

Consulta Web Components per la referenza completa degli attributi.