Jak integrovat software pro plánování schůzek jako Calendly, TidyCal nebo Youcanbookme

Tato stránka vám ukáže, jak integrovat software pro plánování schůzek se systeme.io.

Budete potřebovat:

• Účet na systeme.io
• Stránku prodejního funnelu
• Účet Calendly, TidyCal nebo YouCanBook.me

Následující metoda funguje s Calendly, TidyCal a YouCanBook.me.

Jako příklad použijeme Calendly.

1. Ve svém účtu Calendly: Vygenerujte a zkopírujte vložený kód pro svůj kalendář/událost.

2. Ve svém účtu systeme.io:

Přidejte prvek Surové HTML na svou stránku.

Vložte kód poskytnutý vaším kalendářním softwarem do prvku 'Surové HTML', který jste právě přidali, a poté stránku uložte.

Nakonec, když si zobrazíte náhled své stránky, uvidíte kalendář Calendly.

Jak integrovat Calendly do vyskakovacího okna

Postupujte podle předchozích kroků, ale přidejte prvek Surové HTML do vyskakovacího okna, kde chcete, aby se váš kalendář zobrazoval.

1. Ve vašem vlastním kódu vyskakovacího okna

Přidejte atribut id  k prvku div  poskytnutému Calendly. Můžete použít libovolnou hodnotu; ujistěte se však, že je pro stránku jedinečná.

2. Na hlavní stránce editoru

Přejděte do Nastavení, klikněte na Upravit kód zápatí.

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

Pokud jste zvolili jiný název id  než calendly-container , ujistěte se, že ho po vložení kódu nahradíte.

Jak integrovat TidyCal do vyskakovacího okna

Zde je příklad:

1. TidyCal poskytl vložený kód podobný tomu níže:

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

2. Nejprve přidejte prvek Surové HTML do svého vyskakovacího okna. Poté zkopírujte pouze následující řádek ze svého kódu TidyCal a vložte ho do prvku: <div class="tidycal-embed" data-path="VAŠE_DATA_PATH"></div>  a vložte ho do svého prvku HTML.

3. Poté přejděte do nastavení stránky a klikněte na 'Upravit kód zápatí'. Musíte vložit zbytek kódu poskytnutého TidyCal <script src="https://asset-tidycal.b-cdn.net/js/embed.js"></script>  a zahrnout níže uvedený úryvek:

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