Ghost

Die integrierte Code Injection-Funktion von Ghost ermöglicht es Ihnen, Skripte im globalen <head> und </body> Ihrer Publikation hinzuzufügen. Alle Ghost-Pläne unterstützen Code Injection, was das Einbetten von Wink-Komponenten auf jeder Seite oder jedem Beitrag erleichtert.

Wink-Skripte site-wide laden

Gehen Sie im Ghost Admin-Panel zu Einstellungen → Code Injection.

Fügen Sie im Feld Site Header das Stylesheet hinzu:

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

Fügen Sie im Feld Site Footer das Skript und den Application Loader hinzu (ersetzen Sie 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>

Klicken Sie auf Speichern.

Komponente zu einem Beitrag oder einer Seite hinzufügen

Der Ghost-Editor unterstützt eine HTML-Karte, mit der Sie rohen HTML-Code überall in Ihrem Inhalt einfügen können.

Öffnen Sie den Beitrag oder die Seite im Ghost-Editor.
Geben Sie / ein, um den Karten-Auswahlmodus zu öffnen, und wählen Sie HTML.

Fügen Sie den HTML-Code der Komponente ein, zum Beispiel:

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

Klicken Sie außerhalb der Karte, um eine Vorschau anzuzeigen, und veröffentlichen Sie dann.

Code Injection pro Seite

Für eine Komponente, die nur auf einer Seite erscheinen soll, unterstützt Ghost auch Code Injection pro Seite:

Öffnen Sie die Einstellungen des Beitrags oder der Seite (Zahnrad-Symbol im Editor).
Scrollen Sie zu Code Injection.
Fügen Sie den Komponenten-Tag im Feld Footer hinzu (der globale App-Loader muss nur im site-weiten Footer sein).
Speichern.

Verfügbare Komponenten

Komponente	HTML-Tag	Zweck
Content Loader	`<wink-content-loader>`	Anzeige von Hotelkarten, Raster, Karten
Lookup	`<wink-lookup>`	Suchleiste für Reiseziele
Suchbutton	`<wink-search-button>`	Öffnet den Reiseplan-Auswähler
Account-Button	`<wink-account-button>`	Anmeldung / Benutzermenü
Reiseplan-Button	`<wink-itinerary-button>`	Zeigt den aktuellen Reiseplan
Reiseplan-Auswähler	`<wink-itinerary-picker>`	Vollständiges Reiseplan-Formular
Einkaufswagen	`<wink-shopping-cart-button>`	Zusammenfassungsknopf für den Warenkorb

Siehe Web Components für die vollständige Attributreferenz.