{"__v":0,"_id":"5845a4aa9f6fbb1b00430842","category":{"version":"5845a4a89f6fbb1b004307b7","project":"54d3007669578e0d002730c9","_id":"5845a4a89f6fbb1b004307bf","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-01-26T17:19:04.989Z","from_sync":false,"order":7,"slug":"guidelines","title":"Guidelines"},"parentDoc":null,"project":"54d3007669578e0d002730c9","user":"55bf6cdcad601c2b00762d13","version":{"__v":1,"_id":"5845a4a89f6fbb1b004307b7","project":"54d3007669578e0d002730c9","createdAt":"2016-12-05T17:32:24.708Z","releaseDate":"2016-12-05T17:32:24.708Z","categories":["5845a4a89f6fbb1b004307b8","5845a4a89f6fbb1b004307b9","5845a4a89f6fbb1b004307ba","5845a4a89f6fbb1b004307bb","5845a4a89f6fbb1b004307bc","5845a4a89f6fbb1b004307bd","5845a4a89f6fbb1b004307be","5845a4a89f6fbb1b004307bf","5845a4a89f6fbb1b004307c0"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"25.0.0","version":"25"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-08-01T05:38:19.083Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":4,"body":"* [Overview](#overview)\n* [Sending Formatted Data from the Web Service](#sending-formatted-data-from-the-web-service)\n* [Deploying the Web Service](#deploying-the-web-service)\n* [Creating an Agent and Enabling Webhook](#creating-an-agent-and-enabling-webhook)\n* [Creating and Testing Your Kik Bot](#creating-and-testing-your-kik-bot)\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Overview\"\n}\n[/block]\nThis example shows how you can send images to your Kik bot using <a href=\"https://docs.api.ai/docs/webhook\" target=\"_blank\">API.AI webhook</a> integration.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Sending Formatted Data from the Web Service\"\n}\n[/block]\nIn order to send formatted data from the web service, we need to define the message format in the `“data”` field in the  <a href=\"https://docs.api.ai/docs/webhook#section-format-of-response-from-the-service\" target=\"_blank\">response from the service</a>.\n\nThe Kik bot message format is described in the following Kik documentation:\n\n- <a href=\"https://dev.kik.com/#/docs/messaging#message-formats\" target=\"_blank\">https://dev.kik.com/#/docs/messaging#message-formats</a>\n\nFor Kik bots, in the `“data”` field in the response from the service, the message format should be defined as the value for the `“kik”` field:\n```\n\"data\": {\"kik\": {<kik_message>}}\n```\n\nIn our example, the message format looks like this:\n\n    kik_message = [\n        {\n            \"type\": \"text\",\n            \"body\": \"Here's the picture of item \" + item\n        },\n        {\n            \"type\": \"picture\",\n            \"picUrl\": \"https://raw.githubusercontent.com/svet4/apiai-kik-images/master/pictures/item\" + item +\".png\"\n        }\n    ]\n    \nNote that we are using 2 types of Kik messages – \"text\" and \"picture\", so that we can accompany the picture being sent with a text. \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Deploying the Web Service\"\n}\n[/block]\nLog in or sign up to <a href=\"https://www.heroku.com/\" target=\"_blank\">Heroku</a>.\n\nGo to <a href=\"https://github.com/svet4/apiai-kik-rich-formatting\" target=\"_blank\">https://github.com/svet4/apiai-kik-rich-formatting</a> and click 'Deploy to Heroku' button.\n\nHeroku website will open, and you’ll be asked to fill in the app name. Insert the app name (in our example, it’ll be “kik-images”, but you can choose your own name) and click 'Deploy for Free' button.\n\nWait until 'Your app was successfully deployed.' appears.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Creating an Agent and Enabling Webhook\"\n}\n[/block]\n<a href=\"https://console.api.ai/api-client/#/newAgent\" target=\"_blank\">Create an API.AI agent</a> and enable webhook: \n\n- Click on Fulfillment in the left side menu\n- Turn Webhook on\n- Insert the link `https://[App Name].herokuapp.com/webhook` into the ‘URL’ field\n- Click ‘Save’.\n\nCreate an entity containing item names:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/34e166d-Kik-images-item-entity.png\",\n        \"Kik-images-item-entity.png\",\n        2074,\n        544,\n        \"#2f8eca\"\n      ],\n      \"sizing\": \"full\"\n    }\n  ]\n}\n[/block]\nCreate an <a href=\"https://docs.api.ai/docs/concept-intents\" target=\"_blank\">intent</a> containing requests to show items. Make sure to define the action name as `show.item`. \n\nMake sure the ‘Enable webhook for this intent’ option in the ‘Speech Response’ section is checked.\n\nIn the ‘Speech Response’ field, define the response that will appear in case of <a href=\"https://docs.api.ai/docs/webhook#section-errors\" target=\"_blank\">web service errors</a>.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/160a912-Kik-show-item-intent.png\",\n        \"Kik-show-item-intent.png\",\n        2100,\n        1386,\n        \"#f7f7f6\"\n      ],\n      \"sizing\": \"full\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Creating and Testing Your Kik Bot\"\n}\n[/block]\nTo enable Kik integration, follow the steps from the <a href=\"https://docs.api.ai/docs/kik-integration\" target=\"_blank\">Kik Integration documentation</a>.\n\nHere's how the picture and the texts sent in the `\"data\"` field may look like in your Kik bot:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/242c33d-Kik-images-bot.png\",\n        \"Kik-images-bot.png\",\n        480,\n        800,\n        \"#dedede\"\n      ]\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"kik-webhook-integration-example","type":"basic","title":"Kik + Webhook Integration Example"}

Kik + Webhook Integration Example


* [Overview](#overview) * [Sending Formatted Data from the Web Service](#sending-formatted-data-from-the-web-service) * [Deploying the Web Service](#deploying-the-web-service) * [Creating an Agent and Enabling Webhook](#creating-an-agent-and-enabling-webhook) * [Creating and Testing Your Kik Bot](#creating-and-testing-your-kik-bot) [block:api-header] { "type": "basic", "title": "Overview" } [/block] This example shows how you can send images to your Kik bot using <a href="https://docs.api.ai/docs/webhook" target="_blank">API.AI webhook</a> integration. [block:api-header] { "type": "basic", "title": "Sending Formatted Data from the Web Service" } [/block] In order to send formatted data from the web service, we need to define the message format in the `“data”` field in the <a href="https://docs.api.ai/docs/webhook#section-format-of-response-from-the-service" target="_blank">response from the service</a>. The Kik bot message format is described in the following Kik documentation: - <a href="https://dev.kik.com/#/docs/messaging#message-formats" target="_blank">https://dev.kik.com/#/docs/messaging#message-formats</a> For Kik bots, in the `“data”` field in the response from the service, the message format should be defined as the value for the `“kik”` field: ``` "data": {"kik": {<kik_message>}} ``` In our example, the message format looks like this: kik_message = [ { "type": "text", "body": "Here's the picture of item " + item }, { "type": "picture", "picUrl": "https://raw.githubusercontent.com/svet4/apiai-kik-images/master/pictures/item" + item +".png" } ] Note that we are using 2 types of Kik messages – "text" and "picture", so that we can accompany the picture being sent with a text. [block:api-header] { "type": "basic", "title": "Deploying the Web Service" } [/block] Log in or sign up to <a href="https://www.heroku.com/" target="_blank">Heroku</a>. Go to <a href="https://github.com/svet4/apiai-kik-rich-formatting" target="_blank">https://github.com/svet4/apiai-kik-rich-formatting</a> and click 'Deploy to Heroku' button. Heroku website will open, and you’ll be asked to fill in the app name. Insert the app name (in our example, it’ll be “kik-images”, but you can choose your own name) and click 'Deploy for Free' button. Wait until 'Your app was successfully deployed.' appears. [block:api-header] { "type": "basic", "title": "Creating an Agent and Enabling Webhook" } [/block] <a href="https://console.api.ai/api-client/#/newAgent" target="_blank">Create an API.AI agent</a> and enable webhook: - Click on Fulfillment in the left side menu - Turn Webhook on - Insert the link `https://[App Name].herokuapp.com/webhook` into the ‘URL’ field - Click ‘Save’. Create an entity containing item names: [block:image] { "images": [ { "image": [ "https://files.readme.io/34e166d-Kik-images-item-entity.png", "Kik-images-item-entity.png", 2074, 544, "#2f8eca" ], "sizing": "full" } ] } [/block] Create an <a href="https://docs.api.ai/docs/concept-intents" target="_blank">intent</a> containing requests to show items. Make sure to define the action name as `show.item`. Make sure the ‘Enable webhook for this intent’ option in the ‘Speech Response’ section is checked. In the ‘Speech Response’ field, define the response that will appear in case of <a href="https://docs.api.ai/docs/webhook#section-errors" target="_blank">web service errors</a>. [block:image] { "images": [ { "image": [ "https://files.readme.io/160a912-Kik-show-item-intent.png", "Kik-show-item-intent.png", 2100, 1386, "#f7f7f6" ], "sizing": "full" } ] } [/block] [block:api-header] { "type": "basic", "title": "Creating and Testing Your Kik Bot" } [/block] To enable Kik integration, follow the steps from the <a href="https://docs.api.ai/docs/kik-integration" target="_blank">Kik Integration documentation</a>. Here's how the picture and the texts sent in the `"data"` field may look like in your Kik bot: [block:image] { "images": [ { "image": [ "https://files.readme.io/242c33d-Kik-images-bot.png", "Kik-images-bot.png", 480, 800, "#dedede" ] } ] } [/block]