Calendly, TidyCal veya Youcanbookme gibi randevu planlama yazılımları nasıl entegre edilir?

Bu sayfa, randevu planlama yazılımını systeme.io ile nasıl entegre edeceğinizi gösterir.

İhtiyacınız olanlar:

• Bir systeme.io hesabı
• Bir satış hunisi sayfası
• Bir Calendly, TidyCal veya YouCanBook.me hesabı

Aşağıdaki yöntem Calendly, TidyCal ve YouCanBook.me ile çalışır.

Örnek olarak Calendly kullanılacaktır.

1. Calendly hesabınızda: Takviminiz veya etkinliğiniz için gömme kodunu oluşturun ve kopyalayın.

2. systeme.io hesabınızda:

Sayfanıza Ham HTML öğesini ekleyin.

Takvim yazılımınız tarafından sağlanan kodu, az önce eklediğiniz Ham HTML öğesinin içine yapıştırın ve ardından sayfayı kaydedin.

Son olarak sayfanızı önizlediğinizde Calendly takvimini göreceksiniz.

Calendly bir açılır pencereye nasıl entegre edilir

Önceki adımları izleyin, ancak takviminizin görünmesini istediğiniz açılır pencereye bir Ham HTML öğesi ekleyin.

1. Açılır pencerenin özel kod bölümünde

Calendly tarafından sağlanan div  öğesine bir id  niteliği ekleyin. Herhangi bir değer kullanabilirsiniz; ancak sayfa içinde benzersiz olduğundan emin olun.

2. Ana düzenleyici sayfasında

Ayarlar bölümüne gidin ve Altbilgi kodunu düzenle seçeneğine tıklayın.

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

Eğer calendly-container  dışında bir id  adı seçtiyseniz, kodu yapıştırdıktan sonra bunu değiştirdiğinizden emin olun.

TidyCal bir açılır pencereye nasıl entegre edilir

İşte bir örnek:

1. TidyCal aşağıdakine benzer bir gömme kodu sağlar:

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

2. Öncelikle açılır pencerenize bir Ham HTML öğesi ekleyin. Ardından TidyCal kodunuzdan yalnızca şu satırı kopyalayın ve HTML öğesine yapıştırın: <div class="tidycal-embed" data-path="YOUR_DATA_PATH"></div>

3. Daha sonra sayfa ayarlarına gidin ve Altbilgi kodunu düzenle seçeneğine tıklayın. TidyCal tarafından sağlanan kodun geri kalanını <script src="https://asset-tidycal.b-cdn.net/js/embed.js"></script>  yapıştırın ve aşağıdaki kod parçasını ekleyin:

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