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カレンダーが表示されます。



注：予約スケジュールに Facebookピクセル を追加できるのでこの機能はとても便利です。Facebookピクセルを直接組み込めない予約スケジュールソフトウェアも一部あります。

Calendlyをポップアップに統合する方法

これまでのステップをすべて行った後、以下の手順を行なってください。

ポップアップのカスタムコードに

Calendlyが提供する div  要素に id  属性を追加します。どのような値でも構いませんが、そのページで一意であることを確認してください。



メインエディターページで

「 ページ設定 」に移動し、「 フッターコードの編集 」をクリックし、以下のコードを貼り付けます。

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

コードを貼り付けた後、 calendly-container  以外の id  名を選択した場合は、それを必ず置き換えてください。

TidyCalをポップアップに統合する方法

分かりやすくするために、例を挙げて説明します：

TidyCalによって提供された統合用のコードは以下のようなものになります：

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

最初に行うべきことは、カレンダーを追加したいポップアップにHTML要素を追加することです。その後、次の行 <div class="tidycal-embed" data-path="YOUR_DATA_PATH"></div>  をコピーして、HTML要素に貼り付けてください。



次に、ページ設定に移動して「フッターコードを編集」をクリックします。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>

更新日 25/05/2025