Calendly: Πώς να ενσωματώσετε ένα αναδυόμενο παράθυρο προγραμματισμού ή ένα ενσωματωμένο ημερολόγιο στον ιστότοπό σας ή στον ιστότοπο WordPress

Γραφικό στοιχείο προγραμματισμού Calendly

Πριν από μερικές εβδομάδες, βρισκόμουν σε έναν ιστότοπο και παρατήρησα όταν έκανα κλικ σε έναν σύνδεσμο για να προγραμματίσω ένα ραντεβού μαζί τους ότι δεν με έφεραν σε έναν ιστότοπο προορισμού, υπήρχε ένα γραφικό στοιχείο που δημοσίευσε το Calendly χρονοπρογραμματιστή απευθείας σε ένα αναδυόμενο παράθυρο. Αυτό είναι ένα εξαιρετικό εργαλείο… το να διατηρείτε κάποιον στον ιστότοπό σας είναι πολύ καλύτερη εμπειρία από το να τον προωθήσετε σε μια εξωτερική σελίδα.

Τι είναι το Calendly;

Calendly ενσωματώνεται άμεσα με το δικό σας Χώρος εργασίας Google ή άλλο σύστημα ημερολογίου για τη δημιουργία φορμών προγραμματισμού που είναι και όμορφες και εύχρηστες. Το καλύτερο από όλα, μπορείτε ακόμη και να περιορίσετε τον χρόνο που αφήνετε κάποιον να συνδεθεί μαζί σας στο ημερολόγιό σας. Για παράδειγμα, συχνά έχω μόνο μερικές ώρες διαθέσιμες συγκεκριμένες ημέρες για εξωτερικές συναντήσεις.

Η χρήση ενός τέτοιου χρονοπρογραμματιστή είναι επίσης πολύ καλύτερη εμπειρία από τη συμπλήρωση μιας φόρμας. Για το δικό μου εταιρεία συμβούλων ψηφιακού μετασχηματισμού, έχουμε εκδηλώσεις ομαδικών πωλήσεων όπου η ηγετική ομάδα συμμετέχει στη συνάντηση. Επίσης, ενσωματώνουμε την πλατφόρμα διαδικτυακών συσκέψεων στο Calendly, έτσι ώστε οι προσκλήσεις ημερολογίου να περιλαμβάνουν όλους τους συνδέσμους διαδικτυακών συσκέψεων.

Η Calendly κυκλοφόρησε ένα σενάριο και ένα φύλλο στυλ γραφικού στοιχείου που κάνει εξαιρετική δουλειά στην ενσωμάτωση της φόρμας προγραμματισμού απευθείας σε μια σελίδα, που ανοίγει από ένα κουμπί ή ακόμα και από ένα αιωρούμενο κουμπί στο υποσέλιδο του ιστότοπού σας. Το σενάριο για το Calendly είναι καλά γραμμένο, αλλά η τεκμηρίωση για την ενσωμάτωσή του στον ιστότοπό σας δεν είναι καθόλου καλή. Στην πραγματικότητα, εκπλήσσομαι που το Calendly δεν έχει ακόμη δημοσιεύσει τις δικές του προσθήκες ή εφαρμογές για διαφορετικές πλατφόρμες.

Αυτό είναι απίστευτα χρήσιμο. Είτε βρίσκεστε σε υπηρεσίες οικιακής χρήσης και θέλετε να παρέχετε στους πελάτες σας ένα μέσο για να προγραμματίσουν το ραντεβού τους, έναν περιπατητή σκύλων, μια εταιρεία SaaS που θέλει τους επισκέπτες να προγραμματίσουν μια επίδειξη ή μια μεγάλη εταιρεία με πολλά μέλη που πρέπει να προγραμματίσετε εύκολα… Calendly και τα γραφικά στοιχεία ενσωμάτωσης είναι ένα εξαιρετικό εργαλείο αυτοεξυπηρέτησης.

Πώς να ενσωματώσετε Calendly στον ιστότοπό σας

Περιέργως, θα βρείτε μόνο οδηγίες σε αυτές τις ενσωματώσεις στο Τύπος συμβάντος επίπεδο και όχι το πραγματικό επίπεδο συμβάντος στον λογαριασμό σας Calendly. Θα βρείτε τον κωδικό στο αναπτυσσόμενο μενού για τις ρυθμίσεις του τύπου συμβάντος επάνω δεξιά.

calendly ενσωμάτωση

Μόλις κάνετε κλικ σε αυτό, θα δείτε τις επιλογές για τους τύπους ενσωματώσεων:

ενσωμάτωση αναδυόμενου κειμένου

Εάν πάρετε τον κώδικα και τον ενσωματώσετε όπου θέλετε στον ιστότοπό σας, υπάρχουν μερικά ζητήματα.

  • Εάν θέλετε να καλέσετε δύο διαφορετικά γραφικά στοιχεία σε μια σελίδα… ίσως έχετε ένα κουμπί που εκκινεί τον προγραμματιστή (Αναδυόμενο κείμενο) καθώς και το κουμπί υποσέλιδου (Αναδυόμενο γραφικό στοιχείο)… θα πρέπει να προσθέσετε το φύλλο στυλ και ένα σενάριο των καιρών. Αυτό είναι περιττό.
  • Η κλήση ενός εξωτερικού αρχείου σεναρίου και φύλλου στυλ ενσωματωμένο στον ιστότοπό σας δεν είναι ο βέλτιστος τρόπος για να προσθέσετε την υπηρεσία στον ιστότοπό σας.

