Μετάβαση στο περιεχόμενο

Webflow

Το Webflow υποστηρίζει προσαρμοσμένο HTML και JavaScript σε τρία σημεία: το <head> σε όλο τον ιστότοπο, το </body> σε όλο τον ιστότοπο και ενσωματώσεις κώδικα ανά στοιχείο. Αυτό καθιστά την ενσωμάτωση των web components του Wink απλή.

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

Ενότητα με τίτλο «Φόρτωση των σεναρίων Wink σε όλο τον ιστότοπο»
  1. Στον Webflow Designer, ανοίξτε Project Settings → Custom Code.
  2. Στην ενότητα Head Code, προσθέστε το φύλλο στυλ:
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css">
  3. Στην ενότητα Footer Code, προσθέστε το σενάριο και τον φορτωτή εφαρμογής (αντικαταστήστε το 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>
  4. Κάντε κλικ στο Save Changes.

Προσθήκη component σε συγκεκριμένο στοιχείο

Ενότητα με τίτλο «Προσθήκη component σε συγκεκριμένο στοιχείο»
  1. Στον Designer, επιλέξτε το Div ή Section όπου θέλετε το component.
  2. Στο δεξί πάνελ, κάντε κλικ στο εικονίδιο </> Embed (ή προσθέστε ένα στοιχείο HTML Embed από το πάνελ Προσθήκης).
  3. Επικολλήστε το HTML του component, για παράδειγμα:
    <wink-content-loader
    layout="RANKED"
    id="YOUR_LAYOUT_ID"
    ></wink-content-loader>
  4. Κάντε κλικ στο Save & Close.

Αν χρειάζεστε το Wink μόνο σε συγκεκριμένες σελίδες, χρησιμοποιήστε την έγχυση κώδικα ανά σελίδα αντί για σε όλο τον ιστότοπο:

  1. Ανοίξτε τις Page Settings για τη στοχευόμενη σελίδα (εικονίδιο γραναζιού στο πάνελ Σελίδες).
  2. Μεταβείτε στην ενότητα Custom Code → Before </body> tag.
  3. Επικολλήστε το ίδιο σενάριο και φορτωτή εφαρμογής όπως παραπάνω.
  4. Αποθηκεύστε τις ρυθμίσεις της σελίδας.
ComponentHTML 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 για την πλήρη αναφορά χαρακτηριστικών.