Ghost

Ghosts innebygde Code Injection-funksjon lar deg legge til skript i den globale <head> og </body> i publikasjonen din. Alle Ghost-planer støtter code injection, noe som gjør det enkelt å integrere Wink-komponenter på hvilken som helst side eller innlegg.

Last inn Wink-skript på hele nettstedet

I Ghost Admin-panelet, gå til Settings → Code Injection.

I boksen Site Header, legg til stilarket:

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

I boksen Site Footer, legg til skriptet og applikasjonslasteren (erstatt 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>

Klikk Save.

Legg til en komponent i et innlegg eller en side

Ghost-editoren støtter et HTML-kort som lar deg sette inn rå HTML hvor som helst i innholdet ditt.

Åpne innlegget eller siden i Ghost-editoren.
Skriv / for å åpne kortvelgeren og velg HTML.

Lim inn komponentens HTML, for eksempel:

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

Klikk utenfor kortet for å forhåndsvise, og publiser deretter.

Per-side code injection

For en komponent som kun skal vises på én side, støtter Ghost også per-side code injection:

Åpne innstillingene for innlegget eller siden (tannhjulikonet i editoren).
Bla ned til Code Injection.
Legg til komponenttaggen i feltet Footer (den globale app-loaderen trenger kun å være i den globale footeren).
Lagre.

Tilgjengelige komponenter

Komponent	HTML-tag	Formål
Content loader	`<wink-content-loader>`	Vis hotellkort, rutenett, kart
Lookup	`<wink-lookup>`	Søkelinje for destinasjoner
Search button	`<wink-search-button>`	Åpne reiseplanlegger
Account button	`<wink-account-button>`	Logg inn / brukermeny
Itinerary button	`<wink-itinerary-button>`	Vis gjeldende reiserute
Itinerary picker	`<wink-itinerary-picker>`	Fullstendig reiseruteskjema
Shopping cart	`<wink-shopping-cart-button>`	Handlekurvsammendrag-knapp

Se Web Components for fullstendig attributtreferanse.