Η σύστασή μου θα ήταν να φορτώσετε το φύλλο στυλ και τη Javascript στην κεφαλίδα σας… στη συνέχεια να χρησιμοποιήσετε τα άλλα γραφικά στοιχεία όπου έχουν νόημα σε ολόκληρο τον ιστότοπό σας.

Πώς λειτουργούν τα γραφικά στοιχεία του Calendly

Calendly έχει δύο αρχεία που χρειάζονται για να ενσωματωθούν στον ιστότοπό σας, ένα φύλλο στυλ και javascript. Εάν πρόκειται να τα εισαγάγετε στον ιστότοπό σας, θα προσθέσω τα ακόλουθα στην ενότητα κεφαλίδας του HTML σας:

<link href="https://calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://calendly.com/assets/external/widget.js" type="text/javascript"></script>

Ωστόσο, εάν είστε στο WordPress, η καλύτερη πρακτική θα ήταν να χρησιμοποιήσετε το δικό σας functions.php αρχείο για να εισαγάγετε τα σενάρια χρησιμοποιώντας τις βέλτιστες πρακτικές του WordPress. Έτσι, στο παιδικό μου θέμα, έχω τις ακόλουθες γραμμές κώδικα για να φορτώσω το φύλλο στυλ και το σενάριο:

wp_enqueue_script('calendly-script', '//assets.calendly.com/assets/external/widget.js', array(), null, true);
wp_enqueue_style('calendly-style', '//assets.calendly.com/assets/external/widget.css' );

Αυτό θα τα φορτώσει (και θα τα αποθηκεύσει προσωρινά) σε ολόκληρο τον ιστότοπό μου. Τώρα μπορώ να χρησιμοποιώ τα γραφικά στοιχεία όπου τα θέλω.

Κουμπί υποσέλιδου Calendly

Θέλω να καλέσω το συγκεκριμένο συμβάν αντί για τον τύπο συμβάντος στον ιστότοπό μου, επομένως φορτώνω το ακόλουθο σενάριο στο υποσέλιδο μου:

<script type="text/javascript">window.onload = function() { Calendly.initBadgeWidget({ url: 'https://calendly.com/highbridge-team/sales', text: 'Schedule a Consultation', color: '#0069ff', textColor: '#ffffff', branding: false }); }</script>

Θα δείτε το Calendly το σενάριο αναλύεται ως εξής:

  • URL – το ακριβές συμβάν που θέλω να φορτώσω στο widget μου.
  • Κείμενο – το κείμενο που θέλω να έχει το κουμπί.
  • Χρώμα – το χρώμα φόντου του κουμπιού.
  • χρώμα κειμένου - το χρώμα του κειμένου.
  • το branding – κατάργηση της επωνυμίας Calendly.

Αναδυόμενο παράθυρο κειμένου Calendly

Θέλω επίσης αυτό να είναι διαθέσιμο σε ολόκληρο τον ιστότοπό μου χρησιμοποιώντας έναν σύνδεσμο ή ένα κουμπί. Για να το κάνετε αυτό, χρησιμοποιείτε ένα συμβάν onClick στο δικό σας Calendly κείμενο συνδέσμου. Το δικό μου έχει επιπλέον κλάσεις για να το εμφανίσει ως κουμπί (δεν φαίνεται στο παρακάτω παράδειγμα):

<a href="#" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/highbridge-team/sales'});return false;">Schedule time with us</a>

Αυτό το μήνυμα μπορεί να χρησιμοποιηθεί για να υπάρχουν πολλές προσφορές σε μία σελίδα. Ίσως έχετε 3 τύπους συμβάντων που θέλετε να ενσωματώσετε… απλώς τροποποιήστε τη διεύθυνση URL για τον κατάλληλο προορισμό και θα λειτουργήσει.

Αναδυόμενο παράθυρο ενσωμάτωσης του Calendly

Η ενσωματωμένη ενσωμάτωση είναι λίγο διαφορετική στο ότι χρησιμοποιεί ένα div που καλείται ειδικά ανά τάξη και προορισμό.

<div class="calendly-inline-widget" data-url="https://calendly.com/highbridge-team/sales" style="min-width:320px;height:630px;"></div>

Και πάλι, αυτό είναι χρήσιμο γιατί μπορείτε να έχετε πολλαπλά div με το καθένα Calendly χρονοπρογραμματιστή στην ίδια σελίδα.

Πλευρική σημείωση: Θα ήθελα η Calendly να τροποποιήσει τον τρόπο εφαρμογής του, ώστε να μην είναι τόσο τεχνικό. Θα ήταν υπέροχο αν μπορούσατε απλώς να έχετε μια τάξη και στη συνέχεια να χρησιμοποιήσετε τον προορισμό href για να φορτώσετε το γραφικό στοιχείο. Αυτό θα απαιτούσε λιγότερη άμεση κωδικοποίηση στα συστήματα διαχείρισης περιεχομένου. Αλλά… είναι ένα εξαιρετικό εργαλείο (προς το παρόν!). Για παράδειγμα – ένα πρόσθετο WordPress με σύντομους κωδικούς θα ήταν ιδανικό για περιβάλλον WordPress. Αν σας ενδιαφέρει, Calendly… Θα μπορούσα να το φτιάξω εύκολα για εσάς!

Ξεκινήστε με το Calendly

Αποποίηση ευθύνης: Είμαι χρήστης του Calendly και επίσης συνεργάτης του συστήματός τους. Αυτό το άρθρο έχει συνδέσμους συνεργατών σε όλο το άρθρο.