SUSI Webchat is capable of sending Url, location and carousel responses. In this blog, we will learn about implementing these same responses in SUSI viber bot. We can send text response instead of carousels but it doesn’t attract users and cause difficulties in understanding. In SUSI webchat for query “news” it sends a URL of an article from BBC news which looks like this:

If we send a query “Where is Singapore” it sends location using map response and it looks like this:

For web search SUSI sends carousels which look like this:


To implement these responses in SUSI Viber bot we will send a post request with specific types to the send_message endpoint of Viber chat API https://chatapi.viber.com/pa/send_message. Url, location and carousel responses will be implemented in following way:

• Url:
  For receiving URL in Viber bot we will post a request with type:’url’ and media:’url to be sent here’. A request will look like code given below.

var options = {
                method: 'POST',
                url: 'https://chatapi.viber.com/pa/send_message',
                headers: headerBody,
                body: {
                    receiver: req.body.sender.id,
                    min_api_version: 1,
                    sender: {
                        name: 'Name of your public Account here',
                        avatar: 'Avatar url for your public account here'
                    },
                    tracking_data: 'tracking data',
                    type: 'url',
                    Media: 'http://www.website.com/go_here'
                },
                json: true
            };
request(options, function(err, res, body) {
                   if (err) throw new Error(err);
                   console.log(body);
               });

• Location:
  For receiving location with a map on Viber bot we will post a request with type: ‘location’ and location: { lat: latitude, lon: longitude }. In location response, we have to send latitude and longitude values of location to be shown on the map. A request will look like code given below:

var options = {
                method: 'POST',
                url: 'https://chatapi.viber.com/pa/send_message',
                headers: headerBody,
                body: {
                    receiver: req.body.sender.id,
                    min_api_version: 1,
                    sender: {
                        name: 'Name of your public Account here',
                        avatar: 'Avatar url for your public account here'
                    },
                    tracking_data: 'tracking data',
                    type: 'location',
                    location: {
                           lat: latitude,
                           lon: longitude
                       }
                },
                json: true
            };
request(options, function(err, res, body) {
                   if (err) throw new Error(err);
                   console.log(body);
               });

Location response in Viber bot will look like this:

• Carousel:
  Carousels are horizontal tiles which can be scrolled to view content on them. To receive carousels on Viber bot we will post a request with type: ‘rich_media’ and
  

  rich_media: {
                     Type: "rich_media",
                     ButtonsGroupColumns: 6,
                     ButtonsGroupRows: 6,
                     BgColor: "#FFFFFF",
                     Buttons: buttons
         }
  

  In rich media “ButtonsGroupColumns” is the number of columns per carousel content block,  “ButtonsGroupRows” is the number of rows per carousel content block and buttons is an array of buttons which contains content to be shown in carousels. A request will look like code given below.

  var options = {
                  method: 'POST',
                  url: 'https://chatapi.viber.com/pa/send_message',
                  headers: headerBody,
                  body: {
                      receiver: req.body.sender.id,
                      min_api_version: 1,
                      sender: {
                          name: 'Name of your public Account here',
                          avatar: 'Avatar url for your public account here'
                      },
                      tracking_data: 'tracking data',
                      type: 'rich_media',
                         rich_media: {
                             Type: "rich_media",
                             ButtonsGroupColumns: 6,
                             ButtonsGroupRows: 6,
                             BgColor: "#FFFFFF",
                             Buttons:{
                                 Columns: 6,
                                 Rows: 3,
                                 Text: 'text to be shown in carousel',
                                 "ActionType": "open-url",
                                 "ActionBody": 'link to be opened on clicking on carousel block',
                                 "TextSize": "medium",
                                 "TextVAlign": "middle",
                                "TextHAlign": "middle"
                            }            
                         }
                  },
                  json: true
              };
  request(options, function(err, res, body) {
                     if (err) throw new Error(err);
                     console.log(body);
                 });
  

  Carousel response from Viber bot will look like this:

  

  We have successfully implemented URL, location and carousel response in Viber bot.

  If you want to learn more about Viber chat API refer to https://developers.viber.com/docs/api/rest-bot-api/

  Resources

  Viber Chat API: https://developers.viber.com/docs/api/rest-bot-api/
  Claudia bot builder platform to build Viber bot: https://claudiajs.com/tutorials/viber-chatbot.html
  Viber bot by using PHP: http://thedebuggers.com/build-viber-chat-bot-6-simple-steps/