受信Webhookの高度なメッセージ形式

概要

受信Webhookでは、簡単な形式でテキストを投稿することもできますが、より高度な形式を利用することによって、カード、表、ラベル、箇条書き、画像などを含めた投稿を作成できます。高度な形式を利用する場合、WebhookのURL宛てに送信するJSONのデータには、投稿内容のテキストの他に追加のパラメーターを含める必要があります。また、高度な形式は、コメントの投稿にも対応しています。

受信Webhookを利用してカード形式のメッセージを投稿する方法

カード形式のメッセージを投稿するには、以下のJSONのキーを用いてデータのパラメーターを設定します。

アスタリスク（*）が表示されているパラメーター／JSONのキーは必須です。

JSONのキー

データの種類／形式

説明

title*	テキスト（文字列）	カードの件名（文字数の上限：100文字）
text*	HTML	カードの説明（文字数の上限： 200文字、基本的なHTMLのマークダウンに対応しています）。
thumbnail	画像のURL	画像ファイルのサイズの上限：1,000KB

例：

POST https://connect.zoho.com/webhook/v1/incoming/intranet/499400103126?zapikey=XXXXX.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.
Content-type: application/x-www-form-urlencoded
payload = {"message":"Service Request Your service request has been approved.Kindly contact the service representative to proceed further ","card":{"title":"Micheal Ross","text":"*Designation* : Senior System Administrator *Location* : California Contact Number : ************","thumbnail": "https://contacts.zoho.com/profile/image/434534534.png"}}

以上のJSONのデータによって、以下のようなメッセージが投稿されます。

スライド

スライドを利用すると、投稿に画像を追加したり、投稿内のデータを表形式で表示したりできます。

Zoho Connectの受信Webhookでは、以下のスライド形式に対応しています。

表形式
ラベル形式
箇条書き形式
画像の埋め込み

基本的なスライド用のJSONの形式は、以下のとおりです。

JSONのキー

データの種類／形式

説明／例

type*	テキスト（文字列）	表
title*	テキスト（文字列）	カードの件名（文字数の上限：100文字）
text*	テキスト（文字列）（基本的なHTMLのマークダウンに対応）	カードの説明（文字数の上限：200文字）
data*	JSON	スライドごとにJSON形式を設定
ボタン	JSON	ボタンの詳細（1件の投稿に追加できるボタンの上限：5件）

受信Webhookを利用して表形式のメッセージを投稿する方法

表形式のメッセージを投稿するには、以下の例にしたがってJSONのデータを設定します。

パラメーター

データの種類／形式

説明／例

headers*

JSONArray(20)

["Header1","Header2","Header3"]

各ヘッダーの文字数の上限は、100文字です。

rows*

JSONArray(50)

[{"Header1":"value1","Header2":"Value2","Header3":"Value3"},

{"Header1":"value1","Header2":"Value2"},

{"Header1":"value1","Header3":"Value3"}]

各値の文字数の上限は、100文字です。

例：

POST https://connect.zoho.com/webhook/v1/incoming/intranet/499400157703126?zapikey=XXXXX.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Content-type: application/x-www-form-urlencoded
{"card":{"title":"Zoho Connect Top Usage stats ","text":"Daily Usage stats of Zoho Connect, Start Collaborating for better usage ","thumbnail": "https://help.com/wp-content/uploads/2018/03/1-11.png"},"slides":[{"type":"table","title":"29/03/2020 Zoho Connect Usage Stats","text":"Top 5 Zoho Connect users on 29/03/2020","data":{"headers":["Name","Posts","views","Comments","Likes","Integrations"],"rows":[{"Name":"Mike Ross","Posts":"25","views":"30","Comments":"10","Likes":"15","Integrations":3},{"Name":"Harvey Specter","Posts":"20","views":"50","Comments":"8","Likes":"20","Integrations":0},{"Name":"Rachel","Posts":"15","views":"10","Comments":"5","Likes":"25","Integrations":5},{"Name":"Donna","Posts":"5","views":"5","Comments":"7","Likes":"0","Integrations":2},{"Name":"Joseph","Posts":"0","views":"20","Comments":"4"}]}}],"buttons":[{"label":"View full report","hint":"View full usage stats","action":{"type":"open.url","data":{"web":"https://reports.zoho.com/zohoconnect/dailyusagestats"}}}]}

以上のJSONのデータによって、以下のようなメッセージが投稿されます。

受信Webhookを利用してラベル形式のメッセージを投稿する方法

ラベル形式のメッセージを投稿するには、以下の例にしたがってJSONのデータを設定します。

POST https://connect.zoho.com/webhook/v1/incoming/intranet/499400157703126?zapikey=XXXXX.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Content-type: application/x-www-form-urlencoded
payload = { "message": "Hi Team! Take a look at the monthly financial reports attached.", "slides": [ { "type": "label", "title": "Report for FY2017", "data": [ { "Q1 - FY2017": "[Revenue Report for Q1FY2017](https://www.zoho.com/connect/)" }, { "Q2 - FY2017": "[Revenue Report for Q2FY2017](https://www.zoho.com/connect/)" }, { "Q3 - FY2017": "[Revenue Report for Q3FY2017](https://www.zoho.com/connect/)" } ] } ] }

以上のJSONのデータによって、以下のようなメッセージが投稿されます。

