Ghost

Ghosts indbyggede Code Injection-funktion giver dig mulighed for at tilføje scripts til det globale <head> og </body> i din udgivelse. Alle Ghost-planer understøtter code injection, hvilket gør det nemt at integrere Wink-komponenter på enhver side eller indlæg.

Indlæs Wink-scripts på hele sitet

Gå til Settings → Code Injection i Ghost Admin-panelet.

Tilføj stylesheet i boksen Site Header:

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

Tilføj script og applikationsloader i boksen Site Footer (erstat 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 på Save.

Tilføj en komponent til et indlæg eller en side

Ghost-editoren understøtter et HTML-kort, som giver dig mulighed for at indsætte rå HTML hvor som helst i dit indhold.

Åbn indlægget eller siden i Ghost-editoren.
Skriv / for at åbne kortvælgeren og vælg HTML.

Indsæt komponentens HTML, for eksempel:

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

Klik uden for kortet for at forhåndsvise, og udgiv derefter.

Per-side code injection

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

Åbn indstillingerne for indlægget eller siden (tandhjulsikonet i editoren).
Rul ned til Code Injection.
Tilføj komponent-tagget i feltet Footer (den globale app-loader skal kun være i site-wide footer).
Gem.

Tilgængelige komponenter

Komponent	HTML-tag	Formål
Content loader	`<wink-content-loader>`	Vis hotelkort, gitter, kort
Lookup	`<wink-lookup>`	Søgefelt til destinationer
Search button	`<wink-search-button>`	Åbn rejseplanvælger
Account button	`<wink-account-button>`	Log ind / brugermenu
Itinerary button	`<wink-itinerary-button>`	Vis aktuel rejseplan
Itinerary picker	`<wink-itinerary-picker>`	Fuld rejseplansformular
Shopping cart	`<wink-shopping-cart-button>`	Oversigt over indkøbskurv

Se Web Components for den fulde attributreference.