The complete guide to creating your bot in Webex space from dev to prod

Hi, My name is Sushil Kumar Gupta, I’m working as a Full Stack Developer at VideoWiki associated with GetBoarded Technologies. In this post, I will be discussing how we integrated our platform VideoWiki as a video wiki bot into Webex space from scratch (i.e. You can learn more about the integration in the VideoWiki-Webex integration page).

VideoWiki-Webex bot

So, before creating a bot, we need a Webex developer account. you can create one following the Webex developer portal.

The content includes the below following points:

• Create/Provision a Bot on Webex
• Implement & Customize Bot functionality
• Key points for deployment
• Submit your Bot to Webex App Hub

Create your first Bot on Webex

Once you create your developer account, on the same page click on “Start Building Apps” it will open a “Create a New App” page.

Click on Create a Bot, You’ll be asked to provide some basic information about the bot i.e. Bot name, Bot username, Icon, and Description. then Click Add Bot.

once you add the bot you will get the bot Id, Username, and Bot Access Token.

Note: Make sure to copy and save the Bot Access Token in a secret file because this access token will be used to authenticate your bot with the Webex REST API. In case you lost the access token you need to regenerate the new one by selecting “Regenerate Access Token”

Congrats, till this step you have successfully created your Webex bot on Webex Spaces.

Implement & Customize Bot Functionality

Let’s implement our bot to make it function in real life. Several simple starters existed when Webex bot functionality was first made available. The most liked one was sparkbotstarter which was created by Victor Algaze, using a framework called Flint, which was created by Nick Marus.

The Bot we will be creating is based on the new, rebranded Webex-node-bot-framework, added with a few fun new tricks, like posting a message using Webex Buttons and Cards.

Getting Started

• Clone the GitHub repository Webex-bot-starter — For quick setup, this is a very simple Webex node.JS bot application that serves as a template to be further extended. It features the Webex-node-bot-framework (i.e. specified above) that simplifies development for Webex bots by abstracting away some of the complexity of the API calls and registering for events. you may use your comfortable code editor to open the project.
• Download and Install https://ngrok.com/download — We need a local web server that publicly serves your machine into a web server by opening a local port to the Internet. thus, ngrok is a cross-platform application that enables developers to expose a local development server to the Internet with minimal effort.
• Start the ngrok — To start the ngrok open the terminal on the same directory where ngrok executable file exists after unzipping, then execute the following command $ ngrok http 8000 . once its running note down the public web address tunneling to your localhost:8000

underlined public address

• Next, copy the .env.local file to a file called .env Edit .env with the following values:

BOTTOKEN — Set this to the token for the bot that you got while creating the bot on the developer portal

PORT — Set this to the port you set when you started ngrok (i.e.: 8000)

WEBHOOKURL — Set this to the web address that you copied from ngrok

.env file content

• Save all the changes. Finally, on your project directory install all the libraries by running $ npm install and then start the application by running $ npm start
• Once all is done. open Webex client, Add the Bot by entering the bot username in the search bar (for 1:1 Interaction) OR you can add the bot in your group space by adding new people.
• If everything was done correctly, your bot should have greeted you with some instructions when it was added to the space. Now you can implement your bot on top of the starter application.

VideoWiki-Webex bot

Key points for deployment

for deployment, we need resources from where our bot will be accessible from all over the world for that we can use Cloud Computing Platforms such as Microsoft Azure, and AWS or you can also use an nginx server. you can deploy your bot as usual following the documentation of the specific Cloud Services.

The key point to note while deploying your bot is that, since your bot is going to deploy on a cloud server, the public web address will point to the resources you have created with the specified endpoint. so you can remove the WEBHOOKURL and PORT from the .env file of your bot.

After removing both keys from the .env file, don’t forget to remove the same from the configuration line in the index.js file.

Now, If the configuration object you pass to the Framework constructor function doesn’t contain a webhookUrl field, the framework falls back automatically to the server endpoint.

Submit your Bot to Webex App Hub

Once, you successfully deployed your bot the last step is to submit your bot to Webex App Hub. before submitting the apps please consider reading the guidelines/ submission criteria provided by Webex App Hub Submission Process

Note: Submissions are optional. Read Webex bot guidelines to see if promoting our app on Webex App hub makes sense.

To submit your bot go to your App dashboard, select the one you want to submit, and click on “Submit to Webex App Hub”. then fill in the necessary information, and then select “Submit” at the bottom of the page.

After submitting your app, a new support ticket will be created and someone from Cisco will reach out to you after reviewing your submission.

Summary

This blog covered the whole process from provisioning a bot to Submitting to the Webex App hub. We tried to make the process/steps as simple as we can. The above following points can save an enormous amount of time for developers and they can focus on the business logic. Hope this whole process is helpful and that you liked it.

A Special thanks to Aman Bishnoi and all my team members who helped me throughout the process.

you can connect with us on LinkedIn :)

Aman Bishnoi — https://www.linkedin.com/in/aman-j-bishnoi/

Sushil Gupta — https://www.linkedin.com/in/sushil-kumar-gupta/

Thank You!

Helpful Resources

• This bot starter application is based on the Webex-node-bot-framework: https://github.com/webex/webex-bot-node-framework
• Intro to the Webex for Developer platform: https://developer.webex.com/docs/platform-introduction
• Webex Bots explained: https://developer.webex.com/docs/bots
• Guide for creating Webex Buttons and Cards in messages: https://developer.webex.com/docs/api/guides/cards

References

• https://developer.webex.com/blog/from-zero-to-webex-chatbot-in-15-minutes-updated-for-2021
• https://developer.webex.com/blog/from-zero-to-webex-teams-chatbot-in-15-minutes
• https://github.com/WebexCommunity/webex-node-bot-framework