CalendlyをShopify Flowに連携する方法

Calendlyでは、設定されたイベントタイプを通じて会議が予約またはキャンセルされた際に、Webhookを送信します。「Workflow Webhooks」は、その呼び出しをShopify Flowのトリガーに変換するため、ストア側でそれに応じて処理を行うことができます。具体的には、お客様へのタグ付け、注文メモの追加、社内メールの送信、メタフィールドの更新など、Shopify Flowで可能なあらゆる操作を実行できます。

このガイドでは、Calendlyが送信し、Workflow Webhooksが受信・検証し、Shopify Flowが処理を行うという一連の流れをすべて設定します。すべてのリクエストにおいてCalendlyのHMAC署名が検証されるため、Calendly以外からはワークフローを開始することはできません。

どのようなものを作れるか

  • スタイリングや相談の電話予約をしたお客様にタグを付けておくと、後でそのお客様をセグメント分けできるようになります。
  • 通話が行われる前に、打ち合わせの時間を記載したお客様メモを追加してください。
  • ご予約が入りましたら、担当スタッフに、お客様のShopifyでの注文履歴をメールでお送りください。

送信する代表的なイベント:invitee.created(予約済み)、invitee.canceled。

始める前に

  • Workflow Webhooks Shopifyストアにインストールされています。
  • Shopify Flow インストール済みです。これは、ShopifyのApp Storeから無料で入手できます。
  • Webhookを作成する権限を持つCalendlyのアカウント。

ステップ 1 - Workflow Webhooks で Webhook を作成します

  1. Workflow Webhooks を開き**、[Webhook] → [Create Webhook]** の順に選択し、Shopify Flow で識別しやすい名前(例:Calendly events)を付けてください。
  2. **「認証」**で、「**HMAC」**を選択してください。
  3. 「署名プロバイダー」で「Calendly」を選択してください。アプリがヘッダー、アルゴリズム、署名付きペイロード、リプレイウィンドウを自動的に入力してくれます。これ以外に設定する必要はありません。
  4. 「シークレット」の欄はひとまず空のままにして、「保存」をクリックしてください。ページに表示されているWebhookのURLをコピーしてください。

その他の認証モードについては、認証 を、Shopify Flow に送信するフィールドの選択については、ペイロードのマッピングとShopify Flow変数 をご参照ください。

ステップ 2 - Calendly にエンドポイントを追加します

コピーしたURLを使用して、Calendly APIまたは開発者ポータルからWebhookのサブスクリプションを作成してください。署名キーは、サブスクリプションの作成時に一度だけ返されます。

Calendlyの署名用シークレットを確認する方法

Webhookサブスクリプションを作成した際に返された署名キーです。

Webhookの署名に関するCalendlyの公式ドキュメント()には、お客様のアカウントに適用される正確な文言とスクリーンショットが掲載されています。

そのシークレットを、Workflow Webhooks の Webhook の**「Secret」**フィールドに貼り付けて、保存してください。それ以降、Calendly からのすべての配信は、Shopify Flow に届く前に検証されるようになります。

これで何が確認されるのか

何 値
署名ヘッダー Calendly-Webhook-Signature
署名の位置 そのヘッダーのv1値には、コンマで区切られたkey=valueのペアが含まれています
何が署名されたのでしょうか {timestamp}.{body}
署名 HMAC-SHA256、16進数エンコード
タイムスタンプ 署名ヘッダーのt値(Unix秒単位)
リプレイ防止機能 署名付きタイムスタンプが現在時刻から6分以上離れているリクエストは拒否されます
その秘密 プレーンテキストとして使用します。送信者が表示しているとおりに、そのまま貼り付けてください。

署名付きペイロードにおいて、{body} はバイト単位でリクエスト本文の生のデータであり、{timestamp} は上記のタイムスタンプです。

これらのいずれかの条件を満たさないリクエストは、401のステータスで拒否され、沿革とトラブルシューティングに記録され、ワークフローは開始されません。