受信Webhookを利用して箇条書き形式のメッセージを投稿する方法

箇条書き形式のメッセージを投稿するには、以下の例にしたがってJSONのデータを設定します。

例：

POST https://connect.zoho.com/webhook/v1/incoming/intranet/499400157703126?zapikey=XXXXX.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Content-type: application/x-www-form-urlencoded
payload -

{ "message": "Hi Team! Take a look at the details about today meeting", "slides": [ { "type": "list", "title": "Key points", "text": "Key points about today's meeting", "data": [ "Time - Tracking for Tasks", "Prioritize requirements effectively", "Identify and work on a fix for bugs instantly", "Collaborate actively", "Most important - Keep it simple" ] } , { "type": "label", "title": "Meeting panelist", "data": [ { "Dean Harvey": "Director- Engineering" }, { "Josep": "Director- Marketing " }, { "Stephen": "Technology analyst" } ] } ], "buttons":[{"label":"Accept","hint":"Accept Invitation","action":{"type":"open.url","data":{"web":"https://calendar.zoho.com/zohoconnect/accept" }}},{"label":"Reject","hint":"Reject Invitation","action":{"type":"open.url","data":{"web":"https://calendar.zoho.com/zohoconnect/reject" }}}]}

以上のJSONのデータによって、以下のようなメッセージが投稿されます。

画像を埋め込んでメッセージを投稿する方法

画像を埋め込んでメッセージを投稿するには、以下の例にしたがってJSONのデータを設定します。

例：

POST https://connect.zoho.com/webhook/v1/incoming/intranet/499400157703126?zapikey=XXXXX.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Content-type: application/x-www-form-urlencoded
payload - { "message": "Report analysing the tourist visit trend (10 - 16 Sept 2019)", "slides": [ { "type": "images", "title": "Analysing the average number of days spent with the day of arrival.", "data": [ "https://www.zoho.com/cliq/help/restapi/images/WeeklyReport.png" ,"https://www.amcharts.com/wp-content/uploads/2018/11/demo_11322_none.png","https://d2mvzyuse3lwjc.cloudfront.net/doc/en/UserGuide/images/2D_B_and_W_Pie_Chart/2D_B_W_Pie_Chart_1.png?v=83139","https://www.microsoft.com/en-us/microsoft-365/blog/wp-content/uploads/sites/2/2012/06/Excel-charts-11.png","https://www.excel-easy.com/smi/examples/pivot-chart.png" ] } ] }

以上のJSONのデータによって、以下のようなメッセージが投稿されます。

受信Webhookを利用して投稿を強調表示する方法

受信Webhookから送信される投稿を、強調表示できます。強調表示するには、JSONのデータを以下の形式で設定します。

JSONのキー

データの種類／形式

説明／例

highlight*

真偽値

投稿を強調表示したい場合は、「true」を指定します。

例：

POST https://connect.zoho.com/webhook/v1/incoming/intranet/499400157703126?zapikey=XXXXX.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Content-type: application/x-www-form-urlencoded
payload -
{ "message": "Hi Team! Take a look at the monthly financial reports attached.", "slides": [ { "type": "label", "title": "Report for FY2017", "data": [ { "Q1 - FY2017": "[Revenue Report for Q1FY2017](https://www.zoho.com/connect/)" }, { "Q2 - FY2017": "[Revenue Report for Q2FY2017](https://www.zoho.com/connect/)" }, { "Q3 - FY2017": "[Revenue Report for Q3FY2017](https://www.zoho.com/connect/)" } ] } ] ,"styles":{"highlight":"true"}}

投稿は以下のとおり強調表示されます。

受信Webhookの投稿にボタンを追加する方法

受信Webhookの投稿にボタンを追加できます。ボタンを追加するには、JSONのデータを以下の形式で設定します。

JSONのキー

データの種類／形式

説明

label*	テキスト	ボタンのラベル（文字数の上限：20文字）
hint	テキスト	ボタンの説明（文字数の上限：100文字）
action*	JSON	ボタンによる動作

ボタンによる動作を設定するJSON：

JSONのキー

データの種類／形式

説明

type*	open.url	ボタンによる操作の種類
data*	JSON	ボタンによる操作用のデータ

ボタンによる操作用のデータ

JSONのキー

データの種類／形式

説明

Web*	URL	Webアプリからクリックした際に開くURL（上限：256文字）
iOS	URL	iOSからクリックした際に開くURL（上限：256文字）
Android	URL	Androidアプリからクリックした際に開くURL（上限：256文字）

例：

POST https://connect.zoho.com/webhook/v1/incoming/intranet/499400157703126?zapikey=XXXXX.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Content-type: application/x-www-form-urlencoded
payload = { "message": "Hi team, we've got a couple of tickets for an online seminar on \"Artificial Intelligence and stimulation\".Hit \"I'm in\" if you are interested", "buttons":[{"label":"I'm in","hint":"Accept Invitation","action":{"type":"open.url","data":{"web":"https://calendar.zoho.com/zohoconnect/accept" }}},{"label":"I'll pass","hint":"Reject Invitation","action":{"type":"open.url","data":{"web":"https://calendar.zoho.com/zohoconnect/reject" }}}]}

以上のJSONのデータによって、以下のようなメッセージが投稿されます。