{"id":23226,"date":"2020-02-10T09:35:27","date_gmt":"2020-02-10T09:35:27","guid":{"rendered":"https:\/\/developer.kore.ai\/v9-1\/?p=23226"},"modified":"2021-03-17T11:19:56","modified_gmt":"2021-03-17T11:19:56","slug":"widget-sdk-message-formatting-and-templates","status":"publish","type":"post","link":"https:\/\/developer.kore.ai\/v9-1\/docs\/bots\/sdks\/widget-sdk-message-formatting-and-templates\/","title":{"rendered":"Widget SDK \u2013 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 Widget SDK allows you to override the default message formatting using markdown and apply templates to display custom formatted bot messages to users on the Widget SDK channel.<\/p>\n<p>For details on Web\/Mobile SDK, <a href=\"\/docs\/bots\/sdks\/message-templates\/\" target=\"_blank\" rel=\"noopener noreferrer\">refer here<\/a>.<\/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=\"Button_Template\">Button Template<\/span><\/h3>\n<p>Shows a clickable button in the header option. The button can be placed anywhere within a message and for any message template.<\/p>\n<p>There are two types of buttons:<\/p>\n<ul>\n<li>URL type to open an external site. <em>url<\/em> field should contain the external site address.<\/li>\n<li>postback type to trigger an utterance in Chatbot. The <em>payload<\/em> defines the utterance to be passed to the chatbot and the\u00a0<em>nlmeta<\/em> defines the additional information that the platform needs to trigger the respective task.<\/li>\n<\/ul>\n<p><strong>Example<\/strong><\/p>\n<pre>var message = {\r\n\t\"templateType\": \"List\",\r\n\t\"widgetName\": \"Account Summary\",\r\n\t\"description\": \"Showing all accounts\",\r\n\t\"headerOptions\": {\r\n\t\t\"layout\": {\r\n\t\t\t\"align\": \"top\",\r\n\t\t\t\"colSize\": \"25%\"\r\n\t\t},\r\n\t\t\"type\": \"button\",\r\n\t\t\"button\":\r\n\t\t    {\r\n                        \/\/ type can be anyone of [\"url\", \"postback\"]\r\n\t\t\t\"type\": \"postback\",\r\n\t\t\t\"title\": \"New Account\",\r\n\t\t\t\"payload\": \"Apply Account\",\r\n\t\t\t\"nlmeta\": {\r\n\t\t\t\t\"intent\": \"Apply Account\",\r\n\t\t\t\t\"isRefreshplace\": \"true\",\r\n\t\t\t\t\"entities\": {\r\n\t\t\t\t\t\"Name\": \"John\"\r\n\t\t\t\t},\r\n\t\t\t\t\"interruptionOptions\": \"discardAll\"\r\n\t\t\t},\r\n\t\t\t\"customdata\": {\r\n\t\t\t\t\"key\": \"value\"\r\n\t\t\t}\r\n          }\r\n\t},\r\n\t\"elements\": [\r\n\t  {\r\n\t\t\t\"title\": \"Salary Account\",\r\n\t\t\t\"subtitle\": \"Active\",\r\n\t\t\t\"details\": [\r\n\t\t\t  {\r\n\t\t\t\t\t\"image\": {\r\n\t\t\t\t\t\t\"image_type\": \"image\",\r\n\t\t\t\t\t\t\"image_src\": \"https:\/\/static.thenounproject.com\/png\/2539563-200.png\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t\"description\": \"$ 25 - Feb 8, 2020 08:45 AM - Fuel Purchase\"\r\n\t\t\t\t}\r\n\t\t\t]\r\n\t\t}\r\n\t]\r\n}\r\nprint(JSON.stringify(message));<\/pre>\n<p><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/widget_template_button.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23258\" src=\"\/wp-content\/uploads\/sites\/22\/widget_template_button.png\" alt=\"\" width=\"567\" height=\"323\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/wp-content\/uploads\/sites\/22\/20221201104017\/widget_template_button.png 567w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/wp-content\/uploads\/sites\/22\/20221201104017\/widget_template_button-300x171.png 300w\" sizes=\"auto, (max-width: 567px) 100vw, 567px\" \/><\/a><\/p>\n\r\n\t\t<\/div>\r\n\t<\/div>\r\n\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=\"Menu_Template\">Menu Template<\/span><\/h3>\n<p>Shows a dropdown menu in the header option. The menu can be placed for any message template. There are two types of menu items:<\/p>\n<ul>\n<li>URL type to open an external site. <em>url<\/em> field should contain the external site address.<\/li>\n<li>postback type to trigger an utterance in Chatbot. The <em>payload<\/em> defines the utterance to be passed to the chatbot and the\u00a0<em>nlmeta<\/em> defines the additional information that the platform needs to trigger the respective task.<\/li>\n<\/ul>\n<p><strong>Example<\/strong><\/p>\n<pre>var message = {\r\n\t\"templateType\": \"List\",\r\n\t\"widgetName\": \"Account Summary\",\r\n\t\"description\": \"Showing all accounts\",\r\n\t\"headerOptions\": {\r\n\t\t\"layout\": {\r\n\t\t\t\"align\": \"top\",\r\n\t\t\t\"colSize\": \"25%\"\r\n\t\t},\r\n\t\t\"type\": \"menu\",\r\n\t\t\"menu\":\r\n            [\r\n             {\r\n                \/\/ type can be anyone of [\"url\", \"postback\"]\r\n                \"type\": \"url\",\r\n                \"title\": \"Website\",\r\n                \"url\": \"kore.ai\",\r\n                \"customdata\": {\r\n                    \"key\": \"value\"\r\n                }\r\n            },\r\n            {\r\n                \/\/ type can be anyone of [\"url\", \"postback\"]\r\n                \"type\": \"postback\",\r\n                \"title\": \"New Account\",\r\n                \"payload\": \"Create Account\",\r\n                \"nlmeta\": {\r\n                    \"intent\": \"Create Account\",\r\n                    \"entities\": {},\r\n                    \"interruptionOptions\": \"discardAll\"\r\n                },\r\n                \"customdata\": {\r\n                    \"key\": \"value\"\r\n                }\r\n            }\r\n        ]\r\n\t},\r\n    \"elements\": [\r\n\t  {\r\n\t\t\t\"title\": \"Salary Account\",\r\n\t\t\t\"subtitle\": \"Active\",\r\n\t\t\t\"details\": [\r\n\t\t\t  {\r\n\t\t\t\t\t\"image\": {\r\n\t\t\t\t\t\t\"image_type\": \"image\",\r\n\t\t\t\t\t\t\"image_src\": \"https:\/\/static.thenounproject.com\/png\/2539563-200.png\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t\"description\": \"$ 25 - Feb 8, 2020 08:45 AM - Fuel Purchase\"\r\n\t\t\t\t}\r\n\t\t\t]\r\n\t\t}\r\n\t]\r\n}\r\nprint(JSON.stringify(message));<\/pre>\n<p><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/widget_template_menu.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23257\" src=\"\/wp-content\/uploads\/sites\/22\/widget_template_menu.png\" alt=\"\" width=\"567\" height=\"321\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/wp-content\/uploads\/sites\/22\/20221201104017\/widget_template_menu.png 567w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/wp-content\/uploads\/sites\/22\/20221201104017\/widget_template_menu-300x170.png 300w\" sizes=\"auto, (max-width: 567px) 100vw, 567px\" \/><\/a><\/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=\"List_Template\">List Template<\/span><\/h3>\n<p>Shows a formatted list of date to the user with clickable text and images as choices for additional information or trigger tasks.<\/p>\n<p><strong>Example<\/strong><\/p>\n<pre>var message = {\r\n\t\"templateType\": \"List\",\r\n\t\"widgetName\": \"Account Summary\",\r\n\t\"description\": \"Showing all accounts\",\r\n\t\"headerOptions\": {\r\n\t\t\"layout\": {\r\n\t\t\t\"align\": \"top\",\r\n\t\t\t\"colSize\": \"25%\"\r\n\t\t},\r\n               \"type\": \"url\",\r\n               \"url\": {\r\n               \"title\": \"Open Site\",\r\n               \"link\": \"kore.ai\"\r\n               },\r\n\t },\r\n\t\"elements\": [\r\n\t  {\r\n\t\t\t\"image\": {\r\n\t\t\t\t\"image_type\": \"image\",\r\n\t\t\t\t\"image_src\": \"https:\/\/static.thenounproject.com\/png\/1863652-200.png\"\r\n\t\t\t},\r\n\t\t\t\"title\": \"Salary Account\",\r\n\t\t\t\"subtitle\": \"Active\",\r\n\t\t\t\"buttonsLayout\": {\r\n\t\t\t\t\"displayLimit\": {\r\n\t\t\t\t\t\"count\": 2        \/\/adds an open icon if more than 2 elements are present\r\n\t\t\t\t},\r\n\t\t\t\t\"style\": \"fitToWidth\"\r\n\t\t\t},\r\n\t\t\t\"value\": {\r\n\t\t\t\t\"layout\": {\r\n\t\t\t\t\t\"align\": \"top\",\r\n\t\t\t\t\t\"colSize\": \"25%\"\r\n\t\t\t\t},\r\n\t\t\t\t\"type\": \"text\",\r\n\t\t\t\t\"text\": \"$ 45\",\r\n\t\t\t},\r\n\t\t\t\"details\": [\r\n\t\t\t  {\r\n\t\t\t\t\t\"image\": {\r\n\t\t\t\t\t\t\"image_type\": \"image\",\r\n\t\t\t\t\t\t\"image_src\": \"https:\/\/static.thenounproject.com\/png\/2539563-200.png\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t\"description\": \"$ 25 - Feb 8, 2020 08:45 AM - Fuel Purchase\"\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\t\"image\": {\r\n\t\t\t\t\t\t\"image_type\": \"image\",\r\n\t\t\t\t\t\t\"image_src\": \"https:\/\/static.thenounproject.com\/png\/953447-200.png\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t\"description\": \"$ 77 - Feb 9, 2020 02:23 PM - Library Enrollment\"\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\t\"image\": {\r\n\t\t\t\t\t\t\"image_type\": \"image\",\r\n\t\t\t\t\t\t\"image_src\": \"https:\/\/static.thenounproject.com\/png\/2539563-200.png\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t\"description\": \"$ 18 - Feb 9, 2020 04:03 PM - Sainsbury's\"\r\n\t\t\t\t}\r\n\t\t\t],\r\n\t\t\t\"default_action\": {\r\n\t\t\t\t\"type\": \"postback\",\r\n\t\t\t\t\"payload\": \"Show recent transactions\"\r\n\t\t\t},\r\n\t\t\t\"buttons\": [\r\n\t\t\t  {\r\n\t\t\t\t\t\"type\": \"postback\",\r\n\t\t\t\t\t\"title\": \"Statement\",\r\n\t\t\t\t\t\"payload\": \"Account Statement\",\r\n\t\t\t\t\t\"image\": {\r\n\t\t\t\t\t\t\"image_type\": \"image\",\r\n\t\t\t\t\t\t\"image_src\": \"https:\/\/static.thenounproject.com\/png\/2033288-200.png\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t\"nlmeta\": {\r\n\t\t\t\t\"intent\": \"Account Statement\",\r\n\t\t\t\t\"isRefreshplace\": \"true\",\r\n\t\t\t\t\"entities\": {\r\n\t\t\t\t\t\"entity_name\": \"entity_value\"\r\n\t\t\t\t},\r\n\t\t\t\t\"interruptionOptions\": \"discardAll\"\r\n\t\t\t},\r\n\t\t\t\"customdata\": {\r\n\t\t\t\t\"key\": \"value\"\r\n\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t   {\r\n\t\t\t\t\t\"type\": \"postback\",\r\n\t\t\t\t\t\"title\": \"Upgrade\",\r\n\t\t\t\t\t\"payload\": \"Upgrade Account\",\r\n\t\t\t\t\t\"image\": {\r\n\t\t\t\t\t\t\"image_type\": \"image\",\r\n\t\t\t\t\t\t\"image_src\": \"https:\/\/static.thenounproject.com\/png\/1586653-200.png\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t\"nlmeta\": {\r\n\t\t\t\t\"intent\": \"Upgrade Account\",\r\n\t\t\t\t\"isRefreshplace\": \"true\",\r\n\t\t\t\t\"entities\": {\r\n\t\t\t\t\t\"entity_name\": \"entity_value\"\r\n\t\t\t\t},\r\n\t\t\t\t\"interruptionOptions\": \"discardAll\"\r\n\t\t\t},\r\n\t\t\t\"customdata\": {\r\n\t\t\t\t\"key\": \"value\"\r\n\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t]\r\n\t\t},\r\n\t {\r\n\t\t\t\"image\": {\r\n\t\t\t\t\"image_type\": \"image\",\r\n\t\t\t\t\"image_src\": \"https:\/\/static.thenounproject.com\/png\/2119994-200.png\"\r\n\t\t\t},\r\n\t\t\t\"title\": \"Infinia Credit card\",\r\n\t\t\t\"subtitle\": \"Active - Payment Due on Feb 14, 2020\",\r\n\t\t\t\"buttonsLayout\": {\r\n\t\t\t\t\"displayLimit\": {\r\n\t\t\t\t\t\"count\": 3\r\n\t\t\t\t},\r\n\t\t\t\t\"style\": \"fitToWidth\"\r\n\t\t\t},\r\n\t\t\t\"value\": {\r\n\t\t\t\t\"layout\": {\r\n\t\t\t\t\t\"align\": \"top\",\r\n\t\t\t\t\t\"colSize\": \"25%\"\r\n\t\t\t\t},\r\n\t\t\t\t\"type\": \"text\",\r\n\t\t\t\t\"text\": \"$ 8,520\",\r\n\t\t\t},\r\n\t\t\t\"details\": [\r\n\t\t\t  {\r\n\t\t\t\t\t\"image\": {\r\n\t\t\t\t\t\t\"image_type\": \"image\",\r\n\t\t\t\t\t\t\"image_src\": \"https:\/\/static.thenounproject.com\/png\/953447-200.png\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t\"description\": \"$ 78 - Feb 3, 2020 07:03 PM - Pizzabar\"\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\t\"image\": {\r\n\t\t\t\t\t\t\"image_type\": \"image\",\r\n\t\t\t\t\t\t\"image_src\": \"https:\/\/static.thenounproject.com\/png\/953447-200.png\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t\"description\": \"$ 12 - Feb 5, 2020 11:23 AM - McDonald's\"\r\n\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\"image\": {\r\n\t\t\t\t\t\t\"image_type\": \"image\",\r\n\t\t\t\t\t\t\"image_src\": \"https:\/\/static.thenounproject.com\/png\/953447-200.png\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t\"description\": \"$ 62 - Feb 6, 2020 02:11 PM - CarzRent\"\r\n\t\t\t\t}\r\n\t\t\t],\r\n\t\t\t\"default_action\": {\r\n\t\t\t\t\"type\": \"postback\",\r\n\t\t\t\t\"payload\": \"Postback text payload\"\r\n\t\t\t},\r\n\t\t\t\"buttons\": [\r\n\t\t\t  {\r\n\t\t\t\t\t\"type\": \"postback\",\r\n\t\t\t\t\t\"title\": \"Statement\",\r\n\t\t\t\t\t\"payload\": \"Statement\",\r\n\t\t\t\t\t\"image\": {\r\n\t\t\t\t\t\t\"image_type\": \"image\",\r\n\t\t\t\t\t\t\"image_src\": \"https:\/\/static.thenounproject.com\/png\/2033288-200.png\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t\"nlmeta\": {\r\n\t\t\t\t\"intent\": \"name of the intent\",\r\n\t\t\t\t\"isRefreshplace\": \"true\",\r\n\t\t\t\t\"entities\": {\r\n\t\t\t\t\t\"entity_name\": \"entity_value\"\r\n\t\t\t\t},\r\n\t\t\t\t\"interruptionOptions\": \"discardAll\"\r\n\t\t\t},\r\n\t\t\t\"customdata\": {\r\n\t\t\t\t\"key\": \"value\"\r\n\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t   {\r\n\t\t\t\t\t\"type\": \"postback\",\r\n\t\t\t\t\t\"title\": \"Pay Dues\",\r\n\t\t\t\t\t\"payload\": \"Pau Dues\",\r\n\t\t\t\t\t\r\n\t\t\t\t\t\"nlmeta\": {\r\n\t\t\t\t\"intent\": \"name of the intent\",\r\n\t\t\t\t\"isRefreshplace\": \"true\",\r\n\t\t\t\t\"entities\": {\r\n\t\t\t\t\t\"entity_name\": \"entity_value\"\r\n\t\t\t\t},\r\n\t\t\t\t\"interruptionOptions\": \"discardAll\"\r\n\t\t\t},\r\n\t\t\t\"customdata\": {\r\n\t\t\t\t\"key\": \"value\"\r\n\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t   {\r\n\t\t\t\t\t\"type\": \"postback\",\r\n\t\t\t\t\t\"title\": \"Redeem\",\r\n\t\t\t\t\t\"payload\": \"Redeem\",\r\n\t\t\t\t\t\r\n\t\t\t\t\t\"nlmeta\": {\r\n\t\t\t\t\"intent\": \"name of the intent\",\r\n\t\t\t\t\"isRefreshplace\": \"true\",\r\n\t\t\t\t\"entities\": {\r\n\t\t\t\t\t\"entity_name\": \"entity_value\"\r\n\t\t\t\t},\r\n\t\t\t\t\"interruptionOptions\": \"discardAll\"\r\n\t\t\t},\r\n\t\t\t\"customdata\": {\r\n\t\t\t\t\"key\": \"value\"\r\n\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t   {\r\n\t\t\t\t\t\"type\": \"postback\",\r\n\t\t\t\t\t\"title\": \"Upgrade\",\r\n\t\t\t\t\t\"payload\": \"Upgrade\",\r\n\t\t\t\t\t\r\n\t\t\t\t\t\"nlmeta\": {\r\n\t\t\t\t\"intent\": \"name of the intent\",\r\n\t\t\t\t\"isRefreshplace\": \"true\",\r\n\t\t\t\t\"entities\": {\r\n\t\t\t\t\t\"entity_name\": \"entity_value\"\r\n\t\t\t\t},\r\n\t\t\t\t\"interruptionOptions\": \"discardAll\"\r\n\t\t\t},\r\n\t\t\t\"customdata\": {\r\n\t\t\t\t\"key\": \"value\"\r\n\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\t\"type\": \"postback\",\r\n\t\t\t\t\t\"title\": \"Block\",\r\n\t\t\t\t\t\"payload\": \"Block\",\r\n\t\t\t\t\t\r\n\t\t\t\t\t\"nlmeta\": {\r\n\t\t\t\t\"intent\": \"name of the intent\",\r\n\t\t\t\t\"isRefreshplace\": \"true\",\r\n\t\t\t\t\"entities\": {\r\n\t\t\t\t\t\"entity_name\": \"entity_value\"\r\n\t\t\t\t},\r\n\t\t\t\t\"interruptionOptions\": \"discardAll\"\r\n\t\t\t},\r\n\t\t\t\"customdata\": {\r\n\t\t\t\t\"key\": \"value\"\r\n\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t]\r\n\t\t}\r\n\t]\r\n}\r\nprint(JSON.stringify(message));<\/pre>\n<p><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/widget_template_list.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23260\" src=\"\/wp-content\/uploads\/sites\/22\/widget_template_list.png\" alt=\"\" width=\"559\" height=\"551\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/wp-content\/uploads\/sites\/22\/20221201104016\/widget_template_list.png 559w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/wp-content\/uploads\/sites\/22\/20221201104016\/widget_template_list-300x296.png 300w\" sizes=\"auto, (max-width: 559px) 100vw, 559px\" \/><\/a><\/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=\"Pie_Chart_Template\">Pie Chart Template<\/span><\/h3>\n<p>Shows the data in a Pie chart<\/p>\n<p><strong>Sample<\/strong><\/p>\n<pre class=\"\">var data = {\r\n  \"templateType\": \"piechart\",\r\n  \"pie_type\": \"regular\",\r\n  \"title\": \"Spend Analysis\",\r\n   \"headerOptions\": {\r\n    \"type\": \"url\",\r\n    \"url\": {\r\n      \"title\": \"Manage Spends\",\r\n      \"link\": \"https:\/\/kore.ai\"\r\n    }\r\n  },\r\n  \"elements\": [\r\n    {\r\n      \"title\": \"Food and Drinks\",\r\n      \"value\": \"200\",\r\n      \"displayValue\": \"$ 200\"\r\n    },\r\n    {\r\n      \"title\": \"Travel\",\r\n      \"value\": \"120\",\r\n      \"displayValue\": \"$ 120\"\r\n    },\r\n    {\r\n      \"title\": \"Inivestments\",\r\n      \"value\": \"320\",\r\n      \"displayValue\": \"$ 320\"\r\n    },\r\n    {\r\n      \"title\": \"Entertainment\",\r\n      \"value\": \"180\",\r\n      \"displayValue\": \"$ 180\"\r\n    }\r\n  ],\r\n  \"buttons\": [\r\n    {\r\n      \"type\": \"postback\",\r\n      \"title\": \"Download\",\r\n      \"utterance\": \"Show Expense Report\",\r\n      \"payload\": \"Show Expense Report\"\r\n    }\r\n  ]\r\n};\r\nprint(JSON.stringify(data));<\/pre>\n<p><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/widget_template_pie.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23242\" src=\"\/wp-content\/uploads\/sites\/22\/widget_template_pie.png\" alt=\"\" width=\"571\" height=\"423\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/wp-content\/uploads\/sites\/22\/20221201104018\/widget_template_pie.png 571w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/wp-content\/uploads\/sites\/22\/20221201104018\/widget_template_pie-300x222.png 300w\" sizes=\"auto, (max-width: 571px) 100vw, 571px\" \/><\/a><\/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=\"Line_Chart_Template\">Line Chart Template<\/span><\/h3>\n<p>Shows the data in a line chart.<\/p>\n<p><strong>Sample<\/strong><\/p>\n<pre class=\"\">var data = {\r\n  \"templateType\": \"linechart\",\r\n   \"headerOptions\": {\r\n    \"type\": \"url\",\r\n    \"url\": {\r\n      \"title\": \"Manage Spends\",\r\n      \"link\": \"https:\/\/kore.ai\"\r\n    },\r\n  \"image\": {\r\n        \"image_type\": \"image\",\r\n        \"image_src\": \"https:\/\/static.thenounproject.com\/png\/1863652-200.png\"\r\n     },\r\n  },\r\n  \"X_axis\": [\r\n    \"F&amp;B\",\r\n    \"Travel\",\r\n    \"Investments\",\r\n    \"Entertainment\"\r\n  ],\r\n  \"Auto_adjust_X_axis\": \"yes\",\r\n  \"elements\": [\r\n    {\r\n      \"title\": \"Jan\",\r\n        \"values\": [\r\n            20,\r\n            12,\r\n            32,\r\n            18\r\n        ],\r\n        \"displayValues\": [\r\n            \"$20k\",\r\n            \"$12k\",\r\n            \"$32k\",\r\n            \"$18k\"\r\n        ]\r\n    },\r\n    {\r\n      \"title\": \"Feb\",\r\n      \"values\": [\r\n        30,\r\n        15,\r\n        12,\r\n        60\r\n      ],\r\n      \"displayValues\": [\r\n        \"$30k\",\r\n        \"$15k\",\r\n        \"$12k\",\r\n        \"$60k\"\r\n      ]\r\n    }\r\n  ],\r\n  \"buttons\": [\r\n    {\r\n      \"type\": \"postback\",\r\n      \"title\": \"Download\",\r\n      \"utterance\": \"Download Report\",\r\n      \"payload\": \"Download Report\"\r\n    }\r\n  ],\r\n  \"speech_hint\": \"Here is your report\"\r\n};\r\nprint(JSON.stringify(data));<\/pre>\n<p><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/widget_template_line.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23253\" src=\"\/wp-content\/uploads\/sites\/22\/widget_template_line.png\" alt=\"\" width=\"559\" height=\"585\" srcset=\"https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/wp-content\/uploads\/sites\/22\/20221201104017\/widget_template_line.png 559w, https:\/\/kore-wordpress.s3.us-east-2.amazonaws.com\/developer.kore.ai\/wp-content\/uploads\/sites\/22\/20221201104017\/widget_template_line-287x300.png 287w\" sizes=\"auto, (max-width: 559px) 100vw, 559px\" \/><\/a><\/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><\/div><\/div><\/div><\/div><\/div><\/section>\n","protected":false},"excerpt":{"rendered":"Kore.ai Widget SDK allows you to override the default message formatting using markdown and apply templates to display custom formatted bot messages to users on the Widget SDK channel. For details on Web\/Mobile SDK, refer here. Button Template Shows a clickable button in the header option. The button can be placed anywhere within a message...","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36],"tags":[],"class_list":["post-23226","post","type-post","status-publish","format-standard","hentry","category-sdks"],"_links":{"self":[{"href":"https:\/\/developer.kore.ai\/v9-1\/wp-json\/wp\/v2\/posts\/23226","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=23226"}],"version-history":[{"count":10,"href":"https:\/\/developer.kore.ai\/v9-1\/wp-json\/wp\/v2\/posts\/23226\/revisions"}],"predecessor-version":[{"id":23262,"href":"https:\/\/developer.kore.ai\/v9-1\/wp-json\/wp\/v2\/posts\/23226\/revisions\/23262"}],"wp:attachment":[{"href":"https:\/\/developer.kore.ai\/v9-1\/wp-json\/wp\/v2\/media?parent=23226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developer.kore.ai\/v9-1\/wp-json\/wp\/v2\/categories?post=23226"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developer.kore.ai\/v9-1\/wp-json\/wp\/v2\/tags?post=23226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}