Jak zintegrować oprogramowanie do planowania spotkań, takie jak Calendly, TidyCal lub Youcanbookme

Ta strona pokazuje, jak zintegrować oprogramowanie do planowania spotkań z systeme.io.

Czego będziesz potrzebować:

• Konta systeme.io
• Strony lejka sprzedażowego
• Konta Calendly, TidyCal lub YouCanBook.me

Poniższa metoda działa z Calendly, TidyCal i YouCanBook.me.

Użyjemy Calendly jako przykładu.

1. Na koncie Calendly: Wygeneruj i skopiuj kod osadzania dla kalendarza/wydarzenia.

2. Na koncie systeme.io:

Dodaj element Surowy HTML do strony.

Wklej kod dostarczony przez oprogramowanie kalendarza do elementu 'Surowy HTML', który właśnie dodałeś, następnie zapisz stronę.

Na koniec, gdy wyświetlisz podgląd strony, zobaczysz kalendarz Calendly.

Jak zintegrować Calendly w popupie

Postępuj zgodnie z poprzednimi krokami, ale dodaj element Surowy HTML do popupu, w którym chcesz, aby pojawił się kalendarz.

1. W niestandardowym kodzie popupu

Dodaj atrybut id  do elementu div  dostarczonego przez Calendly. Możesz użyć dowolnej wartości; upewnij się jednak, że jest unikalna dla strony.

2. Na głównej stronie edytora

Przejdź do Ustawienia, kliknij Edytuj kod stopki.

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

Jeśli wybrałeś nazwę id  inną niż calendly-container , upewnij się, że ją zastąpisz po wklejeniu kodu.

Jak zintegrować TidyCal w popupie

Oto przykład:

1. TidyCal dostarczył kod osadzania podobny do poniższego:

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

2. Najpierw dodaj element Surowy HTML do popupu. Następnie skopiuj tylko następującą linię z kodu TidyCal i wklej ją do elementu: <div class="tidycal-embed" data-path="TWOJA_SCIEZKA_DANYCH"></div>  i wklej do elementu HTML.

3. Następnie przejdź do ustawień strony i kliknij 'Edytuj kod stopki'. Musisz wkleić resztę kodu dostarczonego przez TidyCal <script src="https://asset-tidycal.b-cdn.net/js/embed.js"></script>  i uwzględnić poniższy fragment:

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