Kik Bot Tutorials

In this tutorial, we start with creating a simple echo bot for kik. We also create a bot that shows you different cat images. In addition, we explain the input and output of the kik In and kik Out nodes.

Here is an example of the bot in action:




By the end of this tutorial, you will be able to:
  • Connect a chatflow application to kik
  • Understand the input and outputs of the kik In and kik Out nodes
  • Create a custom keyboard for your bot
  • Set global variables

A simple echo bot

Let’s first create a simple echo bot using ChatFlow.

1. Create a Kik Bot

On the Browser

  1. Install Kik onto your mobile device.
  2. Go to dev.kik.com to build your bot.

On the Mobile App

  1. Using the Kik app, touch the following image in the upper right corner:
_images/tip.png
  1. Click on the following image to scan the code on the web browser, which registers a bot for you:
_images/scan.png
  1. A chat with Botsworth will open.
_images/botsworthchat.png
  1. Give your bot a unique name. Answer Botsworth’s questions. Tap “Yes” and “Create a Bot”.
_images/botsworthchat2.png

On the Browser

  1. After bot creation, click “Configuration” on top of dev.kik.com page.
_images/dev-kik-config.png
  1. Copy the “Bot Name” and “API Key” to your clipboard.
_images/uniqueBot.png

2. Create a ChatFlow application

  1. Go to the applications and create a new application.
_images/kik-new-app.png
  1. Drag the kik In and kik Out nodes onto the canvas. Connect them together like the image below:
_images/echoBot.png
  1. Double click the kik In node, select “Add new kikbot-controller…” and click “Edit” button.
  2. Copy and paste “kik bot name” and “API Key” and click Add.
_images/pasteCredentials.png
  1. Double click the kik Out node and select the same controller.
_images/kik-ouputnode.png
  1. Deploy the application.
_images/kik-deploy.png

When you write to your bot, it answers you with the same message.

kik In and kik Out Nodes

In this section, we will explain the input and output of the kik In and kik Out nodes.

kik In

The kik In node receives messages from kik. It has the following output:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
msg = {
       kik: {
             message: "Message",
             user: "User Name",
             chatId: "User chatId",
             type: "message type"
             }
       payload: payload
       kitt: {
              _session_id: message.chatId,
              _user_id: message.from,
              _timeout: 120
             }
       }
Variable Type Description
payload String Contains the message body (i.e. text, image, URL)
kik.message String The original message from the kik server
kik.user String kik username
kik.chatId String The chat ID where the message will be sent (determined by kik)
kik.type String Message type

Hint

For more info on types of kik messages, check out kik message formats for more details.

kik Out

The kik Out node sends messages back to kik. It accepts input in the following format:

1
2
3
4
5
6
7
8
9
msg = {
       kik: {
             user: username,
             chatId: chatId,
             type: type,
             suggestions: suggestions
       }
       payload: payload
}
Variable Type Description
payload String Contains the message body (i.e. text, image, URL)
kik.user String kik username
kik.chatId String The chat ID where the message will be sent (determined by kik)
kik.type String Message type
kik.suggestions Array of Strings Array of suggested answers to the bot. Sets the custom keyboard in kik app.

Hint

For more on custon keyboards, see kik keyboards for more details.

Advanced: attachments and custom keyboards

In this part of the tutorial, we will create a bot that shows you cat images of different color.

Sending attachments

Attachments can be sent by setting the corresponding kik variable to a URL link to the attachment. For example, to send a picture attachment, use the following code:

1
2
3
4
5
6
7
8
9
msg = {
       kik: {
             user: username,
             chatId: chatId,
             type: type,
             picture: picture.url
       }
       payload: payload
}

The following is a list of attachment variables and the corresponding attachment type.

Variable Description
kik.link a URL to a web address
kik.picture a URL to an image
kik.video a URL to a video, as well as some playback configurations
kik.sticker information required to display a sticker.

Creating a custom keyboard

The portion of the tutorial will explain how to create a custom keyboard for your kik Bot.

  1. Drag a function node onto the canvas and connect it to the kik Out Node.
_images/CustomKeyBoard.png
  1. Double click the function and edit the body of the function to set msg.kik.suggestions as an array of options. You can use the following template:
1
2
3
4
5
msg.kik.suggestions=[
                     'Option 1',
                     'Option 2'
                     ];
return msg;

Final result should look something like this:

_images/keyboardsample.png

Attachments and Custom Keyboard Demo

1. Importing the “Colored Cats” Application

  1. Import the application to ChatFlow. You can either:
  • Download json of our application and import the project on the applications page, or,
  • Use the “kik - Cat Choose” sample application when clicking “CREATE NEW APP” on the applications page.
_images/coloredCats.png

kik Color Cat Bot Video Walkthrough

In addition, here is a walkthrough video explaining the process of making the Colored Cats Application:




2. NLU Setup

  1. Download NLU json to import it as an NLU application.
  2. Go to NLU and import the NLU json.
_images/import_JSON1.png
  1. Copy the deploymnet URL in the “Deployment Information” section. Don’t forget to deploy your NLU app!
_images/Kik_Deployment_URL.png
  1. In ChatFlow, open the KITT.AI NLU node and paste the Deployment URL.
_images/kitt1.png
  1. Add {{{payload}}}, so your final string would look like::

    http://api-nlu.kitt.ai/v1/api/900584f4-7360-479c?token=xxx?q={{{payload}}}
    
_images/nluNode.png

3. Set up “Colored Cats” application

  1. Register the kik bot, as described in 1. Create a Kik Bot section.
  2. Copy and paste bot name and bot API key, as described in 2. Create a ChatFlow application section.
  3. Deploy the application!

After deploying your application, you can write to your bot and tell him to show you a specific color cat.