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

Táto stránka vám ukáže, ako integrovať softvér na plánovanie stretnutí s systeme.io.

Budete potrebovať:

• Účet na systeme.io
• Stránku v sales funneli
• Účet na Calendly, TidyCal alebo YouCanBook.me

Nasledujúca metóda funguje s Calendly, TidyCal a YouCanBook.me.

Použijeme Calendly ako príklad.

1. Na vašom účte Calendly: Vygenerujte a skopírujte embed kód pre váš kalendár/udalosť.

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

Pridajte prvok Surový HTML na svoju stránku.

Vložte kód poskytnutý vaším softvérom kalendára do práve pridaného prvku 'Surový HTML', potom uložte stránku.

Keď si stránku náhľadnete, uvidíte kalendár Calendly.

Ako integrovať Calendly do popupu

Postupujte podľa predchádzajúcich krokov, ale pridajte prvok Surový HTML do popupu, kde chcete, aby sa kalendár zobrazil.

1. Vo vašom vlastnom kóde popupu

Pridajte atribút id   k elementu div  , ktorý poskytol Calendly. Môžete použiť akúkoľvek hodnotu, ale uistite sa, že je jedinečná pre stránku.

2. Na hlavnej stránke editoru

Prejdite do Nastavenia, kliknite na Upraviť kód päty.

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

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

Ako integrovať TidyCal do popupu

Tu je príklad:

1. TidyCal poskytol embed kód podobný tomuto:

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

2. Najprv pridajte prvok Surový HTML do popupu. Potom skopírujte iba tento riadok z vášho TidyCal kódu a vložte ho do prvku: <div class="tidycal-embed" data-path="YOUR_DATA_PATH"></div>  

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

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