Ghost

De ingebouwde Code Injection-functie van Ghost stelt je in staat scripts toe te voegen aan de globale <head> en </body> van je publicatie. Alle Ghost-abonnementen ondersteunen code-injectie, waardoor het eenvoudig is om Wink-componenten op elke pagina of bericht in te sluiten.

Wink-scripts sitebreed laden

Ga in het Ghost Admin-paneel naar Instellingen → Code Injection.

Voeg in het vak Site Header de stylesheet toe:

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

Voeg in het vak Site Footer het script en de applicatielader toe (vervang 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>

Klik op Opslaan.

Voeg een component toe aan een bericht of pagina

De editor van Ghost ondersteunt een HTML-kaart waarmee je ruwe HTML overal in je content kunt invoegen.

Open het bericht of de pagina in de Ghost-editor.
Typ / om de kaartkiezer te openen en selecteer HTML.

Plak de component-HTML, bijvoorbeeld:

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

Klik buiten de kaart om een voorbeeld te zien en publiceer daarna.

Code-injectie per pagina

Voor een component die alleen op één pagina moet verschijnen, ondersteunt Ghost ook code-injectie per pagina:

Open de instellingen van het bericht of de pagina (tandwielpictogram in de editor).
Scroll naar Code Injection.
Voeg de component-tag toe in het veld Footer (de globale app-loader hoeft alleen in de sitebrede footer te staan).
Sla op.

Beschikbare componenten

Component	HTML-tag	Doel
Content loader	`<wink-content-loader>`	Toon hotelkaarten, grids, kaarten
Lookup	`<wink-lookup>`	Zoekbalk voor bestemmingen
Search button	`<wink-search-button>`	Open de reisplanner
Account button	`<wink-account-button>`	Inloggen / gebruikersmenu
Itinerary button	`<wink-itinerary-button>`	Toon huidige reisroute
Itinerary picker	`<wink-itinerary-picker>`	Volledig reisformulier
Shopping cart	`<wink-shopping-cart-button>`	Winkelwagen overzichtsknop

Zie Web Components voor de volledige attributenreferentie.