Ghost

Η ενσωματωμένη λειτουργία Code Injection του Ghost σας επιτρέπει να προσθέτετε σενάρια στο παγκόσμιο <head> και </body> της έκδοσής σας. Όλα τα πακέτα Ghost υποστηρίζουν το code injection, καθιστώντας εύκολη την ενσωμάτωση των στοιχείων Wink σε οποιαδήποτε σελίδα ή ανάρτηση.

Φόρτωση των σεναρίων Wink σε όλο τον ιστότοπο

Στο πάνελ διαχείρισης του Ghost, μεταβείτε στις Ρυθμίσεις → Code Injection.
Στο πλαίσιο Site Header, προσθέστε το φύλλο στυλ:
```
<link rel="stylesheet" href="https://elements.wink.travel/styles.css">
```
Στο πλαίσιο Site Footer, προσθέστε το σενάριο και τον φορτωτή εφαρμογής (αντικαταστήστε το 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>
```
Κάντε κλικ στο Αποθήκευση.

Προσθήκη στοιχείου σε ανάρτηση ή σελίδα

Ο επεξεργαστής του Ghost υποστηρίζει μια κάρτα HTML που σας επιτρέπει να εισάγετε ακατέργαστο HTML οπουδήποτε στο περιεχόμενό σας.

Ανοίξτε την ανάρτηση ή τη σελίδα στον επεξεργαστή Ghost.
Πληκτρολογήστε / για να ανοίξετε τον επιλογέα καρτών και επιλέξτε HTML.
Επικολλήστε το HTML του στοιχείου, για παράδειγμα:
```
<wink-content-loader
  layout="HOTEL"
  id="YOUR_LAYOUT_ID"
></wink-content-loader>
```
Κάντε κλικ έξω από την κάρτα για προεπισκόπηση και στη συνέχεια δημοσιεύστε.

Code injection ανά σελίδα

Για ένα στοιχείο που πρέπει να εμφανίζεται μόνο σε μία σελίδα, το Ghost υποστηρίζει επίσης code injection ανά σελίδα:

Ανοίξτε τις ρυθμίσεις της ανάρτησης ή της σελίδας (εικονίδιο γραναζιού στον επεξεργαστή).
Μεταβείτε στο Code Injection.
Προσθέστε το tag του στοιχείου στο πεδίο Footer (ο παγκόσμιος app-loader χρειάζεται μόνο στο footer σε όλο τον ιστότοπο).
Αποθηκεύστε.

Διαθέσιμα στοιχεία

Στοιχείο	HTML tag	Σκοπός
Content loader	`<wink-content-loader>`	Εμφάνιση καρτών ξενοδοχείων, πλεγμάτων, χαρτών
Lookup	`<wink-lookup>`	Μπάρα αναζήτησης προορισμών
Search button	`<wink-search-button>`	Άνοιγμα επιλογέα δρομολογίου
Account button	`<wink-account-button>`	Σύνδεση / μενού χρήστη
Itinerary button	`<wink-itinerary-button>`	Εμφάνιση τρέχοντος δρομολογίου
Itinerary picker	`<wink-itinerary-picker>`	Πλήρης φόρμα δρομολογίου
Shopping cart	`<wink-shopping-cart-button>`	Κουμπί σύνοψης καλαθιού

Δείτε τα Web Components για την πλήρη αναφορά χαρακτηριστικών.