Press enter to see results or esc to cancel.

Integrating Chatbot to Qiscus Chat SDK

Chatbot is very popular in modern chat communication today. Having capability of automatically reply message by a system and displaying various rich type messages by the system will be very common use-case which people expected nowadays in every smart platform. The most popular use case of chatbot such as customer service bot for supporting e-commerce (conversational commerce), buying ticket online, booking hotel online, concierge, news subscription, banking services, etc.

Those various use case of chatbot basically can be broken down into 3 fundamental functionalities that any chat system needs to support:

  1. Displaying various type of rich and interactive messages
  2. Webhook for communicating from chat engine to bot brain (engine) to be processed.
  3. REST API for communicating from bot brain (engine) to chat engine

All of those 3 functionalities are supported in Qiscus Chat SDK!

Displaying Rich Type Messages

Qiscus provide various type messages besides the traditional text and media (image, video) types. We provide built-in account linking, postback, card, button link, and system message to support any functionalities needed for the chatbot to show to customers. Furthermore, if you want really custom UI and type messages you can actually create all your own using our chat SDK! If you need advanced usage of our SDK, we can happily help you on supporting that though.

The way it displays those built-in type messages by rendering pre-defined type messages from our REST API. You can check more related to our REST API here.

Some examples of our type messages:

Postback button

You can render this type of postback button by sending REST API with certain payload:

payload: {
    "text": "What do you think about the services?",
    "buttons": [
        {
            "label": "Love it",
            "type": "postback",
            "payload": {
                "url": "http://somewhere.com/button1",
                "method": "post",
                "payload": {
                    "value": "love"
                }
            }
        },{
            "label": "Like it",
            "type": "postback",
            "payload": {
                "url": "http://somewhere.com/button2",
                "method": "post",
                "payload": {
                    "value": "like"
                }
            }
        },{
            "label": "Nothing",
            "type": "postback",
            "payload": {
                "url": "http://somewhere.com/button3",
                "method": "post",
                "payload": {
                    "value": "nothing"
                }
            }
        },{
            "label": "Dislike",
            "type": "postback",
            "payload": {
                "url": "http://somewhere.com/button4",
                "method": "post",
                "payload": {
                    "value": "dislike"
                }
            }
        }
    ]
}

Once you post those payloads in post_comment method on REST API you will be able to create postback post and make Qiscus Chat SDK render postback messages in your system.We have others example on our built-in rich messages display you can use to render message from your chatbot to help better interaction to user:

We have others example on our built-in rich messages display you can use to render message from your chatbot to help better interaction to user:

 

Webhook to Communicate from Chat Engine to Chatbot Brain

We provide Webhook to let your server receive any event that happens on Qiscus Chat SDK for your certain app_id. So, basically every time chat engine receive any message, we are forwarding those data to your server that being specified in the dashboard.

For more details regarding the payload that being sent to your server, you can check our documentation regarding Webhook here.

Your bot engine will get the messages from our chat engine and then process the data accordingly. After processing the data, you will need the last part which is communicating back to chat engine to be able communicating with the user who sends query.

REST API to Communicate from Chatbot Brain to Chat Engine

Communicating back from your bot engine to chat engine will require the interface that accepting some data to be handled and rendered accordingly. We have that covered by providing REST API to let you post message from your bot engine back to our chat engine server.

After you post your data to our API, we will render those message nicely in our build-in user interface:


Like the example above, once a user chooses “Provider lainnya”, bot engine will process the options and post another message to our chat engine and our chat engine will render that accordingly. You don’t need to handle all the real-time connection and UI update since all those things related to maintaining connection already covered by our Chat SDK. You can just focus on your bot engine to serve the needs of each query and make sure can return expected answer to the user.

The data flow of these will be illustrated like this:

Hopefully, this article can enlighten how easy it is to integrate any Chatbot to our Chat SDK. Please do not hesitate to contact us if you have any further questions or need any form of help on integrating our Chat SDK with your awesome bot!

Comments

Leave a Comment

Show Buttons
Hide Buttons