Ako integrovať softvér na plánovanie stretnutí ako Calendly, TidyCal alebo Youcanbookme

Táto stránka vás naučí, ako integrovať softvér na plánovanie stretnutí na systeme.io.

Čo budete potrebovať:

• účet na systeme.io
• stránku predajného lievika
• účet na Calendly, TidyCal alebo YouCanBook.me

Nasledujúcu metódu je možné aplikovať s Calendly, TidyCal a YouCanBook.me

Ako príklad použijeme Calendly.

1. Na vašom účte Calendly:

Vygenerujte a skopírujte HTML kód vášho plánovača stretnutí

2. Na vašom účte systeme.io:

Pridajte na svoju stránku prvok „HTML kód"

Vložte kód poskytnutý vaším kalendárovým softvérom do HTML kódu, ktorý ste pridali, potom uložte kód a svoju stránku.

Nakoniec, keď si zobrazíte náhľad svojej stránky, uvidíte kalendár Calendly.

Ako integrovať Calendly do vyskakovacieho okna

Postupujte podľa všetkých predchádzajúcich krokov a potom

1. Vo vlastnom kóde vášho vyskakovacieho okna

Pridajte atribút id  k elementu div  poskytnutému službou Calendly. Môžete použiť ľubovoľnú hodnotu, no uistite sa, že je na stránke jedinečná.

2. Na hlavnej stránke editora

Prejdite na stránku Nastavenia , kliknite na Upraviť kód pätičky  a vložte kód takto

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

Ak ste zvolili iný názov id  než calendly-container , uistite sa, že ho po vložení kódu nahradíte.

Ako integrovať TidyCal do vyskakovacieho okna

Pre lepšiu prehľadnosť to ilustrujeme na príklade:

1. Služba TidyCal poskytla na integráciu kód podobný tomuto:

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

2. Prvé, čo musíte urobiť, je pridať HTML prvok do vyskakovacieho okna, kde chcete pridať svoj kalendár, potom skopírujte tento riadok <div class="tidycal-embed" data-path="VAŠA_DATA_PATH"></div>  a vložte ho do svojho HTML prvku.

3. Potom prejdite do nastavení stránky a kliknite na „Upraviť kód pätičky". Musíte vložiť zvyšok kódu poskytnutého službou TidyCal <script src="https://asset-tidycal.b-cdn.net/js/embed.js"></script>  a pridať aj nasledujúci úryvok

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