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をポップアップに統合する方法

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

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