Πώς να δημιουργήσετε ένα widget

Επισκόπηση

Το widget κρατήσεων του TicketingHub είναι ένα εργαλείο JavaScript που ενσωματώνεται σε ιστότοπους και επιτρέπει στους πελάτες να κάνουν απευθείας κράτηση προϊόντων. Το δημιουργείτε από τον πίνακα ελέγχου, το διαμορφώνετε ενότητα προς ενότητα και επικολλάτε ένα μικρό απόσπασμα κώδικα στον ιστότοπό σας.

Υποστηριζόμενα προγράμματα περιήγησης

Safari 16.4+, Chrome 111+, Firefox 128+.

Από τον πίνακα ελέγχου σας, μεταβείτε στην ενότητα Widget
Κάντε κλικ στην επιλογή Νέο widget
Δώστε στο widget ένα όνομα, επιλέξτε τα προϊόντα που θα πωλεί και κάντε κλικ στην επιλογή Δημιουργία widget

Θα μεταφερθείτε στη σελίδα ρυθμίσεων του widget, όπου διαμορφώνονται όλα τα υπόλοιπα. Στην αριστερή πλευρά βρίσκονται οι ρυθμίσεις, ομαδοποιημένες σε ενότητες, ενώ στη δεξιά πλευρά εμφανίζεται μια ζωντανή προεπισκόπηση του widget, η οποία ανανεώνεται καθώς πραγματοποιείτε αλλαγές.

Τι πουλάτε

Επιλέξτε τα προϊόντα, τα πακέτα και τις δωροκάρτες που προσφέρει το widget, συμπεριλάβετε πρόσθετα (όλα ή μια επιλεγμένη συλλογή) και αποφασίστε αν οι πελάτες μπορούν να αγοράζουν τα προϊόντα ως δωροκουπόνια ή να εξαργυρώνουν δωροκουπόνια στο widget.

Ροή κράτησης

Επιλέξτε τον τρόπο με τον οποίο οι πελάτες περιηγούνται στο widget: Πρώτα τα εισιτήρια (επιλέγουν εισιτήρια και στη συνέχεια ημερομηνία και ώρα), Πρώτα η εκδήλωση (περιηγούνται σε ένα ημερολόγιο και στη συνέχεια επιλέγουν τι θα κάνουν κράτηση) ή Μόνο εξαργύρωση κουπονιού. Μπορείτε επίσης να ορίσετε την προεπιλεγμένη προβολή ημερολογίου και να ζητάτε από τους πελάτες να πληκτρολογούν δύο φορές το email τους, ώστε να αποφεύγονται τα τυπογραφικά λάθη.

Κανόνες πωλήσεων

Ελέγξτε πότε και τι πουλά το widget: την ημερομηνία και την ώρα έναρξης των πωλήσεων, την ημερομηνία στην οποία ανοίγει το ημερολόγιο, το πότε θα εμφανίζεται η διαθέσιμη χωρητικότητα μιας χρονικής περιόδου και τα νομίσματα στα οποία μπορούν να πληρώνουν οι πελάτες. Όταν η πρώτη εβδομάδα ή ο πρώτος μήνας που εμφανίζεται στο ημερολόγιο δεν περιλαμβάνει τίποτα για κράτηση, το ημερολόγιο προχωρά και ανοίγει στην πρώτη διαθέσιμη ημερομηνία.

Εμφάνιση

Προσθέστε προσαρμοσμένο CSS για να ρυθμίσετε λεπτομερώς την εμφάνιση του widget, ώστε να ταιριάζει με την επωνυμία σας.

Analytics

Συνδέστε το Google Analytics ή το Google Tag Manager για να παρακολουθείτε τον τρόπο με τον οποίο οι επισκέπτες χρησιμοποιούν το widget σας.

Για προχωρημένους

Στείλτε τους πελάτες σε μια σελίδα της επιλογής σας μετά την αγορά και ορίστε την παράμετρο URL που χρησιμοποιούν οι μεταπωλητές σας, ώστε οι κρατήσεις τους να αποδίδονται σε αυτούς.