ステップ 3 - 「Shopify Flow」ワークフローを作成する

  1. Shopify Flow でワークフローを作成し、「Workflow Webhooks」トリガーを選択してください。
  2. **「イベントを記録」**をクリックし、Calendlyからテストイベントを送信するか(またはWorkflow Webhooksの「**テストを送信」**を使用してください)、Shopify Flowがデータの構造を学習できるようにしてください。
  3. 所有しているすべてのWebhookは同じFlowトリガーを起動するため、このワークフローをCalendlyのみに限定するには、Webhook IDを最初の条件として追加してください。IDはWebhookページに表示されています。
  4. アクションを追加してください。お客様へのタグ付け、メモの追加、社内メールの送信、メタフィールドの更新などです。
Shopify Flow
Shopify Flowで「トリガーを選択」を選択し、「Workflow Webhooks」を開き、「Webhookトリガー」を選択してください。
Shopify Flowの条件:Webhook IDが、あるWebhookのIDと一致する場合
すべてのワークフローの最初のステップは、Webhook ID に基づく条件設定です。これにより、この Webhook に対してのみワークフローが実行されるようになります。
完成したワークフロー:Webhookトリガー、Webhook IDに基づく条件、そして「True」分岐で社内メールを送信します。
完成したワークフロー:トリガー、Webhook ID に基づく条件、そして「True」分岐でのアクションという流れです。

ステップ4 - エンドツーエンドでテストする

Calendlyで実際のイベントをトリガーしてください。「**Workflow Webhooks」→「履歴」**に、ステータスが「**Success」**の呼び出しが表示されるはずです。署名が正しくなかった場合は、その理由が記載された失敗のエントリが表示されます。また、署名付きWebhookの検証 には、どのステップで失敗したかを正確に示す署名テスターの説明が記載されています。

「History」に、リクエストヘッダー、ペイロード、ステータス、所要時間、および識別子を含む1つの呼び出しが開かれました
「History」で配信されたイベント:ステータスが「Success」の場合、Shopify Flowがそれを受け入れたことを意味します。
署名が一致しません▾

順に、シークレット(最も一般的な原因として、余分なスペースや、異なる環境のキーが使用されている場合)、送信者が別のエンドポイントのシークレットを使用しているかどうか、そしてCalendlyとアプリの間でボディが書き換えられているかどうかです。署名は生のバイト列を対象としているため、JSONのフォーマットを変更するプロキシによって署名が破損してしまいます。 Webhookページの署名テスターには、署名された正確なテキストが表示されます。

どのリクエストでも401エラーが表示されます▾

Webhookの認証が**「HMAC」**に設定され、プロバイダーとして「Calendly」が選択されていること、シークレットが入力されていること、そしてCalendlyがアプリに表示されているURL(末尾のコードを含めて)に正確にPOSTしていることをご確認ください。

「履歴」には何も表示されません▾

リクエストは届きませんでした。Calendly内のURLを再度確認し、Calendly自身の配信ログで受信した応答内容をご確認ください。「404」というエラーは、Webhookの設定が間違っているか削除されていることを意味します。「429」というエラーは、ご利用のプランの呼び出し制限を超えていることを意味します。詳細は プランと利用方法 をご覧ください。

ワークフローが誤ったイベントに対して実行されてしまいます▾

ストア内のすべてのWebhookは、同じShopify Flowトリガーを起動します。ワークフローの最初のステップとして、WebhookIDに基づく条件を追加するか、Calendlyから送信するイベントを絞り込んでください。

リクエストが「タイムスタンプが許容範囲外」という理由で失敗します▾

Calendlyはタイムスタンプに署名を行いますが、アプリは6分以上経過したものはすべて拒否します。これは通常、送信側の時計の問題か、Calendlyが元のタイムスタンプのままかなり後になって再送信したケースです。同じ元のリクエストからの再送信は通過できませんので、Calendlyに新しいイベントを送信するよう依頼してください。

関連情報