Σε αυτό το σεμινάριο, θα σας καθοδηγήσουμε σε μια νέα λειτουργία που έχουμε αναπτύξει—μια λειτουργία που πολλοί από εσάς ζητάτε: ένα κουμπί που ανοίγει ένα αναδυόμενο παράθυρο με μια φόρμα WhatsApp στον ιστότοπό σας. Είτε χρησιμοποιείτε απλό HTML είτε ένα CMS όπως το WordPress με Elementor, αυτός ο οδηγός θα σας δείξει πώς να το ρυθμίσετε βήμα προς βήμα. Ας ξεκινήσουμε!
Δείτε αυτό το βίντεο: https://youtu.be/J7NE3SRZoRE
Τι θα πετύχετε
Μέχρι το τέλος αυτού του οδηγού, θα έχετε ένα κουμπί στον ιστότοπό σας που, όταν κάνετε κλικ, ανοίγει ένα αναδυόμενο παράθυρο που περιέχει μια προσαρμόσιμη φόρμα WhatsApp. Αυτό το αναδυόμενο παράθυρο υποστηρίζεται από ένα γραφικό στοιχείο και θα σας δείξουμε πώς να το διαμορφώσετε ώστε να ταιριάζει στις ανάγκες σας—είτε θέλετε ένα banner, ένα χρονόμετρο αντίστροφης μέτρησης είτε απλώς μια απλή φόρμα.
Στιγμιότυπο οθόνης
Βήμα 1: Ρύθμιση του γραφικού στοιχείου ως αναδυόμενου παραθύρου
Δημιουργία ή πρόσβαση στο γραφικό στοιχείο σας: Ξεκινήστε προετοιμάζοντας το γραφικό στοιχείο που θα χρησιμοποιήσετε. Αυτό θα μπορούσε να είναι ένα προϋπάρχον γραφικό στοιχείο WhatsApp ή ένα νέο που δημιουργείτε στον πίνακα ελέγχου σας.
Ενεργοποίηση λειτουργίας αναδυόμενου παραθύρου: Μεταβείτε στην ενότητα Σχεδίαση στις ρυθμίσεις του γραφικού στοιχείου. Αναζητήστε μια επιλογή που ονομάζεται “Αναδυόμενο παράθυρο γραφικού στοιχείου” και ενεργοποιήστε την. Αυτή η ρύθμιση μετατρέπει το γραφικό στοιχείο σας σε ένα αναδυόμενο παράθυρο που μπορεί να ενεργοποιηθεί από ένα κουμπί.
Προσαρμογή του γραφικού στοιχείου: Προσθέστε στοιχεία όπως ένα banner (προαιρετικό) ή μια φόρμα. Για παράδειγμα:
Προσθέστε ένα banner για νέους ή επαναλαμβανόμενους επισκέπτες για να τραβήξουν την προσοχή.
Συμπεριλάβετε μια φόρμα WhatsApp για να συμπληρώσουν οι χρήστες.
Προσαρμόστε ρυθμίσεις όπως η θέση (π.χ., δεξιά πλευρά της σελίδας) και η ορατότητα.
Συμβουλή: Εάν δεν θέλετε το banner, μπορείτε να το απενεργοποιήσετε αργότερα. Θα καλύψουμε τις επιλογές προσαρμογής καθώς προχωράμε.
Στιγμιότυπο οθόνης
Βήμα 2: Προσθέστε τον κώδικα κουμπιού στον ιστότοπό σας
Λάβετε τον κώδικα κουμπιού: Το κουμπί βασίζεται σε ένα απλό κομμάτι κώδικα HTML που ενεργοποιεί το αναδυόμενο παράθυρο γραφικού στοιχείου. Θα βρείτε αυτόν τον κώδικα στο συνοδευτικό άρθρο μας (συνδέεται παρακάτω). Μοιάζει κάπως έτσι: html Επικοινωνήστε μαζί μας
Αυτός είναι ένας γενικός κώδικας που λειτουργεί με οποιοδήποτε widget στη σελίδα σας—δεν απαιτούνται προσαρμοσμένες τροποποιήσεις!
Εισαγωγή του κώδικα:
Για ιστότοπους HTML: Επικολλήστε τον κώδικα όπου θέλετε να εμφανίζεται το κουμπί (π.χ., κεφαλίδα, υποσέλιδο ή μέση σελίδας).
Για WordPress (Elementor): Προσθέστε ένα μπλοκ HTML στο Elementor και, στη συνέχεια, επικολλήστε τον κώδικα του κουμπιού μέσα.
Στυλ του κουμπιού: Προσαρμόστε την εμφάνιση του κουμπιού (χρώμα, μέγεθος, κείμενο) χρησιμοποιώντας CSS ή τα εργαλεία στυλ του δημιουργού σελίδων σας.
Στιγμιότυπο οθόνης
Βήμα 3: Δοκιμάστε το αναδυόμενο παράθυρο
Ελέγξτε τη λειτουργικότητα: Φορτώστε την ιστοσελίδα σας, κάντε κλικ στο κουμπί και βεβαιωθείτε ότι εμφανίζεται το αναδυόμενο παράθυρο. Θα πρέπει να εμφανίζει το διαμορφωμένο widget σας (π.χ., με μια φόρμα ή banner WhatsApp).
Προσαρμογή ρυθμίσεων: Εάν το αναδυόμενο παράθυρο δεν συμπεριφέρεται όπως αναμένεται, τροποποιήστε τις ρυθμίσεις του widget:
Απενεργοποιήστε το banner εάν δεν είναι απαραίτητο (μεταβείτε στις ρυθμίσεις του widget και απενεργοποιήστε το).
Ενεργοποιήστε το άμεσο άνοιγμα της φόρμας (στις ρυθμίσεις του widget, ενεργοποιήστε το Open First Agent με τη φόρμα).
Αφαιρέστε τους χρονομετρητές αντίστροφης μέτρησης ή άλλες λειτουργίες (στην ενότητα Σχεδίαση > Αντίστροφη μέτρηση, απενεργοποιήστε όπως απαιτείται).
Βήμα 4: Προσαρμόστε το αναδυόμενο παράθυρο (Προαιρετικό)
Το αναδυόμενο παράθυρο widget είναι εξαιρετικά ευέλικτο. Ακολουθούν ορισμένες επιλογές για εξερεύνηση:
Banners: Χρησιμοποιήστε προκατασκευασμένα πρότυπα (π.χ., Black Friday, Χριστούγεννα) ή ανεβάστε τα δικά σας. Τα banners μπορούν να είναι οριζόντια ή τετράγωνα – επιλέξτε αυτό που ταιριάζει στο σχέδιό σας.
Συμπεριφορά φόρμας: Αποφασίστε εάν η φόρμα ανοίγει αμέσως ή αφού ο χρήστης αλληλεπιδράσει με το αναδυόμενο παράθυρο.
Τοποθέτηση: Διατηρήστε το widget διακριτικό (π.χ., ένα μικρό εικονίδιο στη γωνία) ή κάντε το πιο εμφανές.
Αυτόματο άνοιγμα: Θέλετε το αναδυόμενο παράθυρο να φορτώνει όταν φορτώνει η σελίδα; Στις ρυθμίσεις του widget, ενεργοποιήστε την επιλογή “Φόρτωση ανοίγματος widget κατά τη φόρτωση σελίδας” στις επιλογές για προχωρημένους.
Βήμα 5: Περιπτώσεις χρήσης και παραδείγματα
Πολλαπλά κουμπιά: Προσθέστε τον κώδικα κουμπιού σε διαφορετικά σημεία (κεφαλίδα, μέση σελίδα, υποσέλιδο) για να ενεργοποιήσετε το ίδιο αναδυόμενο παράθυρο.
Ενσωματωμένη Φόρμα + Αναδυόμενο Παράθυρο: Εισαγάγετε τη φόρμα WhatsApp απευθείας στη σελίδα (μέσω ρυθμίσεων shortcode ή widget) διατηρώντας παράλληλα το κουμπί αναδυόμενου παραθύρου ξεχωριστό. Και τα δύο μπορούν να συνυπάρχουν!
Widgets WordPress: Χρησιμοποιήστε το κουμπί ως ενεργοποίηση για ένα τυπικό widget (όχι σε λειτουργία αναδυόμενου παραθύρου) για να το ανοίξετε κατ’ απαίτηση.
Βήμα 6: Δοκιμή σε όλες τις πλατφόρμες
Αυτή η λύση λειτουργεί καθολικά:
Ιστότοποι HTML: Προσθέστε τον κώδικα απευθείας.
WordPress, Wix, Shopify, κ.λπ.: Εισαγάγετε τον κώδικα όπου η πλατφόρμα σας επιτρέπει προσαρμοσμένο HTML.
Κινητά: Βεβαιωθείτε ότι το κουμπί και το αναδυόμενο παράθυρο φαίνονται καλά σε μικρότερες οθόνες – η κύλιση θα πρέπει να παραμένει ομαλή.
Γιατί αυτό έχει σημασία
Σε αντίθεση με δημοφιλή πρόσθετα όπως το Contact Form 7, αυτή η προσέγγιση σας παρέχει:
Ένα ενσωματωμένο CRM για την παρακολούθηση υποψήφιων πελατών.
Έναν προσαρμόσιμο επεξεργαστή για φόρμες και αναδυόμενα παράθυρα.
Ευελιξία σχεδιασμού χωρίς επιπλέον πρόσθετα.
Απεριόριστες επιλογές για πειραματισμό – χωρίς αναβαθμίσεις προγράμματος ή κρυφό κόστος.
Είτε εκτελείτε μια καμπάνια, προωθείτε μια προσφορά είτε καταγράφετε υποψήφιους πελάτες, αυτός ο συνδυασμός κουμπιού-αναδυόμενου παραθύρου σάς επιτρέπει να τοποθετείτε παροτρύνσεις για δράση ακριβώς εκεί που τις χρειάζεστε.
Τελικές συμβουλές
Πείραμα: Δοκιμάστε διαφορετικές ρυθμίσεις (αναδυόμενο παράθυρο έναντι κουμπιού έναντι αυτόματου ανοίγματος) για να δείτε τι λειτουργεί καλύτερα για το κοινό σας.
Πόροι: Δείτε τον πλήρη κώδικα και τη σελίδα παραδείγματος στο άρθρο που συνδέεται παρακάτω.
Σχόλια: Πείτε μας πώς λειτουργεί για εσάς—είμαστε εδώ για να σας βοηθήσουμε!