Ghost

Esta página aún no está disponible en tu idioma.

Ghost’s built-in Code Injection feature lets you add scripts to the global <head> and </body> of your publication. All Ghost plans support code injection, making it easy to embed Wink components on any page or post.

Load Wink scripts site-wide

In the Ghost Admin panel, go to Settings → Code Injection.

In the Site Header box, add the stylesheet:

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

In the Site Footer box, add the script and application loader (replace 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>

Click Save.

Add a component to a post or page

Ghost’s editor supports an HTML card that lets you insert raw HTML anywhere in your content.

Open the post or page in the Ghost editor.
Type / to open the card picker and select HTML.

Paste the component HTML, for example:

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

Click outside the card to preview, then publish.

Per-page code injection

For a component that should only appear on one page, Ghost also supports per-page code injection:

Open the post or page settings (gear icon in the editor).
Scroll to Code Injection.
Add the component tag in the Footer field (the global app-loader only needs to be in the site-wide footer).
Save.

Available components

Component	HTML tag	Purpose
Content loader	`<wink-content-loader>`	Display hotel cards, grids, maps
Lookup	`<wink-lookup>`	Search bar for destinations
Search button	`<wink-search-button>`	Open itinerary picker
Account button	`<wink-account-button>`	Sign in / user menu
Itinerary button	`<wink-itinerary-button>`	Show current itinerary
Itinerary picker	`<wink-itinerary-picker>`	Full itinerary form
Shopping cart	`<wink-shopping-cart-button>`	Cart summary button

See Web Components for the full attribute reference.