{"id":18001,"date":"2017-08-14T17:05:39","date_gmt":"2017-08-14T17:05:39","guid":{"rendered":"http:\/\/developer.kore.ai\/v9-1\/?post_type=docs&#038;p=11802"},"modified":"2021-11-25T08:46:45","modified_gmt":"2021-11-25T08:46:45","slug":"message-templates","status":"publish","type":"post","link":"https:\/\/developer.kore.ai\/v9-1\/docs\/bots\/sdks\/message-templates\/","title":{"rendered":"Message Formatting and Templates"},"content":{"rendered":"<section class=\"l-section wpb_row height_auto\"><div class=\"l-section-h i-cf\"><div class=\"g-cols vc_row type_default valign_top\"><div class=\"vc_col-sm-12 wpb_column vc_column_container\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<p>Kore.ai SDK allows you to override the default message formatting using markdown and apply templates to display custom formatted bot messages to users.<br \/>\nThis topic describes the following:<\/p>\n<ul>\n<li>Supported template types<\/li>\n<li>Template implementation details<\/li>\n<li>The default formatting for the Web SDK<\/li>\n<li>Supported markdown to customize messages<\/li>\n<\/ul>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div>\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h2><span class=\"ez-toc-section\" id=\"Template_Types\">Template Types<\/span><\/h2>\n<p>The SDKs support the following message template types. Depending on the SDK, the JavaScript implementation may vary.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Button_Template\">Button Template<\/span><\/h3>\n<p>Shows one of the following button choices for the end user for each option:<\/p>\n<ul>\n<li><strong>URL button:<\/strong>\u00a0Opens a webpage in the application browser.<\/li>\n<li><strong>Postback button:<\/strong>\u00a0Sends the payload defined by the developer to the Bots Platform to initiate action, for example, opens a chat window to a live agent.<\/li>\n<\/ul>\n<p><strong>Required Parameters<\/strong><\/p>\n<ul>\n<li><strong>text<\/strong>: Enter the text consisting of up to 640 characters<\/li>\n<li><strong>buttons<\/strong>: Enter a maximum of 3 array items<\/li>\n<\/ul>\n<p><strong>Example<\/strong><\/p>\n<pre class=\"lang:default decode:true \">var message={\r\n  \"type\": \"template\",\r\n  \"payload\":\r\n    {\r\n     \"template_type\": \"button\",\r\n     \"text\": \"What do you want to do next?\",\r\n     \"buttons\":\r\n       [{\r\n         \"type\": \"web_url\",\r\n         \"title\": \"Show Website\",\r\n         \"url\": \"https:\/\/petersapparel.parseapp.com\"\r\n        },\r\n        {\r\n         \"type\": \"postback\",\r\n         \"title\": \"Start Chatting\",\r\n         \"payload\": \"USER_DEFINED_PAYLOAD\"\r\n        }\r\n       ]\r\n    }\r\n  }\r\nprint(JSON.stringify(message));<\/pre>\n<h3><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/Button-Template-Web.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-13533 size-full\" src=\"\/wp-content\/uploads\/sites\/22\/Button-Template-Web.png\" alt=\"\" width=\"395\" height=\"631\" \/><\/a><\/h3>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div>\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h3><span class=\"ez-toc-section\" id=\"Quick_Replies_Template_Text\">Quick Replies Template &#8211; Text<\/span><\/h3>\n<p>Shows a formatted text message to the user with clickable text choices.<br \/>\n<strong>Required Parameters<\/strong><\/p>\n<ul>\n<li><strong>text<\/strong>: Enter text consisting of up to 640 characters<\/li>\n<li><strong>title<\/strong>: Enter a title for each option<\/li>\n<\/ul>\n<p><strong>Example<\/strong><\/p>\n<pre class=\"\">var message={\r\n  \"type\":\"template\",\r\n  \"payload\":\r\n    {\r\n     \"template_type\":\"quick_replies\",\r\n     \"text\":\"Pick a color:\",\r\n     \"quick_replies\":\r\n       [\r\n        {\r\n         \"content_type\":\"text\",\r\n         \"title\":\"Red\",\r\n         \"payload\":\"DEVELOPER_DEFINED_PAYLOAD_FOR_PICKING_RED\"\r\n        },\r\n        {\r\n         \"content_type\":\"text\",\r\n         \"title\":\"Green\",\r\n         \"payload\":\"DEVELOPER_DEFINED_PAYLOAD_FOR_PICKING_GREEN\"\r\n        }\r\n       ]\r\n    }\r\n  }\r\nprint(JSON.stringify(message));<\/pre>\n<h3><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/Quick-reply-text.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-13534\" src=\"\/wp-content\/uploads\/sites\/22\/Quick-reply-text.png\" alt=\"\" width=\"384\" height=\"590\" \/><\/a><\/h3>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div>\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h3><span class=\"ez-toc-section\" id=\"Quick_Replies_Template_Text_and_Image\">Quick Replies Template &#8211; Text and Image<\/span><\/h3>\n<p>Shows formatted text to the user with clickable text and images as choices.<br \/>\n<strong>Required Parameters<\/strong><\/p>\n<ul>\n<li><strong>text<\/strong>: Enter text consisting of up to 640 characters<\/li>\n<li><strong>title<\/strong>: Enter a title for each option<\/li>\n<\/ul>\n<p><strong>Example<\/strong><\/p>\n<pre class=\"\">var message =\r\n {\r\n  \"type\":\"template\",\r\n  \"payload\":\r\n    {\r\n     \"text\":\"Pick a color:\",\r\n     \"template_type\":\"quick_replies\",\r\n     \"quick_replies\":\r\n       [\r\n        {\r\n         \"content_type\":\"text\",\r\n         \"title\":\"Red\",\r\n         \"payload\":\"DEVELOPER_DEFINED_PAYLOAD_FOR_PICKING_RED\",\r\n         \"image_url\": \"<a ref=\"magnificPopup\" href=\"https:\/\/cdn3.iconfinder.com\/data\/icons\/spring-2-1\/30\/Tree-128.png\">https:\/\/cdn1.iconfinder.com\/data\/icons\/brown-monsters\/1024\/Brown_Monsters_16-01.png<\/a>\",\r\n        },\r\n        {\r\n         \"content_type\":\"text\",\r\n         \"title\":\"Green\",\r\n         \"payload\":\"DEVELOPER_DEFINED_PAYLOAD_FOR_PICKING_GREEN\",\r\n         \"image_url\": \"https:\/\/cdn3.iconfinder.com\/data\/icons\/spring-2-1\/30\/Tree-128.png\",\r\n        }\r\n       ]\r\n    }\r\n  }\r\nprint(JSON.stringify(message));<\/pre>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div>\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h3><span class=\"ez-toc-section\" id=\"List_Template\">List Template<\/span><\/h3>\n<p>Shows a formatted list of choices to the user as clickable text and images as choices. List template has the following limitations:<\/p>\n<ul>\n<li>Maximum of four elements<\/li>\n<li>One optional button per element<\/li>\n<li>One optional global button<\/li>\n<\/ul>\n<p><strong>Required Parameters<\/strong><\/p>\n<ul>\n<li>AlwaysShowGlobalButtons: set to true if the global button needs to be displayed always, by default it is set to false ensuring that the global buttons are displayed only when the number of entries in the list exceeds 3,<\/li>\n<li>title: Enter a title for each option<\/li>\n<li>elements<\/li>\n<\/ul>\n<p><strong>Example<\/strong><\/p>\n<pre>var message =\r\n{\r\n        \"type\": \"template\",\r\n        \"AlwaysShowGlobalButtons\":false,\r\n        \"payload\": {\r\n            \"template_type\": \"list\",\r\n            \"elements\": [\r\n                {\r\n                    \"title\": \"Classic T-Shirt Collection\",\r\n                    \"image_url\": \"https:\/\/peterssendreceiveapp.ngrok.io\/img\/collection.png\",\r\n                    \"subtitle\": \"See all our colors\",\r\n                    \"default_action\": {\r\n                        \"type\": \"web_url\",\r\n                        \"url\": \"https:\/\/peterssendreceiveapp.ngrok.io\/shop_collection\",\r\n                        \"messenger_extensions\": true,\r\n                        \"webview_height_ratio\": \"tall\",\r\n                        \"fallback_url\": \"https:\/\/peterssendreceiveapp.ngrok.io\/\"\r\n                    },\r\n                    \"buttons\": [\r\n                        {\r\n                            \"title\": \"View\",\r\n                            \"type\": \"web_url\",\r\n                            \"url\": \"https:\/\/peterssendreceiveapp.ngrok.io\/collection\",\r\n                            \"messenger_extensions\": true,\r\n                            \"webview_height_ratio\": \"tall\",\r\n                            \"fallback_url\": \"https:\/\/peterssendreceiveapp.ngrok.io\/\"\r\n                        }\r\n                    ]\r\n                },\r\n                {\r\n                    \"title\": \"Classic White T-Shirt\",\r\n                    \"image_url\": \"https:\/\/peterssendreceiveapp.ngrok.io\/img\/white-t-shirt.png\",\r\n                    \"subtitle\": \"100% Cotton, 200% Comfortable\",\r\n                    \"default_action\": {\r\n                        \"type\": \"web_url\",\r\n                        \"url\": \"https:\/\/peterssendreceiveapp.ngrok.io\/view?item=100\",\r\n                        \"messenger_extensions\": true,\r\n                        \"webview_height_ratio\": \"tall\",\r\n                        \"fallback_url\": \"https:\/\/peterssendreceiveapp.ngrok.io\/\"\r\n                    },\r\n                    \"buttons\": [\r\n                        {\r\n                            \"title\": \"Shop Now\",\r\n                            \"type\": \"web_url\",\r\n                            \"url\": \"https:\/\/peterssendreceiveapp.ngrok.io\/shop?item=100\",\r\n                            \"messenger_extensions\": true,\r\n                            \"webview_height_ratio\": \"tall\",\r\n                            \"fallback_url\": \"https:\/\/peterssendreceiveapp.ngrok.io\/\"\r\n                        }\r\n                    ]\r\n                },\r\n                {\r\n                    \"title\": \"Classic Blue T-Shirt\",\r\n                    \"image_url\": \"https:\/\/peterssendreceiveapp.ngrok.io\/img\/blue-t-shirt.png\",\r\n                    \"subtitle\": \"100% Cotton, 200% Comfortable\",\r\n                    \"default_action\": {\r\n                        \"type\": \"web_url\",\r\n                        \"url\": \"https:\/\/peterssendreceiveapp.ngrok.io\/view?item=101\",\r\n                        \"messenger_extensions\": true,\r\n                        \"webview_height_ratio\": \"tall\",\r\n                        \"fallback_url\": \"https:\/\/peterssendreceiveapp.ngrok.io\/\"\r\n                    },\r\n                    \"buttons\": [\r\n                        {\r\n                            \"title\": \"Shop Now\",\r\n                            \"type\": \"web_url\",\r\n                            \"url\": \"https:\/\/peterssendreceiveapp.ngrok.io\/shop?item=101\",\r\n                            \"messenger_extensions\": true,\r\n                            \"webview_height_ratio\": \"tall\",\r\n                            \"fallback_url\": \"https:\/\/peterssendreceiveapp.ngrok.io\/\"\r\n                        }\r\n                    ]\r\n                },\r\n                {\r\n                    \"title\": \"Classic Black T-Shirt\",\r\n                    \"image_url\": \"https:\/\/peterssendreceiveapp.ngrok.io\/img\/black-t-shirt.png\",\r\n                    \"subtitle\": \"100% Cotton, 200% Comfortable\",\r\n                    \"default_action\": {\r\n                        \"type\": \"web_url\",\r\n                        \"url\": \"https:\/\/peterssendreceiveapp.ngrok.io\/view?item=102\",\r\n                        \"messenger_extensions\": true,\r\n                        \"webview_height_ratio\": \"tall\",\r\n                        \"fallback_url\": \"https:\/\/peterssendreceiveapp.ngrok.io\/\"\r\n                    },\r\n                    \"buttons\": [\r\n                        {\r\n                            \"title\": \"Shop Now\",\r\n                            \"type\": \"web_url\",\r\n                            \"url\": \"https:\/\/peterssendreceiveapp.ngrok.io\/shop?item=102\",\r\n                            \"messenger_extensions\": true,\r\n                            \"webview_height_ratio\": \"tall\",\r\n                            \"fallback_url\": \"https:\/\/peterssendreceiveapp.ngrok.io\/\"\r\n                        }\r\n                    ]\r\n                }\r\n            ],\r\n             \"buttons\": [\r\n                {\r\n                    \"title\": \"View More\",\r\n                    \"type\": \"postback\",\r\n                    \"payload\": \"payload\"\r\n                }\r\n            ]\r\n        }\r\n}\r\nprint(JSON.stringify(message));<\/pre>\n<h3><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/List-template.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-13536\" src=\"\/wp-content\/uploads\/sites\/22\/List-template.png\" alt=\"\" width=\"380\" height=\"589\" \/><\/a><\/h3>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div>\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h3><span class=\"ez-toc-section\" id=\"Error_Template\">Error Template<\/span><\/h3>\n<p>Shows formatted messages to an end user for validation, errors and warning messages.<br \/>\n<strong>Example<\/strong><\/p>\n<pre class=\"lang:default decode:true\">var message={\r\n   \"type\":\"error\",\r\n   \"payload\":{\r\n      \"color\":\"#F35A00\",\r\n      \"text\":\"sample for error template\"\r\n   }\r\n}\r\nprint(JSON.stringify(message));<\/pre>\n<h3><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/error-templat-web.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-13519 size-full\" src=\"\/wp-content\/uploads\/sites\/22\/error-templat-web.png\" alt=\"\" width=\"395\" height=\"629\" \/><\/a><\/h3>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div>\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h3><span class=\"ez-toc-section\" id=\"Attachment_Template\"><strong>Attachment Template<\/strong><\/span><\/h3>\n<p>Provides support to display images, render videos, links and play audio files to a user based on specified URL links.<\/p>\n<p>The following formats are supported for attachment template:<\/p>\n<ul>\n<li>audio = [&#8216;m4a&#8217;, &#8216;amr&#8217;, &#8216;wav&#8217;, &#8216;aac&#8217;, &#8216;mp3&#8217;],<\/li>\n<li>video = [&#8216;mp4&#8217;, &#8216;mov&#8217;, &#8216;3gp&#8217;, &#8216;flv&#8217;],<\/li>\n<li>image = [&#8216;png&#8217;, &#8216;jpg&#8217;, &#8216;jpeg&#8217;];<\/li>\n<\/ul>\n<p><b>Note<\/b>: To display images in the attachment template use the &#8220;url&#8221; of the image.<\/p>\n<p><strong>Examples<\/strong><\/p>\n<p><strong>Audio Template:<\/strong><\/p>\n<pre class=\"lang:default decode:true\">var message ={\r\n        \"type\": \"message\",\r\n         \"payload\": {\r\n          \"text\": \"\",\r\n          \"audioUrl\": \"https:\/\/file-examples-com.github.io\/uploads\/2017\/11\/file_example_MP3_700KB.mp3\"\r\n      }\r\n}\r\nprint(JSON.stringify(message));<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v9-1\/wp-content\/uploads\/sites\/22\/20211125053705\/audio_template-264x300.jpg\" alt=\"\" width=\"380\" height=\"589\" class=\"alignnone size-medium wp-image-31979\" \/><\/p>\n<p><strong>Image Template<\/strong><\/p>\n<p>To view image, use the following JS script:<\/p>\n<pre class=\"lang:default decode:true\">var message = {\r\n    \"type\": \"image\",\r\n    \"payload\": {\r\n    \"url\": \" https:\/\/i.mdel.net\/i\/db\/2017\/12\/822869\/822869-800w.jpg\"\r\n    }\r\n    }\r\n    print(JSON.stringify(message));<\/pre>\n<p><strong><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v9-1\/wp-content\/uploads\/sites\/22\/20211125070149\/image_template-264x300.jpg\" alt=\"\" width=\"380\" height=\"589\" class=\"alignnone size-medium wp-image-31980\" \/><\/strong><\/p>\n<p><strong>Video Template<\/strong><\/p>\n<p>You can either download or watch the video directly in the bot.<\/p>\n<p>To download and watch the video, use this JS script:<\/p>\n<pre class=\"lang:default decode:true\">var message = \r\n   {\r\n      \"type\": \"video\",\r\n      \"payload\": {\r\n     \"url\": \" https:\/\/www.youtube.com\/watch?v=a3aobWbIOj8\"\r\n    }\r\n  }\r\n    print(JSON.stringify(message));\r\n<\/pre>\n<p><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/Attachment-Template.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v9-1\/wp-content\/uploads\/sites\/22\/20211125084351\/video_download_template-267x300.jpg\" alt=\"\" width=\"380\" height=\"589\" class=\"alignnone size-medium wp-image-31982\" \/><\/a><\/p>\n<p>To play the video within the bot, use this JS script:<\/p>\n<pre class=\"lang:default decode:true\">var message = \r\n   {\r\n       \"type\": \"message\",\r\n      \"payload\": {\r\n      \"text\": \"\",\r\n      \"videoUrl\": \"https:\/\/demo.kore.ai\/barefoot\/sites\/default\/files\/demo_uploads\/videoplayback.mp4\"\r\n    }\r\n}\r\nprint(JSON.stringify(message));\r\n<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/v9-1\/wp-content\/uploads\/sites\/22\/20211125084519\/video_render_template-266x300.jpg\" alt=\"\" width=\"380\" height=\"589\" class=\"alignnone size-medium wp-image-31983\" \/><\/p>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div>\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h3><span class=\"ez-toc-section\" id=\"Text_Template\">Text Template<\/span><\/h3>\n<p>Shows messages to the user using Bots Platform defined default formatting.<br \/>\n<strong>Example<\/strong><\/p>\n<pre class=\"lang:default decode:true\">var message=\r\n {\r\n   \"text\" : \"message\"\r\n  }\r\nprint(JSON.stringify(message);<\/pre>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div>\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h3><span class=\"ez-toc-section\" id=\"Carousel_Template\">Carousel Template<\/span><\/h3>\n<p>Shows a horizontal scrollable carousel of items, each composed of an image attachment, a short description, and buttons to request user input.<br \/>\n<strong>Required Parameters<\/strong>:<\/p>\n<ul>\n<li>title<\/li>\n<li>image_url<\/li>\n<li>elements<\/li>\n<li>buttons (only up to three items)<\/li>\n<\/ul>\n<p><strong>Example<\/strong><\/p>\n<pre class=\"\">var message = {\r\n  \"type\": 'template',\r\n  \"payload\":\r\n    {\r\n     \"template_type\": 'carousel',\r\n     \"elements\":\r\n      [{\r\n        \"title\": \"Welcome to Peter\\'s Hats1\",\r\n        \"image_url\": \"https:\/\/previews.123rf.com\/images\/rez_art\/rez_art1405\/rez_art140500072\/28632615-three-beef-tacos-with-cheese-lettuce-and-tomatos-Stock-Photo-taco.jpg\",\r\n        \"subtitle\": \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\",\r\n        \"default_action\":\r\n         {\r\n           \"type\": \"web_url\",\r\n           \"url\": \"https:\/\/peterssendreceiveapp.ngrok.io\/view?item=103\"\r\n           \/\/or\r\n           \/\/\"type\": \"postback\",\r\n           \/\/\"title\": \"discard\",\r\n           \/\/\"payload\":\"clear payload\"\r\n         },\r\n        \"buttons\":\r\n          [{\r\n            \"type\": \" postback\",\r\n            \"title\": \"Buy now\",\r\n            \"payload\": \"DEVELOPER_DEFINED_PAYLOAD_0\"\r\n           },\r\n           {\r\n            \"type\": \"postback\",\r\n            \"title\": \"Show more like this\",\r\n            \"payload\": \"DEVELOPER_DEFINED_PAYLOAD_1\"\r\n           }]\r\n       },\r\n       {\r\n        \"title\": \"Welcome to Peter\\'s Hats2\",\r\n        \"image_url\": \"https:\/\/static.pexels.com\/photos\/46239\/salmon-dish-food-meal-46239.jpeg\",\r\n        \"subtitle\": \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\",\r\n        \"default_action\":\r\n         {\r\n           \"type\": \"web_url\",\r\n           \"url\": \"https:\/\/peterssendreceiveapp.ngrok.io\/view?item=103\"\r\n          },\r\n         \"buttons\":\r\n           [{\r\n             \"type\": \"postback\",\r\n             \"title\": \"Buy now\",\r\n             \"payload\": \"DEVELOPER_DEFINED_PAYLOAD_0\"\r\n            },\r\n            {\r\n             \"type\": \"postback\",\r\n             \"title\": \"Show more like this\",\r\n             \"payload\": \"DEVELOPER_DEFINED_PAYLOAD_1\"\r\n            }]\r\n       },\r\n       {\r\n        \"title\": \"Welcome to Peter\\'s Hats3\",\r\n        \"image_url\": \"https:\/\/previews.123rf.com\/images\/rez_art\/rez_art1405\/rez_art140500072\/28632615-three-beef-tacos-with-cheese-lettuce-and-tomatos-Stock-Photo-taco.jpg\",\r\n        \"subtitle\": \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\",\r\n        \"default_action\":\r\n         {\r\n           \"type\": \"web_url\",\r\n           \"url\": \"https:\/\/peterssendreceiveapp.ngrok.io\/view?item=103\"\r\n         },\r\n        \"buttons\":\r\n          [{\r\n            \"type\": \"postback\",\r\n            \"title\": \"Buy now\",\r\n            \"payload\": \"DEVELOPER_DEFINED_PAYLOAD_0\"\r\n           },\r\n           {\r\n            \"type\": \"postback\",\r\n            \"title\": \"Show more like this\",\r\n            \"payload\": \"DEVELOPER_DEFINED_PAYLOAD_1\"\r\n            }]\r\n       },\r\n       {\r\n        \"title\": \"Welcome to Peter\\'s Hats4\",\r\n        \"image_url\": \"https:\/\/static.pexels.com\/photos\/416458\/pexels-photo-416458.jpeg\",\r\n        \"subtitle\": \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\",\r\n        \"default_action\":\r\n          {\r\n           \"type\": \"web_url\",\r\n           \"url\": \"https:\/\/peterssendreceiveapp.ngrok.io\/view?item=103\"\r\n          },\r\n         \"buttons\":\r\n           [{\r\n             \"type\": \"postback\",\r\n             \"title\": \"Buy now\",\r\n             \"payload\": \"DEVELOPER_DEFINED_PAYLOAD_0\"\r\n            },\r\n            {\r\n             \"type\": \"postback\",\r\n             \"title\": \"Show more like this\",\r\n             \"payload\": \"DEVELOPER_DEFINED_PAYLOAD_1\"\r\n            }]\r\n     }]\r\n  }\r\n }\r\nprint(JSON.stringify(message));<\/pre>\n<h3><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/carousel-template-web.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-13585 size-full\" src=\"\/wp-content\/uploads\/sites\/22\/carousel-template-web.png\" alt=\"\" width=\"403\" height=\"636\" \/><\/a><\/h3>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div>\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h3><span class=\"ez-toc-section\" id=\"Piechart_Template\">Piechart Template<\/span><\/h3>\n<div class=\"alert alert-info\">This template is supported only for Web SDK; doesn&#8217;t apply for Mobile SDK.<\/div>\n<p>Shows the data in a Pie chart in one of these three variations &#8211; regular full pie, donut pie, and donut pie with legend table.\u00a0If you do not specify a type, \u201cregular\u2019 will be considered by default<br \/>\n<strong>Required Parameters<\/strong><\/p>\n<ul>\n<li>template_type<\/li>\n<li>elements<\/li>\n<\/ul>\n<pre class=\"\">var message = {\r\n  \"type\": \"template\",\r\n  \"payload\":\r\n    {\r\n     \"text\": \"Travelling expenses report chart\",\r\n     \"template_type\": \"piechart\",\r\n     \"pie_type\": \"regular\",\r\n     \"elements\":\r\n       [{\r\n         \"title\": \"Airlines\",\r\n         \"value\": \"1264.0\",\r\n         \"displayValue\": \"$ 1,234\"\r\n        },\r\n        {\r\n         \"title\": \"Hotels\",\r\n         \"value\": \"568.10\",\r\n         \"displayValue\": \"$ 568\"\r\n        },\r\n       {\r\n        \"title\": \"Food\",\r\n        \"value\": \"324.50\",\r\n        \"displayValue\": \"$ 324\"\r\n       }],\r\n     speech_hint: \"You spent $2855.71 from your account. Here is the breakup.\"\r\n    }\r\n  }\r\nprint(JSON.stringify(message));<\/pre>\n<h3><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/Piechartfinal.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-13525\" src=\"\/wp-content\/uploads\/sites\/22\/Piechartfinal.png\" alt=\"\" width=\"390\" height=\"627\" \/><\/a><\/h3>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div>\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h3><span class=\"ez-toc-section\" id=\"Line_Chart_Template\">Line Chart Template<\/span><\/h3>\n<div class=\"alert alert-info\">This template is supported only for Web SDK; doesn&#8217;t apply for Mobile SDK.<\/div>\n<p>Shows the data in a line chart.<br \/>\n<strong>Required Parameters<\/strong><\/p>\n<ul>\n<li>template_type<\/li>\n<li>x_axis<\/li>\n<li>elements<\/li>\n<\/ul>\n<p><strong>Example<\/strong><\/p>\n<pre class=\"\">var message =\r\n {\r\n  \"type\": \"template\",\r\n  \"payload\":\r\n   {\r\n    \"text\":\"Peter Sam Report\",\r\n    \"template_type\": \"linechart\",\r\n    \"X_axis\": [\"15-Jan-2017\", \"20-Jan-2017\", \"25-Jan-2017\", \"30-Jan-2017\"],\r\n    \"Auto_adjust_X_axis\": \"yes\",\r\n    \"elements\":\r\n      [\r\n       {\r\n        \"title\":  \"Peter\",\r\n        \"values\": [10,5,15,20],\r\n        \"displayValues\": [\"10ml\",\"5ml\",\"15ml\",\"20ml\"]\r\n       },\r\n       {\r\n        \"title\": \"Sam\",\r\n        \"values\": [30,15,12,60],\r\n        \"displayValues\": [\"30 mins\",\"15 mns\",\"12 mins\",\"1 hour\"]\r\n       }\r\n      ],\r\n    speech_hint:\"Here is your report\"\r\n   }\r\n  }\r\nprint(JSON.stringify(message));<\/pre>\n<h2><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/Line-Chart-Template.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-13522 size-full\" src=\"\/wp-content\/uploads\/sites\/22\/Line-Chart-Template.png\" alt=\"\" width=\"379\" height=\"588\" \/><\/a><\/h2>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div>\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h3><span class=\"ez-toc-section\" id=\"Bar_Chart_Template\">Bar Chart Template<\/span><\/h3>\n<div class=\"alert alert-info\">This template is supported only for Web SDK; doesn&#8217;t apply for Mobile SDK.<\/div>\n<p>Shows the data in a bar graph in one of these variants: a single data series simple bar graphs, multiple data series bar\u00a0graphs, or stacked multiple data series bar graphs.<br \/>\n<strong>Required Parameters<\/strong><\/p>\n<ul>\n<li>template_type<\/li>\n<li>x_axis<\/li>\n<li>elements<\/li>\n<\/ul>\n<p><strong>Example<\/strong><\/p>\n<pre class=\"\">var message =\r\n {\r\n   \"type\": \"template\",\r\n   \"pay load\":\r\n     {\r\n       \"text\":\"Peter Sam Report\",\r\n       \"template_type\": \"barchart\",\r\n       \"direction\":\"vertical\",\r\n       \"auto_adjust_X_axis\" : \"no\",\r\n       \"stacked\":false,\r\n       \"X_axis\": [\"15-Jan-2017\", \"20-Jan-2017\", \"25-Jan-2017\", \"30-Jan-2017\"],\r\n       \"Auto_adjust_X_axis\": \"yes\",\r\n       \"elements\":\r\n          [\r\n           {\r\n            \"title\":  \"Peter\",\r\n            \"values\": [10,5,15,20],\r\n            \"displayValues\": [\"10ml\",\"5ml\",\"15ml\",\"20ml\"]\r\n           },\r\n           {\r\n            \"title\": \"Sam\",\r\n            \"values\": [30,15,12,60],\r\n            \"displayValues\": [\"30 mins\",\"15 mns\",\"12 mins\",\"1 hour\"]\r\n           }\r\n          ],\r\n       speech_hint:\"Here is your report\"\r\n    }}\r\nprint(JSON.stringify(message));<\/pre>\n<h2><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/bar-Graph-template.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-13524\" src=\"\/wp-content\/uploads\/sites\/22\/bar-Graph-template.png\" alt=\"\" width=\"388\" height=\"620\" \/><\/a><\/h2>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div>\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h3><span class=\"ez-toc-section\" id=\"Regular_Table_Template\">Regular Table Template<\/span><\/h3>\n<div class=\"alert alert-info\">This template is supported only for Web SDK; doesn&#8217;t apply for Mobile SDK.<\/div>\n<p>Shows the data in a regular or responsive table format.<br \/>\n<strong>Required Parameters<\/strong><\/p>\n<ul>\n<li>template_type<\/li>\n<li>columns: Array of column names in the table<\/li>\n<\/ul>\n<pre class=\"\">var m  essage =\r\n{\r\n  \"type\": \"template\",\r\n  \"payload\":\r\n    {\r\n     \"template_type\": \"table\",\r\n     \"text\":\"Account details\",\r\n     \"columns\":\r\n       [\r\n        [\"Sl\",\"center\"],[\"Name\"],[\"Designation\"],[\"Salary\",\"right\"]\r\n       ],\r\n     \"table_design\": \"regular\",\r\n     \"elements\":\r\n       [\r\n        {\r\n          \"Values\": [\"1\",\"Peter\",\"Producer\",\"1,000\"]\r\n        },\r\n        {\r\n          \"Values\": [\"2\",\"Sam\",\"Director\",\"2,000\"]\r\n        },\r\n        {\r\n          \"Values\": [\"3\",\"Nick\",\"DoP\",\"1,500\"]\r\n        }\r\n       ],\r\n     speech_hint:\"Here is your account details\"\r\n    }}\r\nprint(JSON.stringify(message));<\/pre>\n<h2><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/Regular-table-template.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-13526\" src=\"\/wp-content\/uploads\/sites\/22\/Regular-table-template.png\" alt=\"\" width=\"396\" height=\"571\" \/><\/a><\/h2>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div>\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h3><span class=\"ez-toc-section\" id=\"Mini_Table_Template\">Mini Table Template<\/span><\/h3>\n<div class=\"alert alert-info\">This template is supported only for Web SDK; doesn&#8217;t apply for Mobile SDK.<\/div>\n<p>For each row header in a table, this template shows column data as separate cards. This is ideally suitable for data with 3-4 columns and 4-5 rows.<br \/>\n<strong>Required Parameters<\/strong><\/p>\n<ul>\n<li>template_type<\/li>\n<li>elements<\/li>\n<\/ul>\n<p><strong>Example<\/strong><\/p>\n<pre class=\"\">var message = {\r\n  \"type\": \"template\",\r\n  \"payload\": {\r\n     \"template_type\": \"mini_table\",\r\n     \"layout\": \"horizontal\",\r\n     \"text\":\"Account details\",\r\n     \"elements\": [\r\n        {\r\n         \"primary\":[[\"Current Accounts\"],[\"300\",\"right\"]],\r\n         \"additional\":[[\"CA00001\",\"150\"],[\"CA00123\",\"50\"],[\"CA23423\",\"100\"]]\r\n        },\r\n        {\r\n         \"primary\":[[\"Savings Accounts\"],[\"200\",\"right\"]],\r\n         \"additional\":[[\"SA33001\",\"75\"],[\"SA67345\",\"125\"]]\r\n        }\r\n       ],\r\n     speech_hint:\"Here is your account details\"\r\n    }\r\n  };\r\nprint(JSON.stringify(message));<\/pre>\n<h2><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/Mini-table-template.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-13529\" src=\"\/wp-content\/uploads\/sites\/22\/Mini-table-template.png\" alt=\"\" width=\"385\" height=\"629\" \/><\/a><\/h2>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div>\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h2><span class=\"ez-toc-section\" id=\"BotKit_SDK_Message_Formatting_with_Templates\">BotKit SDK Message Formatting with Templates<\/span><\/h2>\n<p>You can also apply message templates in the BotKit SDK using the sendUserMessage function by setting the <code>isTemplate<\/code> parameter to <code>true<\/code> in the payload object as shown in the following example.<\/p>\n<pre class=\"lang:default decode:true \">on_user_message: function(requestId, data, callback) {\r\n console.log(\"User Message -----&gt;\", data.message);\r\n \/\/console.log(JSON.stringify(data));\r\n if (data.message === \"Hi\") {\r\n    {\r\n      var overrideMessagePayload =\r\n         {\r\n           body : JSON.stringify({\r\n             \"type\": \"template\",\r\n             \"payload\":\r\n               {\r\n                 \"template_type\": \"button\",\r\n                 \"text\": \"This is an example to demonstrate message templates sent from bot kit\",\r\n                 \"buttons\":\r\n                    [{\r\n                       \"type\": \"postback\",\r\n                       \"title\": \"Yes\",\r\n                       \"payload\": \"Yes\"\r\n                     },\r\n                     {\r\n                       \"type\": \"postback\",\r\n                       \"title\": \"No\",\r\n                       \"payload\": \"No\"\r\n                     }]\r\n               }\r\n             }),\r\n           isTemplate :true\r\n          }\r\n    data.overrideMessagePayload= overrideMessagePayload;}\r\n   return sdk.sendUserMessage(data, callback);\r\n }<\/pre>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div>\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h2><span class=\"ez-toc-section\" id=\"Standard_Markdown_Support\">Standard Markdown Support<\/span><\/h2>\n<p>You can apply your formatting directly in JavaScript using Kore.ai markdown as described.<\/p>\n<ul>\n<li><strong>Bold<\/strong> &#8211; *text to be bolded* Do not add spaces after or before the &#8221; <span style=\"color: #0000ff\">*<\/span> &#8221; symbol. For example,\u00a0<code>Here is *bold*.<\/code><\/li>\n<li><strong>Italic<\/strong> &#8211; ~test to be italicized~ Do not add spaces after or before the &#8221; <span style=\"color: #0000ff\">~<\/span> &#8221; symbol. For example,\u00a0<code>Here is ~italics~.<\/code> Preceeding and succeeding _ will also italicise the enclosed text, i.e. <code>Here is _italics_.<\/code><\/li>\n<li><strong>Link<\/strong> &#8211;\u00a0[Text for the link here](http:\/\/myCompany.com) For example,\u00a0<code>Here is a link to [Kore.ai.com](https:\/\/kore.ai\/).<\/code><\/li>\n<li><strong>New Line<\/strong> &#8211; \\n One line indention.<\/li>\n<li><strong>Multi Line<\/strong> &#8211; \\n\\n\\n Three line indentions.<\/li>\n<li><strong>Image<\/strong> &#8211; ![Text for the link here](http:\/\/myCompany.com)\u00a0For example,\u00a0<code>![My image](http:\/\/d1hqmx8kqvpnpa.cloudfront.net\/f-eeca5df3-7580-5a09-9aa3-09f809b44ac4.png)<\/code><\/li>\n<li><strong>List<\/strong> &#8211;\n<ul>\n<li><strong>Unordered Bulleted List<\/strong> &#8211; * Text for the list time \u00a0Add a space after the &#8221; <span style=\"color: #0000ff\">*<\/span> &#8221; symbol.\n<ul>\n<li><code>* This is an example of an unordered list Bullet 1.<\/code><\/li>\n<li><code>* This is an example of an unordered list Bullet 2.<\/code><\/li>\n<li><code>* This is an example of an unordered list Bullet 3.<\/code><\/li>\n<\/ul>\n<\/li>\n<li><strong>Ordered List<\/strong> &#8211;\n<ul>\n<li><code>1. This is an example of an ordered list Bullet 1.<\/code><\/li>\n<li><code>2. This is an example of an ordered list Bullet 2.<\/code><\/li>\n<li><code>3. This is an example of an ordered list Bullet 3.<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li><strong>Preformatted Text<\/strong> &#8211;\u00a0&#8220;`text&#8220;` The text between the &#8221; <span style=\"color: #0000ff\">&#8220;`<\/span> &#8221; symbols is formatted. For example,\u00a0<code>Here is an example of ```preformatting```.<\/code>&gt;<\/li>\n<li><strong>Paragraph Indent<\/strong> &#8211; &gt;&gt; For example,\u00a0<code>&gt;&gt;This is indented once.<\/code><\/li>\n<li><strong>Multi Indent<\/strong> &#8211; &gt;&gt;&gt;&gt; For example,\u00a0<code>&gt;&gt;&gt;&gt;This is indented twice.<\/code><\/li>\n<li><strong>Heading<\/strong> &#8211; #h1, #h2, #h3, #h4, #h5, #h6 For example,\n<ul>\n<li><code>Here is an example of #h1Heading1.<\/code><\/li>\n<li><code>Here is an example of #h2Heading2.<\/code><\/li>\n<li><code>Here is an example of #h3Heading3.<\/code><\/li>\n<li><code>Here is an example of #h4Heading4.<\/code><\/li>\n<li><code>Here is an example of #h5Heading5.<\/code><\/li>\n<li><code>Here is an example of #h6Heading6.<\/code><\/li>\n<\/ul>\n<\/li>\n<li><strong>Horizontal Rule<\/strong> &#8211; ___ Three underscores inserts a horizontal line. For example,\u00a0<code>This is a horizontal rule line, added three times. _________<\/code><\/li>\n<\/ul>\n<ul>\n<li><\/li>\n<\/ul>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div>\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h2><span class=\"ez-toc-section\" id=\"Default_Message_Templates_for_Web_SDK\">Default Message Templates for Web SDK<\/span><\/h2>\n<p>When custom formatting is not defined, the following default message formatting types apply to the Web SDK.<\/p>\n<ul>\n<li><strong>Choice Message<\/strong>\n<ul>\n<li>If the number of options is 3 or less, the <em>Button<\/em> <em>Template<\/em> is used.<\/li>\n<li>If the number of options is between 3 \u00a0and 10, the <em>Quick Replies Template<\/em> is used.<\/li>\n<li>If the number of options is greater than 10, the <em>Quick Replies Template<\/em> is used. The 9th option is displayed as <span style=\"color: #0000ff\">Show more\u00a0which when clicked opens<\/span>\u00a0the next set of options.<\/li>\n<li>If the button title &gt; 20 characters, 18 characters and two periods get displayed. When the user clicks the\u00a0title, the full title gets displayed.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Confirmation Message<\/strong>\n<ul>\n<li>Quick Replies Template is used with <span style=\"color: #0000ff\">Yes<\/span> and <span style=\"color: #0000ff\">No<\/span> options.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Question Message<\/strong>\n<ul>\n<li>Plain text.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Error Message<\/strong>\n<ul>\n<li>Text with red font color is sent as an attachment<\/li>\n<\/ul>\n<\/li>\n<li><strong>Warning Message<\/strong>\n<ul>\n<li>Text with orange font color is sent as an attachment<\/li>\n<\/ul>\n<\/li>\n<li><strong>Validation Message<\/strong>\n<ul>\n<li>Text with yellow font color is sent as an attachment<\/li>\n<\/ul>\n<\/li>\n<li><strong>Info, Statement, Greeting, Chit Chat Messages<\/strong>\n<ul>\n<li>Plain text<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div>\r\n\t<div class=\"wpb_text_column \">\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<h2><span class=\"ez-toc-section\" id=\"Custom_Templates\">Custom Templates<\/span><\/h2>\n<p>Apart from using the above templates, you can build your own custom template.<\/p>\n<p>The following are the custom templates provided for you at <a href=\"https:\/\/github.com\/Koredotcom\/web-kore-sdk\/tree\/master\/UI\/custom\" target=\"_blank\" rel=\"noopener noreferrer\">webSDK<\/a> for reference to build your own templates.<\/p>\n<ol>\n<li>Drop down template\n<pre class=\"lang:default decode:true \">var message =  {\r\n        \"type\": \"template\",\r\n        \"payload\": {\r\n            \"template_type\": \"dropdown_template\",\r\n            \"heading\":\"please select : \",\r\n            \"elements\": [\r\n                {\r\n                    \"title\": \"United Arab Emirates Dirham\",\r\n                    \"value\":\"AED\"\r\n                },\r\n                {\r\n                    \"title\": \"Australian Dollar\",\r\n                    \"value\":\"AUD\"\r\n                },\r\n                {\r\n                    \"title\": \"Canadian Dollar\",\r\n                    \"value\":\"CAD\"\r\n                },\r\n                {\r\n                    \"title\": \"Swiss Franc\",\r\n                    \"value\":\"CHF\"\r\n                },\r\n                {\r\n                    \"title\": \"Chinese Yuanr\",\r\n                    \"value\":\"CNY\"\r\n                },\r\n                {\r\n                    \"title\": \"Czech Koruna\",\r\n                    \"value\":\"CZK\"\r\n                }\r\n           \r\n            ],\r\n        }\r\n};\r\nprint(JSON.stringify(message));<\/pre>\n<p><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/custTemplate-dropdown.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23071\" src=\"\/wp-content\/uploads\/sites\/22\/custTemplate-dropdown.png\" alt=\"\" width=\"400\" height=\"526\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/wp-content\/uploads\/sites\/22\/20221201104039\/custTemplate-dropdown.png 400w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/wp-content\/uploads\/sites\/22\/20221201104039\/custTemplate-dropdown-228x300.png 228w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/a><\/li>\n<li>Like-dislike template:\n<pre class=\"lang:default decode:true \">var message = {\r\n  \"type\": \"template\",\r\n  \"payload\": {\r\n     \"template_type\": \"like_dislike\"\r\n     }\r\n  };\r\nprint(JSON.stringify(message))<\/pre>\n<p><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/custTemplate-likedislike.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23072\" src=\"\/wp-content\/uploads\/sites\/22\/custTemplate-likedislike.png\" alt=\"\" width=\"400\" height=\"519\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/wp-content\/uploads\/sites\/22\/20221201104039\/custTemplate-likedislike.png 400w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/wp-content\/uploads\/sites\/22\/20221201104039\/custTemplate-likedislike-231x300.png 231w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/a><\/li>\n<li>Multi-select Template:\n<pre class=\"lang:default decode:true \">var message = {\r\n  \"type\": \"template\",\r\n  \"payload\": {\r\n      \"template_type\": \"multi_select\",\r\n      \"elements\": [\r\n         {\r\n           \"title\": \"Classic T-Shirt Collection\",\r\n           \"value\":\"tShirt\"\r\n          },{\r\n           \"title\": \"Classic Shirt Collection\",\r\n           \"value\":\"shirts\"\r\n          },\r\n          {\r\n           \"title\": \"Classic shorts Collection\",\r\n           \"value\":\"shorts\"\r\n          }\r\n        ],\r\n  \"buttons\": [\r\n     {\r\n       \"title\": \"Done\",\r\n       \"type\": \"postback\",\r\n       \"payload\": \"payload\"\r\n     }\r\n    ]\r\n  }\r\n};\r\nprint(JSON.stringify(message))<\/pre>\n<p><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/custTemplate-multiselect.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23073\" src=\"\/wp-content\/uploads\/sites\/22\/custTemplate-multiselect.png\" alt=\"\" width=\"397\" height=\"514\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/wp-content\/uploads\/sites\/22\/20221201104039\/custTemplate-multiselect.png 397w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/wp-content\/uploads\/sites\/22\/20221201104039\/custTemplate-multiselect-232x300.png 232w\" sizes=\"auto, (max-width: 397px) 100vw, 397px\" \/><\/a><\/li>\n<\/ol>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n<div class=\"w-separator size_small with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section>\n","protected":false},"excerpt":{"rendered":"Kore.ai SDK allows you to override the default message formatting using markdown and apply templates to display custom formatted bot messages to users. This topic describes the following: Supported template types Template implementation details The default formatting for the Web SDK Supported markdown to customize messages Template Types The SDKs support the following message template...","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36],"tags":[],"class_list":["post-18001","post","type-post","status-publish","format-standard","hentry","category-sdks"],"_links":{"self":[{"href":"https:\/\/developer.kore.ai\/v9-1\/wp-json\/wp\/v2\/posts\/18001","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developer.kore.ai\/v9-1\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/developer.kore.ai\/v9-1\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/developer.kore.ai\/v9-1\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/developer.kore.ai\/v9-1\/wp-json\/wp\/v2\/comments?post=18001"}],"version-history":[{"count":13,"href":"https:\/\/developer.kore.ai\/v9-1\/wp-json\/wp\/v2\/posts\/18001\/revisions"}],"predecessor-version":[{"id":31985,"href":"https:\/\/developer.kore.ai\/v9-1\/wp-json\/wp\/v2\/posts\/18001\/revisions\/31985"}],"wp:attachment":[{"href":"https:\/\/developer.kore.ai\/v9-1\/wp-json\/wp\/v2\/media?parent=18001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developer.kore.ai\/v9-1\/wp-json\/wp\/v2\/categories?post=18001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developer.kore.ai\/v9-1\/wp-json\/wp\/v2\/tags?post=18001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}