Workers in healthcare, education, finance, retail—and pretty much everywhere else—are clocking in by logging on from home. This has opened up opportunities for developers to build tools to support hybrid work for every industry, not just their own. One of those opportunities is in the area of ChatOps, the use of chat applications to trigger workflows for operations. As software developers, we’ve been doing ChatOps for years—sending commands from inside a chat space to deploy applications, restart servers, and open pull requests. However, IT professionals aren’t the only ones collaborating through virtual meetings and team platforms these days. In 2020, everybody else started doing it, too. Webex is one of the major hybrid work platforms. I was particularly interested in what ChatOps looked like in Webex. How hard is it to build a chatbot for it? As it turns out, it’s not that hard at all. In this post, we’re going to walk through the steps for building a simple Webex chatbot with Node.js and the . We’ll be able to add our chatbot to a Webex team space or direct messaging space. As long as the chatbot’s backend server is running, the chatbot will be able to respond in Webex—to you, or to anyone else in the team space. webex-node-bot-framework For this first iteration, we’ll run the backend for our chatbot locally with an ngrok tunnel so that Webex messages can get to our server for the chatbot to provide a proper response. In a follow-up post, we’ll containerize our chatbot backend server and deploy it to the cloud. Are you ready? Let’s go! What will our demo chatbot do? I’m in a lot of virtual meetings. Sometimes, meetings devolve into a frenzy of acronyms, buzzwords, and blah-blah-blah. I suffer from imposter syndrome and don’t always feel like I can hang when it comes to contributing to the blah-blah-blah. Enter our corporate-speak generator chatbot: . In Webex, I can send a message to Buzz and ask him to give me an action or a thingy: Buzz When I ask for an action, Buzz sends me back phrases like “benchmark virtual paradigms” or “innovate dynamic functionalities.” Perfect to throw out there when asked what our team’s next steps ought to be. When I ask for a thingy, Buzz responds with a phrase like “monitored mobile ability” or “stand-alone-holistic instruction set.” Just what I need when we’re talking about the feature set for our 2.0 MVP. Set up Webex To get started, you’ll first need to set up a . From there, you can log into the and proceed to . Click on . Select the option to . Webex account Webex Developer portal My Apps Create a New App Create a Bot Choose a display name and username for your chatbot. You can also upload a custom icon for your chatbot. I’ve decided to go with . this one You can also enter a description for your chatbot. Then, click on . Add Bot Copy your . We’ll use it in a later step. Bot access token Next, go to your . Click on the plus sign and . Webex spaces Create a space Choose a name for your space. Then, invite Buzz to the space by entering your chatbot’s email, which is the chatbot username you chose, followed by . In our example, that’s . @webex.bot buzz-phrase-generator@webex.bot The first time you add a chatbot to your space, Webex may tell you that this user is new to Webex and you will need to invite them. If that’s the case for you, then click on . Invite Click on . You now have a Webex space with Buzz. Create Build the Chatbot Backend Now, let’s give our chatbot some brains. You can follow along step by step, or see the full source code at the . Our chatbot backend will be a basic Node.js Express server which we will build on our local machine. GitHub repository Initialize Project and Add Dependencies First, we’ll initialize a new Node.js project for our server, using . In a terminal on your local machine, do the following: yarn ~/$ mkdir buzz-server

~/$ cd buzz-server

~/buzz-server$ yarn init


yarn init v1.22.10
question name (buzz-server): buzz-server
…

success Saved package.json
Done in 9.85 Next, we’ll add our dependencies. ~/buzz-server$ yarn add webex-node-bot-framework express faker@5.5.3 Our chatbot uses the , which abstracts away the complexities of Webex bot creation, allowing you to build chatbot interaction through a Node.js server and event listeners. webex-node-bot-framework Express We also use the package (locked to version , since the latest version no longer works as expected). This library is often used for generating fake test data, but its API includes a set of calls for generating company buzz phrases. That’s what Buzz will use to generate the phrases we’re looking for. faker 5.5.3 In our project folder, we create a single file called . Let’s walk through what the code does, one section at a time. index.js Walkthrough of index.js After requiring all of our third-party packages, we initialize a new Express server (called ) and add in the middleware for parsing JSON. app Framework configuration and startup Next, we set our framework configuration options: var config = {
  webhookUrl: process.env.WEBHOOK_URL,
  token: process.env.BOT_ACCESS_TOKEN,
  port: 8080
}; The framework needs the following pieces of information to initialize the connection with Webex: : This is the URL where we will deploy our chatbot backend, and it’s where Webex will send requests whenever events involving our chatbot occur. For this post, we’ll deploy locally and tunnel with to get a URL. webhookUrl ngrok : This is the bot access token Webex provided to us when we created our bot. When our chatbot backend starts up, it will use this token to authenticate with the Webex API in order to register for Webex team events involving our chatbot. token We’ll provide both of these values as environment variables when we start up our server. Next, we start the framework: var framework = new Framework(config);
framework.start(); Responding to What the Chatbot Hears With our framework started, we can begin registering event listeners. While the framework provides several you can listen for, we’re mainly concerned with the function. With this function, our server waits for Buzz to hear a specific phrase (or match a phrase with a regular expression), and then it directs Buzz to respond in a certain way. events hears() This is a simple implementation of how to tell Buzz to respond when he receives a message with the word “action” in it: framework.hears(/action/i, (bot) => {
  bot.say("Here's an action for you...", faker.company.bs());
}); We call with a regular expression to match for any message that includes the word “action” (case insensitive). When Buzz receives a matching message, we call the bot’s function. In this case, we get our corporate-speak phrase by calling from the faker package. hears() say() company.bs() We listen and respond similarly for messages to Buzz that include the word “thingy”: framework.hears(/thingy/i, (bot) => {
  bot.say("Try this thingy...", faker.company.catchPhrase());
}); Those are the key listeners we want to have in place, but it’s also helpful to have a fallback response for any messages that don’t match our above cases. For the full implementation details, check out the . GitHub repository Express Server Startup Lastly, we tell Express to let the framework handle incoming requests on the root path, and we start up our server: app.post('/', webhook(framework));

