Kik Webhook Integration Example

Overview

This example shows how you can send images to your Kik bot using API.AI webhook integration.

Sending Formatted Data from the Web Service

In order to send formatted data from the web service, we need to define the message format in the “data” field in the response from the service.

The Kik bot message format is described in the following Kik documentation:

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.

Deploying the Web Service

Log in or sign up to Heroku.

Go to https://github.com/svet4/apiai-kik-rich-formatting 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.

Creating an Agent and Enabling Webhook

Create an API.AI agent 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:

Create an intent 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 web service errors.

Creating and Testing Your Kik Bot

To enable Kik integration, follow the steps from the Kik Integration documentation.

Here's how the picture and the texts sent in the "data" field may look like in your Kik bot: