Ghost

Ghosts inbyggda Code Injection-funktion låter dig lägga till skript i den globala <head> och </body> i din publikation. Alla Ghost-planer stödjer code injection, vilket gör det enkelt att bädda in Wink-komponenter på vilken sida eller inlägg som helst.

Ladda Wink-skript på hela webbplatsen

Gå till Settings → Code Injection i Ghost Admin-panelen.

Lägg till stylesheet i rutan Site Header:

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

Lägg till skriptet och applikationsladdaren i rutan Site Footer (byt ut 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>

Klicka på Save.

Lägg till en komponent i ett inlägg eller på en sida

Ghosts editor stödjer ett HTML-kort som låter dig infoga rå HTML var som helst i ditt innehåll.

Öppna inlägget eller sidan i Ghost-editorn.
Skriv / för att öppna kortväljaren och välj HTML.

Klistra in komponentens HTML, till exempel:

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

Klicka utanför kortet för att förhandsgranska, och publicera sedan.

Per-sida code injection

För en komponent som bara ska visas på en sida stödjer Ghost även per-sida code injection:

Öppna inställningarna för inlägget eller sidan (kugghjulsikonen i editorn).
Scrolla till Code Injection.
Lägg till komponenttaggen i fältet Footer (den globala app-loadern behöver bara finnas i den site-wide footern).
Spara.

Tillgängliga komponenter

Komponent	HTML-tag	Syfte
Content loader	`<wink-content-loader>`	Visa hotellkort, rutnät, kartor
Lookup	`<wink-lookup>`	Sökruta för destinationer
Search button	`<wink-search-button>`	Öppna resplanväljare
Account button	`<wink-account-button>`	Logga in / användarmeny
Itinerary button	`<wink-itinerary-button>`	Visa aktuell resplan
Itinerary picker	`<wink-itinerary-picker>`	Fullständig resplanformulär
Shopping cart	`<wink-shopping-cart-button>`	Kundvagnssammanfattning

Se Web Components för fullständig attributreferens.