HubSpot CMS

Το HubSpot CMS υποστηρίζει προσαρμοσμένα HTML modules και κώδικα κεφαλίδας/υποσέλιδου σε όλο τον ιστότοπο, καθιστώντας εύκολη την ενσωμάτωση των στοιχείων Wink σε σελίδες μάρκετινγκ και σελίδες προορισμού.

Σημείωση

Η εισαγωγή κώδικα σε όλο τον ιστότοπο απαιτεί πρόσβαση στο HubSpot CMS Hub (Starter ή ανώτερο). Τα προσαρμοσμένα HTML modules είναι διαθέσιμα σε όλα τα επίπεδα CMS.

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

1. Στο HubSpot, μεταβείτε στο Marketing → Files and Templates → Design Tools.
2. Ανοίξτε το ενεργό main.css του θέματος σας ή χρησιμοποιήστε τις παγκόσμιες ρυθμίσεις περιεχομένου.
3. Εναλλακτικά, μεταβείτε στο Settings → Website → Pages → Custom Code.
4. Στο πεδίο Head HTML, προσθέστε το φύλλο στυλ:

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

5. Στο πεδίο Footer HTML, προσθέστε το σενάριο και τον φορτωτή εφαρμογής (αντικαταστήστε το 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>

6. Αποθηκεύστε και δημοσιεύστε.

Συμβουλή

Το Client ID σας είναι διαθέσιμο στον λογαριασμό σας Wink στην ενότητα Applications.

Προσθήκη στοιχείου μέσω προσαρμοσμένου HTML module

1. Στα Design Tools, δημιουργήστε ένα νέο module τύπου Rich Text ή HTML.
2. Στο προεπιλεγμένο περιεχόμενο του module, επικολλήστε το HTML του στοιχείου:

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

3. Αποθηκεύστε το module και σύρετέ το σε οποιοδήποτε πρότυπο σελίδας ή σελίδα χρησιμοποιώντας τον επεξεργαστή σελίδας.

Προσθήκη στοιχείου απευθείας στον επεξεργαστή σελίδας

Αν προτιμάτε να μην δημιουργήσετε module, μπορείτε να χρησιμοποιήσετε μια ενότητα Custom HTML στον επεξεργαστή drag-and-drop:

1. Ανοίξτε τη σελίδα στον επεξεργαστή σελίδας του HubSpot.
2. Κάντε κλικ στο Add και επιλέξτε μια ενότητα Custom HTML ή Embed.
3. Επικολλήστε το tag του στοιχείου στο πεδίο HTML.
4. Κάντε κλικ στο Apply και δημοσιεύστε τη σελίδα.

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

Στοιχείο	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 για την πλήρη αναφορά χαρακτηριστικών.

Επιπλέον ανάγνωση

• Αναφορά Web Components
• Λάβετε το Client ID σας
• Έγγραφα προσαρμοσμένου κώδικα HubSpot