Press enter to see results or esc to cancel.

Integrating Kata.AI Bot into Qiscus SDK Chat App

Kata.AI is an Indonesian Artificial Intelligence (AI) service provider focusing on creating and integrating chatbot into available conversation service clients such as Messenger, Line, Telegram, Slack or even generic messaging service clients (those are called channels in Kata.AI). The good news is that if you are using Qiscus Chat SDK to build your chat application, and you have also been creating your bot using Kata.AI, then you now get a chance to integrate your bot into your chat application. Yes! that’s now possible since Kata.AI has added new integration support to Qiscus SDK called qiscus channel.

As a brief introduction, Kata.AI has a command line interface (cli), called kata-cli, to make process of creating bot easily. It will generate starter codes that you can use to leverage your bot’s functionality. It uses a language so called Kata Markup Language (KataML) that is quite similar to YAML. Not only that, if you think you have finished fiddling with your bot, you can easily push and deploy it to Kata server. Then kata-cli will generate a unique deployment id based on channel you’ve specified in deployment process. This id can be used as your bot webhook later as a mean to communicate between your messaging client and your bot.

In this article, we are not going to discuss how you create a bot using Kata.AI thoroughly, instead, we are going to show you how easy it is to integrate your Kata bot into your chat application which is created using Qiscus SDK. Now let’s get started.

1. Creating initial bot using kata-cli

Since we are going to integrate bot that is created using Kata.AI, we need to have at least a simple bot deployed in Kata.AI. Fortunately, we can do it easily using kata-cli. So the first step would be installing kata-cli. Let’s install it using npm in terminal. We assume you have last stable npm version installed.

$ npm install -g kata-cli

And restart your terminal, you may want to type kata -help in your terminal to get information about what you can do with kata-cli as well as to know that kata-cli has been installed.

Initiate Bot Project

Now let’s create a bot called HelloBot. But before that, we need to login first to be able to push and deploy our bot to Kata server. In doing so, kata-cli provides three ways to login into Kata: via user account, team account and token. However, you don’t need to login to only initiate a bot project directory thought. For more information about Kata account, can be found at http://kata.ai/.

In our case we are going to login using user account,
$ kata login user -u <username>
password: <password>

Next, let’s initiate our bot project. It’s up to you to give any directory name you like,

$ mkdir <bot-directory-name>
$ cd <bot-directory-name>
$ kata init <bot-id> <bot-name> [version]

example,

$ mkdir hello-bot
$ cd hello-bot
$ kata init hello-bot-id HelloBot
INIT BOT SUCCESSFULLY

by running above code, kata-cli will generate code structure similar to this

.
├── bot.yml
├── flows
│   └── fallback.yml
├── messages.yml
└── nlu.yml

1 directory, 4 files

Push and deploy

We already got minimum code structure of our HelloBot. Since we are not interested in how these codes work, we can now skip to the next step, which is pushing and deploying our bot project.

When pushing our bot project, we will have to provide our current bot version. It’s like providing a release version of our bot. There are three type of revs, called: patch, minor, and major. Since we were not modifying anything before, let’s give minor release version.

$ kata push --rev minor
CREATED BOT SUCCESSFULLY

You can see what version we are at by typing kata versions. It will list all available versions that have been pushed before.

The next step would be deploying our bot into Kata server.

$ # use 'kata deploy <deploy-name>' to deploy
$ kata deploy hello
DEPLOYMENT CREATED SUCCESSFULLY
{ id: '9f1f9703-73ad-4ece-xxxx-xxxxxxxxxxxx',
  name: 'hello',
  botId: 'hello-bot-id',
  botVersion: '0.0.1',
  channels: {},
  tag: 'latest' }

By doing so, we already deployed our bot into Kata server. This means our bot is ready to be hooked by any supported messaging clients. To test our bot, we can go to the kata console and try to feed our bot with any text.

$ kata console
HelloBot>text('hi')

2. Add Qiscus channel

So far we have created our simple HelloBot using kata-cli. Now as our focus of this article is to integrate our bot into messaging client that is using Qiscus SDK, we need to add qiscus channel into our deployment. But before that, we have to provide a couple of information that is required when adding a qiscus channel in kata-cli. We need Qiscus AppID and Qiscus Secret Key. To get these two things, we have to login into Qiscus dashboard and select your app.

