HubSpot CMS

HubSpot CMS supporta moduli HTML personalizzati e codice per header/footer a livello di sito, rendendo semplice incorporare componenti Wink nelle pagine marketing e landing page.

Carica gli script Wink a livello di sito

In HubSpot, vai su Marketing → Files and Templates → Design Tools.
Apri il main.css del tema attivo oppure usa le impostazioni globali dei contenuti.
In alternativa, vai su Settings → Website → Pages → Custom Code.

Nel campo Head HTML, aggiungi il foglio di stile:

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

Nel campo Footer HTML, 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>

Salva e pubblica.

Aggiungi un componente tramite un modulo HTML personalizzato

In Design Tools, crea un nuovo modulo di tipo Rich Text o HTML.

Nel contenuto predefinito del modulo, incolla l’HTML del componente:

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

Salva il modulo e trascinalo in qualsiasi template di pagina o pagina usando l’editor di pagina.

Aggiungi un componente direttamente nell’editor di pagina

Se preferisci non creare un modulo, puoi usare una sezione Custom HTML nell’editor drag-and-drop:

Apri la pagina nell’editor di pagina HubSpot.
Clicca su Add e scegli una sezione Custom HTML o Embed.
Incolla il tag del componente nel campo HTML.
Clicca su Apply e pubblica la 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>`	Modulo completo itinerario
Shopping cart	`<wink-shopping-cart-button>`	Pulsante riepilogo carrello

Consulta Web Components per il riferimento completo degli attributi.