Webhookの設定方法

機能概要

「Webhook（ウェブフック）」とは、あるウェブサービスで何か（商品購入やメッセージ受信など）が起きた際に、その情報を他のシステムへリアルタイムで自動的に伝える仕組みです。例えば、オンラインショップで商品が売れたら、在庫管理システムやメール通知機能などに素早く反映させることができます。これにより、手動での更新作業が減り、業務を効率化できます。技術的に難しそうに思えますが、多くのサービスで簡単に設定できるため、プログラミングの経験がなくても活用可能です。また、Webhookを利用することで新しいシステム同士を連携させたり、自動化したフローを構築できるため、ビジネスの拡張にも役立ちます。

要するに、TalkLabelを使用する際には、こちらのWebhookを使用することでチャットツールや自社のシステムに対しての通知を行うことが可能になります。例えば回答フォームで回答が送信されたらメールやChatworkにメッセージを投げると言ったことが可能になります。

• 回答フォーム
• 友達追加時（流入経路）
• 自動応答

以下の3点におけるWebhook機能が追加されました。

設定手順

【詳細手順】

STEP1：Webhook設定画面を開く
Webhookは以下の3つの機能から設定できます：

• 回答フォーム → 「オプション」＞「回答後アクション」＞「Webhook設定」
• 自動応答 → 「アクション設定」＞「Webhook設定」
• 流入経路 → 「アクション」＞「Webhook設定」

それぞれの設定画面からWebhook設定を開きます。

回答フォームにおけるwebhook設定
自動応答、流入経路については後述

回答フォームの作成および編集画面での操作になります。

回答フォームの作成方法などは以下からご確認ください

回答フォーム

「オプション」を開いてください。「オプション」の中から「回答後アクション」の中に「Webhook設定」があります。そちらを選択してください。

STEP2：新しく登録を選択
「新しく登録」ボタンをクリックし、Webhookの設定項目を開きます。

STEP3：各項目を入力する
それぞれの項目に値を入力してください。

• 管理者名 … 任意の管理用の値として入力してください
• POST/GET … データを送信する際のMETHODの指定をしてください
• Webhook URL … 実際にデータを送信する先のURLを指定
• Wehookヘッダー … x-talklabel-header-〇〇に続く値を入れてください。headerの中に含めることができる情報になります
• 値 … ここで設定された値がwebhookのheader情報の中に入るので、セキュリティ上必要あれば入力をしてください

STEP4：動作確認（テスト送信）
Webhook受信先のサーバーで、JSONデータが正常にPOSTされているか確認してください。

"trigger": {
        "type": 1,
        "typeText": "回答フォーム：回答後",
        "detail": {
            "id": "fd5f2ca8-6243-4c38-adcc-a21bbbcadb2e"
        }
    },
    "actions": [],
    "friends": [
        {
            "id": "d91235aa-566b-4188-bb7b-afab2143ca6e",
            "name": "",
            "line_user_id": "U6c0d35c464dececbbbdbd55ee6fff253",
            "line_display_name": "ヨコギ。",
            "line_language": "ja",
            "line_status_message": "",
            "line_picture_url": "https://sprofile.line-scdn.net/0hNLhn7L1bEWNFFztEQllvHDVHEglmZkhxPHkNAicXSwN9JwQxPXRfDSQXHwQvLwI0OiRZBXQXSlZJBGYFW0HtV0InTFJ5IlA3aXRWgQ"
        }
    ]

自動応答におけるWebhook設定

自動応答におけるWebhookを使用すると、メッセージが届いたタイミングで自社のシステムに対して通知を飛ばすことが可能です。また、

自動応答における設定に関しては自動応答の作成および編集画面から行います。アクションの中にWebhook設定がありますので、そちらから設定をしてください。

ここから先は回答フォームと同様の設定になります。

自動応答におけるWebhookのJSON形式のデータ

"trigger": {
        "type": 6,
        "typeText": "自動応答",
        "detail": {
            "name": "reply api",
            "message": {
                "type": "text",
                "text": "ウェブフック"
            }
        }
    },
    "actions": [
        {
            "actionType": "ActionMessage",
            "action": {
                "sendTiming": {
                    "value": 1,
                    "text": "すぐに送信する"
                },
                "sendDelayMinute": 1,
                "messages": [
                    {
                        "type": {
                            "value": 1,
                            "text": "テキスト"
                        }
                    }
                ]
            }
        }
    ],
    "friends": [
        {
            "id": "d91235aa-566b-4188-bb7b-afab2143ca6e",
            "name": "",
            "line_user_id": "U6c0d35c464dececbbbdbd55ee6fff253",
            "line_display_name": "ヨコギ。",
            "line_language": "ja",
            "line_status_message": "",
            "line_picture_url": "https://sprofile.line-scdn.net/0hNLhn7L1bEWNFFztEQllvHDVHEglmZkhxPHkNAicXSwN9JwQxPXRfDSQXHwQvLwI0OiRZBXQXSlZJBGYFW0HtV0InTFJ5IlA3aXRWgQ"
        }
    ]

流入経路におけるWebhook設定

流入経路でWebhookを使用した場合には、友達が追加されたタイミングなどで通知を受け取ることが可能になります

流入経路の編集および作成画面にて、アクション部分から「Webhook設定」を選択してください

設定の内容は回答フォームのwebhookと同様です。

飛んでくるWebhookの形式は以下となっています。

"body": {
        "trigger": {
            "type": 5,
            "typeText": "流入経路",
            "detail": {
                "flowPath": {
                    "uuid": "fd0ef89e-a01b-41e5-ad91-dac8b626eeb7",
                    "extra_query_param": "&hoge=test&page_id=5"
                }
            }
        },
        "actions": [
            {
                "actionType": "ActionMessage",
                "action": {
                    "sendTiming": {
                        "value": 1,
                        "text": "すぐに送信する"
                    },
                    "sendDelayMinute": 1,
                    "messages": [
                        {
                            "type": {
                                "value": 1,
                                "text": "テキスト"
                            }
                        }
                    ]
                }
            }
        ],
        "friends": [
            {
                "id": "0a592da0-d916-43e6-94d2-373b72883dac",
                "name": null
            }
        ]
   }