Ghost

La funzionalità integrata di Code Injection di Ghost ti permette di aggiungere script al <head> globale e al </body> della tua pubblicazione. Tutti i piani Ghost supportano il code injection, rendendo semplice incorporare i componenti Wink in qualsiasi pagina o post.

Carica gli script Wink su tutto il sito

Nel pannello Admin di Ghost, vai su Settings → Code Injection.

Nel riquadro Site Header, aggiungi il foglio di stile:

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

Nel riquadro Site Footer, 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.

Aggiungi un componente a un post o a una pagina

L’editor di Ghost supporta una HTML card che ti permette di inserire HTML grezzo ovunque nel tuo contenuto.

Apri il post o la pagina nell’editor di Ghost.
Digita / per aprire il selettore di card e scegli HTML.

Incolla l’HTML del componente, per esempio:

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

Clicca fuori dalla card per vedere l’anteprima, poi pubblica.

Code injection per pagina

Per un componente che deve apparire solo in una pagina, Ghost supporta anche il code injection per pagina:

Apri le impostazioni del post o della pagina (icona a forma di ingranaggio nell’editor).
Scorri fino a Code Injection.
Aggiungi il tag del componente nel campo Footer (il loader globale dell’app deve essere solo nel footer del sito).
Salva.

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.