Προεπισκόπηση, δημοσίευση και εγκατάσταση

Οι αλλαγές που πραγματοποιείτε αποθηκεύονται ως πρόχειρο σε σχέση με μια ζωντανή προεπισκόπηση — κάντε κλικ στην επιλογή Ενημέρωση προεπισκόπησης για να τις δείτε στα δεξιά, χωρίς να επηρεάσετε το ενεργό widget σας. Όταν μείνετε ικανοποιημένοι, κάντε κλικ στην επιλογή Δημοσίευση για να τις ενεργοποιήσετε ή στην επιλογή Ακύρωση για να απορρίψετε το πρόχειρο.

Για να τοποθετήσετε το widget στον ιστότοπό σας, ανοίξτε τις Οδηγίες εγκατάστασης: αντιγράψτε την ετικέτα script στη σελίδα σας και, στη συνέχεια, επιλέξτε ανάμεσα στο widget Ενσωματωμένο (εμφανίζεται απευθείας στο περιεχόμενο της σελίδας σας) και στο widget Modal/Αναδυόμενο παράθυρο (ανοίγει σε επικάλυψη μέσω ενός κουμπιού) και επικολλήστε το αντίστοιχο απόσπασμα κώδικα.

Όταν ένας πελάτης μεταβαίνει στο επόμενο βήμα, το widget πραγματοποιεί κύλιση στην κορυφή της φόρμας κράτησης, ώστε ένας πελάτης που έχει μετακινηθεί προς τα κάτω σε μια μεγάλη λίστα εισιτηρίων να μην καταλήγει στη μέση του επόμενου βήματος. Αν έχετε τοποθετήσει το widget μέσα σε ένα δικό σας πλαίσιο που πραγματοποιεί κύλιση, μετακινείται αυτό το πλαίσιο και η σελίδα σας μετακινείται επίσης μόνο όταν το ίδιο το πλαίσιο έχει βγει από την ορατή περιοχή. Αυτό συμβαίνει όταν η κορυφή της φόρμας έχει βγει από την ορατή περιοχή και όταν η φόρμα εκτείνεται πέρα από το κάτω μέρος της οθόνης, ενώ υπάρχει αρκετός διαθέσιμος χώρος πάνω από αυτήν. Μια φόρμα που χωρά ήδη στην οθόνη παραμένει στη θέση της και το widget αφήνει χώρο για μια κεφαλίδα που είναι σταθερά τοποθετημένη στην κορυφή της σελίδας σας.

Αν αυτό δεν ταιριάζει στη διάταξή σας, αποτρέψτε τη μετακίνηση της σελίδας σας προσθέτοντας το "scrollOnStepChange": false στον κώδικα του widget που επικολλήσατε:

<div id="embed_widget" data-th-embed data-th-config='{"widgetId":"YOUR-WIDGET-ID","scrollOnStepChange":false}'></div>

Αν η κεφαλίδα σας κρύβεται καθώς οι επισκέπτες πραγματοποιούν κύλιση προς τα κάτω και εμφανίζεται ξανά καθώς πραγματοποιούν κύλιση προς τα πάνω, το widget δεν μπορεί να υπολογίσει το ύψος της και η κορυφή της φόρμας μπορεί να καταλήξει πίσω από αυτήν. Αντί να απενεργοποιήσετε την κύλιση, δώστε στο widget το ύψος της κεφαλίδας σας σε pixel:

<div id="embed_widget" data-th-embed data-th-config='{"widgetId":"YOUR-WIDGET-ID","scrollOffset":80}'></div>

Αν χρησιμοποιείτε τον κλασικό επεξεργαστή widget, μπορείτε να αντιγράψετε ένα widget αντί να το δημιουργήσετε ξανά:

Μεταβείτε στην ενότητα Widget
Επιλέξτε ένα υπάρχον widget
Κάντε κλικ στην επιλογή Κλωνοποίηση
Επιλέξτε το κανάλι-στόχο και επιβεβαιώστε την επιλογή

Προσαρμόστε το κλωνοποιημένο widget, δημοσιεύστε το και αντιγράψτε τον κώδικα στον ιστότοπό σας.