Squarespace

Σημείωση

Η λειτουργία Code Injection του Squarespace είναι διαθέσιμη στο Business plan και άνω. Τα προσαρμοσμένα μπλοκ HTML είναι διαθέσιμα σε όλα τα επί πληρωμή πακέτα.

Το Squarespace υποστηρίζει προσαρμοσμένο HTML και JavaScript, που σημαίνει ότι μπορείτε να ενσωματώσετε οποιοδήποτε web component του Wink απευθείας στην ιστοσελίδα σας χωρίς πρόσθετο plugin. Αυτός ο οδηγός σας δείχνει πώς να φορτώσετε τα σκριπτάκια του Wink σε όλη την ιστοσελίδα και στη συνέχεια να τοποθετήσετε components σε μεμονωμένες σελίδες.

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

Η προσθήκη των σκριπτών στο παγκόσμιο footer και header της ιστοσελίδας σας σημαίνει ότι το Wink είναι διαθέσιμο σε κάθε σελίδα χωρίς να χρειάζεται να επαναλαμβάνετε τη ρύθμιση.

1. Στον επεξεργαστή του Squarespace, πηγαίνετε στο Settings → Advanced → Code Injection.
2. Στο πεδίο Header, προσθέστε το stylesheet:

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

3. Στο πεδίο Footer, προσθέστε το σκριπτάκι και τον φορτωτή εφαρμογής (αντικαταστήστε το YOUR_CLIENT_ID με το Client ID του Wink σας):

   <script src="https://elements.wink.travel/elements.js" type="module" defer></script>
   <wink-app-loader client-id="YOUR_CLIENT_ID"></wink-app-loader>

4. Κάντε κλικ στο Save.

Συμβουλή

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

Προσθήκη component σε σελίδα

Μόλις φορτωθούν τα σκριπτάκια παγκοσμίως, μπορείτε να τοποθετήσετε οποιοδήποτε component του Wink σε οποιαδήποτε σελίδα χρησιμοποιώντας ένα Code Block.

1. Ανοίξτε τη σελίδα που θέλετε να επεξεργαστείτε.
2. Κάντε κλικ στο Edit και προσθέστε ένα νέο μπλοκ Code εκεί που θέλετε να εμφανιστεί το component.
3. Επικολλήστε το HTML του component, για παράδειγμα έναν content loader:

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

4. Κάντε κλικ στο Apply και μετά στο Save.

Διαθέσιμα components

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

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

• Αναφορά Web Components
• Πώς να αποκτήσετε το Client ID σας
• Τεκμηρίωση Squarespace Code Injection