qiscus dashboard live chat api messaging app
Qiscus Dashboard

In the Overview section above, you can see your application AppID and Secret Key. Ok, let’s get back to our previous terminal and let’s add qiscus channel,

$ # use 'kata add-channel [options] <deploymentname> <channelName>' to add channel
$ kata add-channel hello qiscus
# when you hit enter, you'll see these options. choose qiscus
? channel type :  
  line 
  slack 
  generic 
  fbmessenger 
  telegram 
❯ qiscus 

After that, you’ll be asked for some credentials including token and app id, go ahead and fill each of them.

? channel type :  qiscus
? channel token:  d75ef370xxxxxxxxxxxxxxxxxx
? channel refresh token:  null
? channel secret key:  null
? channel additional options:  [object Object]
? channel api url (default: https://<appId>.qiscus.com) : https://<appId>.qiscu
s.com
CHANNEL ADDED SUCCESSFULLY
Paste this url to qiscus webhook : https://kanal.katalabs.io/receive_message/xxxxxxxx-xxxx-xxxx-xxxx-a189704d5529

 

Also read: “TechTalk: Happiness is When Others Can Grow With Us

 

Let’s explain code interface above,

  • channel token, is where we specify our Qiscus Secret Key. This basically will be used when our bot sends back its response of incoming message to our Qiscus messaging client app.
  • channel refresh token and channel secret key are optionals here, so we may skip them.
  • in channel additional options, we need to provide additional information about our bot account in Qiscus. As Qiscus bot account using email address, we need to provide it to Kata.
    • So let’s add it here, {"botEmail":"<botEmail>"}.
    • botEmail is one of registered user who you define as chatbot in Qiscus Chat SDK. Only message sent to defined botEmail that will be replied by chatbot in Kata.
  • Lastly, we need to provide Qiscus api url in channel api url field. You need to provide a full address of your Qiscus App url, which is your App ID + qiscus.com. like so, https://qiscuskata-xxxx.qiscus.com.

If everything is good, kata-cli will generate a unique url as your bot’s webhook url, such as

https://kanal.katalabs.io/receive_message/xxxxxxxx-xxxx-xxxx-xxxx-a189704d5529

Last but not the least, let’s get back to the Qiscus dashboard and go to the Settings section.

 Qiscus panel sdk chat engine
Qiscus dashboard the settings section

Copy and paste your unique url generated by kata-cli before into Webhooks form as seen on the image above. And that’s all how we integrate our bot at Kata into Qiscus messaging client app.

3. Bot in action!

As you finished the second step above, you already got your Kata bot connected to the Qiscus Chat SDK. However you cannot see how your bot works in action yet, except if you already got your Qiscus chat app running. Fear not! let’s provide a simple Qiscus messaging client app.

For simplicity purpose, we are going to use an available example at Creating your app docs in the new Qiscus web docs to try our bot. Now go to the link, and scroll down to the bottom of that page until you find CodePen widget as similar to this image.

in-app chat messenger realtime
JS Panel

What you need to do next is to click “edit on codepen” link, and if you have codepen account, you can just fork the pen above. Otherwise you don’t have to worry, just follow along.

On the JS panel, let’s made a couple of modifications, change 'dragongo' into your Qiscus AppID and in the loginSuccessCallback function block, add this snippet,

qiscus.UI.chatTarget('botEmail') // botEmail is your chatbot email address

and change http://some-url.com/avatar.png into https://image.flaticon.com/icons/svg/145/145867.svg for additional fancy avatar.

Our JS code will look like this,

QiscusSDK.core.init({
  AppId: '<your-app-id>',
  options: {
    loginSuccessCallback: function () {
      // Do something after successfully login
      QiscusSDK.core.UI.chatTarget('<botEmail>')
    }
  }
});

QiscusSDK.core.setUser('userId', 'userKey', 'You', 'https://image.flaticon.com/icons/svg/145/145867.svg')
QiscusSDK.render();

That’s all, go ahead and try to have a conversation with our bot! 😉

chat sdk chatbots qiscus bot
Kata Qiscus Bot

can be seen at https://codepen.io/nurulishlah/full/KywgWW.

This article originally written by Saad.

Credits:

  • Kata.AI documentation
  • Flaticon for avatar icon
Comments

Leave a Comment

Show Buttons
Hide Buttons