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

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

概要

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

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

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

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


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

例：

  1. POST https://connect.zoho.com/webhook/v1/incoming/intranet/499400103126?zapikey=XXXXX.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.   

    Content-type: application/x-www-form-urlencoded 

    payload = {"message":"<b>Service Request</b><br><br> Your service request has been approved.Kindly contact the service representative to proceed further ","card":{"title":"Micheal Ross","text":"*Designation* : Senior System Administrator <br> *Location* : California <br><b>Contact Number<b> : ************","thumbnail": "https://contacts.zoho.com/profile/image/434534534.png"}}

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

      

スライド

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

Zoho Connectの受信Webhookでは、以下のスライド形式に対応しています。
  1. 表形式
  2. ラベル形式
  3. 箇条書き形式
  4. 画像の埋め込み
基本的なスライド用の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文字です。

例：

  1. 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のデータを設定します。

  1. 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のデータを設定します。 

例： 

  1. 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のデータを設定します。

例：

  1. 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」を指定します。


例：

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

ボタンによる操作の種類
data*
JSON

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


ボタンによる操作用のデータ
JSONのキー
 データの種類／形式
   説明

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


例：

  1. 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のデータによって、以下のようなメッセージが投稿されます。