Как интегрировать программы для планирования встреч, такие как Calendly, TidyCal или Youcanbookme

На этой странице вы узнаете, как интегрировать программное обеспечение для планирования встреч на systeme.io.

Вам понадобится:

аккаунт systeme.io
страница воронки
аккаунт Calendly, TidyCal или YouCanBook.me

Следующий метод можно применить к Calendly, TidyCal и YouCanBook.me.

Используем Calendly в качестве примера.

1. В вашем аккаунте Calendly:

Создайте и скопируйте HTML-код вашего расписания встреч:

2. В вашем аккаунту systeme.io :

Добавьте элемент "HTML" на вашу страницу

Поместите код, предоставленный вашей программой для создания календарей, в HTML-код, который вы добавили, затем сохраните код и вашу страницу.

Наконец, при предварительном просмотре страницы вы увидите календарь Calendly.

P.S. Эта функция очень полезна, поскольку позволяет добавить Facebook Pixel к вашей записи на встречу, что не всегда возможно напрямую с некоторыми программами для планирования встреч.

Как интегрировать Calendly во всплывающее окно

Выполните все предыдущие шаги и после этого:

В пользовательском коде всплывающего окна

Добавьте атрибут idк элементу div , предоставленному Calendly. Вы можете использовать любое значение, однако убедитесь, что оно уникально для данной страницы.

На главной странице редактора

Перейдите в Настройки, нажмите Редактировать footer код, и вставьте код из окна ниже:

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

Если вы выбрали имя id иное чем calendly-container, не забудьте поменять значение в коде.

Как интегрировать TidyCal во всплывающее окно

Для наглядности мы проиллюстрируем это на примере:

1. Код, подобный приведенному ниже, был предоставлен TidyCal для интеграции:

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

2. Первое, что вам нужно сделать, это добавить HTML-элемент во всплывающее окно, где вы хотите добавить календарь, а затем скопировать эту строку <div class="tidycal-embed" data-path="YOUR_DATA_PATH"></div> и вставьте его в свой HTML-элемент.

3. Затем перейдите к настройкам страницы и нажмите "Редактировать код нижнего колонтитула". Вам нужно вставить оставшуюся часть кода, предоставленного TidyCal <script src="https://asset-tidycal.b-cdn.net/js/embed.js"></script>, а также добавьте следующий фрагмент:

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