How to build a chatbot for WebEx teams?

Building a chatbot to add to your WebEx Teams application's team space is super easy. Given the easy to use APIs and the well written documentation on the same anyone can get started on building a chatbot for WebEx with little to no experience in building chatbots.

Check out this article on From Zero to WebEx Teams Chatbot in 15 Minutes to get started right away.

While this article can be used fully on its own accord, it is written as primarily written as an extension for the above article, with much detail on what mistakes to avoid and an attempt to explain the not not-so-intuitive parts of the process. The only per-requisite is to have the WebEx Teams application installed on your device.

Here's a simple step-wise process to build your first WebEx chatbot -
1. Create a new bot

Click on create bot and enter your email ID to sign-in to your webex account on the Cisco Webex developer forum. Once you have signed it, you would be re-directed to a page that looks like this,

On this page, enter the details of your bot.

1.1 Bot Name - The Name of the bot that people will use to call it

Example : mybot

1.2 Bot Username - Like any other user, the bot needs to have a username so that people can add it to their team space.

Example : mybot   (@webex.bot)

1.3 Icon - The icon that would be displayed next to your bot name. Here you can either choose 1 of the 3 default icons or upload an image of your own of dimension 512 x 512 px.


1.4 Description - A brief description of what your bot does, how it benefits it's users and how to get started on using the bot.

Once these details have been filled in click on the "Add Bot" button to create the bot.

Congratulation! You just created your first WebEx bot!

As you click on the "Add Bot" button, a token ID for your bot would be generated. Copy this token ID and store it in a file as we would need this token ID to implement functionality to your bot and add it to spaces.

2. Set up a Local Web Server to Host the Bot

Now that we have our bot set up, the next step would be to host the bot on a server where it can communicate over HTTP.

Ngrok is one such application that allows us to open up a local port on the computer to the internet.

In order to setup ngrok, download the application from here. Once downloaded, unzip the files into a folder and run the .exe file. Here we need to select a port to open up to the internet.

In order to find the list of open ports on your device, you can use the command - 

        netstat -an

 It will give you a list of active CONNECTIONS on your computer the STATE they are in. Among the active ports, select a port that is in the listening state with the local home address listening for TCP packets,

 The number in from of the IP address is the port number we are interested in. Now that you have the open port, run the following commands in the ngrok exe shell based on your operating system -

iOS -

        ./ngrok http 7001

Windows -

        ngrok http 4040

7001 and 4040 are the ports that are LISTENING for TCP on your local machine.

On running this command your webhook URL for HTTP and HTTPS would be generated,

Now the last step would be to download the chat-bot project template and firing it up with the correct variable values.

Download the chat-bot project template here. Click on "Clone/Download" to download the zip and unzip the files into a folder. Once this is finished, open the "config-template.json" file and replace the follow values,

{
 "webhookUrl": "The HTTP URL we go on running ngrok",
 "token": "The bot token we created in the first step",
 "port": "The open port we selected in the second step"
}

Once these values have been replaced with the values we generated earlier, rename the "config-template.json" to "config.json".

Once this is done our bot is ready to be launched.

In order to launch the app follow these steps -

1. Open a command prompt in the folder where the project template files are stored and run the command -

        npm start

2. Go to your WebEx teams app and add the bot to a space by using the bot username by clicking on "Add People" option like we add other people.

Now you should be seeing a message from your bot greeting you and giving you a list of things you can do with the bot.

CONGRATULATION!

You have successfully created and launched your first WebEx chat-bot. Have fun playing with it and asking it questions. Now if you want to make any changes to the functions and features of the bot, go to the index.js file and modify the file to your hearts content.