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

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

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

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

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

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

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

Προσθέστε το στοιχείο Ακατέργωτος HTML στη σελίδα σας.

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

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

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

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

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

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

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

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

Μεταβείτε στις Ρυθμίσεις και κάντε κλικ στο Επεξεργασία κώδικα υποσέλιδου.

<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. Αρχικά, προσθέστε ένα στοιχείο Ακατέργωτος 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>