Як інтегрувати програмне забезпечення для планування зустрічей, таке як 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.

Як інтегрувати Calendly у спливаюче вікно

Виконайте попередні кроки, але додайте елемент Raw HTML до спливаючого вікна, де ви хочете, щоб з'явився ваш календар.

1. У користувацькому коді вашого спливаючого вікна

Додайте атрибут id  до елемента div , наданого Calendly. Ви можете використовувати будь-яке значення; однак переконайтеся, що воно унікальне для сторінки.

2. На головній сторінці редактора

Перейдіть до Налаштувань, натисніть Редагувати код футера.

<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>