var server = app.listen(config.port, () => {
  console.log(`Listening on port ${config.port}...`);
}); With done, it’s time to start it up and test! index.js Test chatbot backend Since we’re running our backend server locally, we’ll use ngrok so that Webex can tunnel in to reach our server at port . 8080 Start ngrok In a terminal window, run the following command: ~$ ngrok http 8080 The ngrok process will run, and your window will look something like this: ngrok by @inconshreveable (Ctrl+C to quit)

Session Status online
Account Alvin Lee (Plan: Free)
Version 2.3.40
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://98-161-186-106.ngrok.io -> http://localhost:8080
Forwarding https://98-161-186-106.ngrok.io -> http://localhost:8080

Connections ttl  opn    rt1   rt5   p50   p90
              0    0   0.00  0.00  0.00  0.00 Copy the HTTPS forwarding URL provided by ngrok. Start server Now, we’re ready to run . However, we’ll need to provide two environment variables at runtime. We’ll need to specify our , which is our ngrok forwarding URL, and we’ll need to specify our , which Webex provided to us when we registered our bot. node index.js WEBHOOK_URL BOT_ACCESS_TOKEN Because ngrok needs to keep running, we’ll work in a new terminal window. Start up your chatbot backend server with the following command: ~/buzz-server$ WEBHOOK_URL=https://98-161-186-106.ngrok.io \
               BOT_ACCESS_TOKEN={ENTER-YOUR-TOKEN-HERE} \
               node index.js

Listening on port 8080... Test in Webex With our server listening, we can go to our space in Webex and send a message, making sure to mention so that our backend server receives the message. @Buzz It works! Oh, Buzz, I needed you in last week’s board meeting. Take it further The framework also supports from Webex. Your chatbot responses can be nicely formatted and even contain additional actions which users can click on. We can give Buzz a little bit more polish with just a basic : Buttons and Cards AdaptiveCard More serious use cases Sure, quirky, little chatbots like Buzz are fun and simple to build. However, the simplicity of the framework opens up many opportunities for building powerful and genuinely useful chatbots. Some possibilities for the chatbot backend include: Reaching out to third-party services (such as financial market data, flight status APIs, or social media platforms) to fetch specific data for the chatbot to return in the Webex space. Integrating with communications and productivity APIs. Imagine being able to do this in Webex: Hey, @PagerBot, send a text and an email to @JPeralta to tell him that “Daily standup started 5 minutes ago.” Triggering internal organization actions like generating financial reports or gathering yesterday’s school attendance numbers. Interacting with IoT or smart assistants. We’ve only scratched the surface with Buzz. Conclusion In our demo mini-project for this post, we deployed our chatbot locally. Whether your chatbot is Buzz or the next hybrid work game changer, what do you do when you actually want to deploy your chatbot to the cloud? In our follow-up post, we’ll Dockerize our chatbot backend server as a container image. Then, we’ll deploy it to the cloud. Get ready for it. As more people—across all industries—are working from home, hybrid work platforms are seeing an explosion in use. With that increased use comes opportunities to build tools—like chatbots—to support the hybrid work revolution. If you’re going to build ChatOps tools for Webex, using the will get you up and running quickly. webex-node-bot-framework First published here

Fetch

What is a Data Reliability Engineer?

How to Get SSL/HTTPS for Localhost

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - No No No Nodejs

Nominated for 2022 - HackerNoon Contributor of the Year - Jobs

Nominated for 2022 - HackerNoon Contributor of the Year - Npm

Nominated for 2022 - HackerNoon Contributor of the Year - Kubernetes

Nominated for 2022 - HackerNoon Contributor of the Year - Engineering

Too Long; Didn't Read

Build Your Own Chatbot Using Webex and NodeJS

Build Your Own Chatbot Using Webex and NodeJS

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Breaking Free From Going Solo: Learning to Collaborate on API Development with Postman

10 Best AI Chatbot Builder for Your Business in 2022

44 Stories To Learn About Bots

46 Stories To Learn About Chatbot Development

5 Common Use Cases of a WhatsApp Chatbot

5 eCommerce Tech Trends That Will Drive Sales Online in 2019

Breaking Free From Going Solo: Learning to Collaborate on API Development with Postman

10 Best AI Chatbot Builder for Your Business in 2022

44 Stories To Learn About Bots

46 Stories To Learn About Chatbot Development

5 Common Use Cases of a WhatsApp Chatbot

5 eCommerce Tech Trends That Will Drive Sales Online in 2019

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps