Πώς να ενσωματώσετε λογισμικό προγραμματισμού ραντεβού όπως Calendly, TidyCal ή YouCanBook.me

Αυτή η σελίδα δείχνει πώς να ενσωματώσετε λογισμικό προγραμματισμού ραντεβού με το systeme.io.

Τι θα χρειαστείτε:

• Έναν λογαριασμό systeme.io
• Μια σελίδα funnel πωλήσεων
• Έναν λογαριασμό Calendly, TidyCal ή YouCanBook.me

Η παρακάτω μέθοδος λειτουργεί με τα Calendly, TidyCal και YouCanBook.me.

Θα χρησιμοποιήσουμε το Calendly ως παράδειγμα.

1. Στον λογαριασμό σας στο Calendly: Δημιουργήστε και αντιγράψτε τον κώδικα ενσωμάτωσης για το ημερολόγιο/συμβάν σας.

2. Στον systeme.io λογαριασμό σας:

Προσθέστε το στοιχείο Raw HTML στη σελίδα σας.

Επικολλήστε τον κώδικα που παρέχει το λογισμικό ημερολογίου σας στο στοιχείο «Raw HTML» που μόλις προσθέσατε και, στη συνέχεια, αποθηκεύστε τη σελίδα.

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

Πώς να ενσωματώσετε το Calendly σε αναδυόμενο παράθυρο (popup)

Ακολουθήστε τα προηγούμενα βήματα, αλλά προσθέστε ένα στοιχείο Raw HTML στο popup όπου θέλετε να εμφανίζεται το ημερολόγιό σας.

1. Στον προσαρμοσμένο κώδικα του popup σας

Προσθέστε ένα χαρακτηριστικό id  στο στοιχείο div  που παρέχεται από το Calendly. Μπορείτε να χρησιμοποιήσετε οποιαδήποτε τιμή· ωστόσο, βεβαιωθείτε ότι είναι μοναδική για τη σελίδα.

2. Στην κύρια σελίδα επεξεργασίας

Μεταβείτε στις Ρυθμίσεις και κάντε κλικ στο Edit footer code.

<script>
  document.addEventListener('open_popup', function() {
    Calendly.initInlineWidget({
      url: 'https://calendly.com/YOUR_CALENDLY_LINK',
      parentElement: document.getElementById('calendly-container')
    })
  })
</script>

Εάν επιλέξατε όνομα id  διαφορετικό από το calendly-container , βεβαιωθείτε ότι το αντικαθιστάτε αφού επικολλήσετε τον κώδικα.

Πώς να ενσωματώσετε το TidyCal σε αναδυόμενο παράθυρο (popup)

Ακολουθεί ένα παράδειγμα:

1. Το TidyCal παρέχει έναν κώδικα ενσωμάτωσης παρόμοιο με τον παρακάτω:

<div class="tidycal-embed" data-path="YOUR_DATA_PATH"></div>
<script src="https://asset-tidycal.b-cdn.net/js/embed.js"></script>

2. Αρχικά, προσθέστε ένα στοιχείο Raw HTML στο popup σας. Στη συνέχεια, αντιγράψτε μόνο την παρακάτω γραμμή από τον κώδικα του TidyCal και επικολλήστε την στο στοιχείο: <div class="tidycal-embed" data-path="YOUR_DATA_PATH"></div> .

3. Έπειτα, μεταβείτε στις ρυθμίσεις της σελίδας και κάντε κλικ στο «Edit footer code». Πρέπει να επικολλήσετε το υπόλοιπο του κώδικα που παρέχεται από το TidyCal <script src="https://asset-tidycal.b-cdn.net/js/embed.js"></script>  και να συμπεριλάβετε το παρακάτω απόσπασμα:

<script>
  document.addEventListener('open_popup', function(){
    const embedTarget = document.querySelector('div.tidycal-embed')
    window.TidyCal?.init(embedTarget) 
  })
</script>