メインコンテンツへスキップ
レッスン一覧に戻る

atom.cs-automator.intercom-webhook-setup

IntercomのWebhookを設定する

IntercomのWebhookを設定する Intercom(=カスタマーサポート向けのチャットツール)を使っていると、「新しいお問い合わせが来たら自動で通知したい」「チャットが終わったらデータを別のツールに送りた...

configure-intercom-webhookconfigure-intercom-webhookツールを自分の環境に合わせて設定できます。
想定時間未設定公開状態: draft
学習メモ

成果物成果物このレッスンが終わったとき、あなたの手元に残る具体的な成果物です(例: 公開済みの Web ページ、動作するフォームなど)。

種類: markdown_doc検証: basic_manual_check_v1

証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。

screenshoturl

メディアメディアレッスン内に出てくる図や動画のスロットです。実際の画面やイメージで理解を補助します。

diagramscreen_capture

レッスン本文

IntercomのWebhookを設定する

Intercom(=カスタマーサポート向けのチャットツール)を使っていると、「新しいお問い合わせが来たら自動で通知したい」「チャットが終わったらデータを別のツールに送りたい」と思うことがありませんか?

これを実現するのが Webhook(ウェブフック) です。Webhookとは、「何かが起きたとき、あらかじめ指定した場所に自動でお知らせを届けてくれる仕組み」のこと。郵便の転送届のようなイメージです。引っ越し先の住所を登録しておけば、届いた手紙が新住所に自動転送されますよね。Webhookも同じで、「Intercomで新しい会話が始まったら、このURLに通知を送って」と設定するだけで、自動連携が実現します。

このレッスンでは、Intercomの管理画面からWebhookを1つ設定し、通知が届くことを確認するところまでを15分で完了します。

Webhook設定の全体フロー

前提を確認する

  • Intercomのアカウントがあり、管理画面にログインできること
  • Webhookの受信先URL(テスト用に無料で使えるサービスを後ほど紹介します)

Webhookの受信先を用意する

まずはWebhookの「届け先」を用意しましょう。テスト目的なら、webhook.siteRequestBin のような無料ツールが便利です。これらは「届いた通知の中身をブラウザで確認できる仮のURL」を発行してくれるサービスです。

手順

  1. ブラウザで webhook.site にアクセスする
  2. 画面に表示される「Your unique URL」をコピーしておく(このURLがWebhookの届け先になります)

AIに聞いてみよう: 「webhook.siteの使い方を日本語で簡単に教えて。テスト用URLの取得方法だけでいい」とChatGPTやClaudeに聞くと、スクリーンショット付きの手順を教えてくれます。

Intercomの管理画面でWebhookを設定する

Intercomの管理画面を開いて、Webhookを登録していきましょう。

手順

  1. Intercomにログインする
  2. 左下の歯車アイコン(Settings)をクリックする
  3. 左メニューから 「Integrations」→「Developer Hub」 を選ぶ
  4. 自分のアプリ(なければ「New app」で作成)を選び、「Webhooks」 タブをクリックする
  5. 「Your request endpoint URL」 欄に、先ほどコピーしたURLを貼り付ける
  6. 「Webhook topics」 で通知を受け取りたいイベントを選ぶ。最初は 「conversation.user.created」(=ユーザーが新しい会話を開始したとき)を1つだけ選ぶのがおすすめです
  7. 「Save」 をクリックする

Intercom Webhook設定画面

良い例と悪い例

良い例:

  • まず1つのイベント(conversation.user.created)だけ選んで動作確認する
  • テスト用URLで確認してから、本番のURLに切り替える

悪い例:

  • 最初から全てのイベントにチェックを入れてしまう(通知が大量に届いて混乱します)
  • いきなり本番の連携先URLを入れてテストする(予期しないデータが流れ込むリスクがあります)

動作を確認する

設定が正しいか、実際にテストしてみましょう。

手順

  1. Intercomのテスト環境(またはテスト用の会話)で、新しいメッセージを送信する
  2. webhook.site の画面に戻り、通知が届いているか確認する
  3. 届いたデータ(JSON形式のテキスト)が表示されていれば成功です

AIに聞いてみよう: 届いたJSONの中身が分からないときは、そのままコピーしてChatGPTやClaudeに貼り付け、「このIntercom Webhookのデータの内容を日本語で説明して」と聞いてみてください。各項目が何を意味するか、わかりやすく教えてくれます。

つまずいたときの対処法

通知が届かない場合

  • URLが正しくコピーできているか確認する(末尾にスペースが入っていないか等)
  • イベントの種類が合っているか確認する(conversation.user.created を選んだのに、管理者から会話を始めた場合は発火しません)
  • Intercomの「Webhooks」タブにあるログを確認する。送信エラーがあれば赤く表示されます

JSONって何?

Webhookで届くデータは「JSON(ジェイソン)」という形式です。これはデータの書き方のルールのことで、人間にもコンピュータにも読める「名前と値のペア」の一覧表です。例えば:

{
  "type": "conversation.user.created",
  "user": {
    "name": "田中太郎"
  }
}

これは「conversation.user.created というイベントが起きて、ユーザーの名前は田中太郎さんです」という意味です。

完了を確認する

以下の2点が確認できたら、このレッスンは完了です。

  • Intercomの管理画面でWebhookのURLとイベントが設定されている
  • テスト送信して、受信先(webhook.site等)にデータが届いた

おめでとうございます!これでIntercomのWebhookが動く状態になりました。次のステップでは、この通知を使って実際の業務フロー(Slackへの自動通知、スプレッドシートへの記録など)と連携する方法を学びます。

成果物成果物このレッスンが終わったとき、あなたの手元に残る具体的な成果物です(例: 公開済みの Web ページ、動作するフォームなど)。

種類: markdown_doc

検証: basic_manual_check_v1

証跡とメディア

証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。

screenshoturl

メディア

diagramscreen_capture
前提 atom

必須

なし

あると楽

なし

学習完了