Remote work and virtual collaboration allow businesses to rethink customer experiences: video conferencing. Video conferencing enhances customer interactions by providing face-to-face communication, fostering stronger relationships, and enabling real-time collaboration. As a web developer, I'm always looking for ways to improve user experience without adding too much extra work for myself.
That's why I'm thrilled to introduce my latest project, a smart scheduling bot that I've built using the Vonage Video API and Vonage AI Studio. The Vonage Video API makes it easy for developers to add video to their applications. It enables embedding real-time, high-quality interactive video, messaging, screen-sharing, and more into web and mobile apps.
This bot provides a ton of value for clients, significantly enhances user experience, and showcases the powerful capabilities of the Vonage Video API and AI Studio!
In this blog post, I'll walk you through the making of this bot, the challenges I faced, and the solutions I discovered.
If you would like to skip ahead and get right to deploy it, you can find all the code for the app on GitHub.
To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.
The NodeJS server structure is the following:
index.js file where the server code is defined. In this file we will define the routes and call the Meeting API endpoint.
An .env file where we set up the credentials to authenticate with Vonage.
If you don’t have it, install ngrok on your local machine. Then run the command to start the tunnel, specifying the port number of the local server you want to expose (ngrok http 3000). Ngrok will generate a unique URL that allows external access to your local server. We will need it on the next step when calling webhooks from Vonage AI.
Vonage Video API allows you to integrate real-time, high-quality interactive video meetings into your web apps. The Video API is ideal for those who want more customization and flexibility. Let's set up a browser-based video call web application using the Vonage Video API.
Go to the Vonage dashboard and log in/ sign up.
Click "Applications" in the left menu.
Click "Create a new application" at the top and give it a name.
Copy the application ID for future reference.
Click "Edit" and "Generate public and private keys." The private key will be downloaded.
Scroll down and enable "Video (new)" for the application.
Click "Save changes" at the bottom of the page.
Note your API Key and API Secret for your project. Be sure to store these credentials securely, as you will use them later when configuring your application.
Video Capability Toggle in Vonage API Dashboard
To authenticate you need to pass your apiKey, sessionId and token. Below you will find an example of creating a session with @vonage/video library:
const { Auth } = require("@vonage/auth");
const { Video } = require("@vonage/video");
const applicationId = process.env.APP_ID;
const privateKey = process.env.PRIVATE_KEY_PATH;
if (!applicationId || !privateKey) {
console.error("You must define APP_ID and PRIVATE_KEY_PATH in the .env file");
process.exit(1);
}
const credentials = new Auth({
applicationId: applicationId,
privateKey: privateKey,
});
const options = {};
const videoClient = new Video(credentials, options);
const createSessionandToken = async () => {
const session = await videoClient.createSession({ mediaMode: "enabled" });
const sessionId = session.sessionId;
const token = videoClient.generateClientToken(sessionId);
return { sessionId: sessionId, token: token, apiKey: applicationId };
};
const generateToken = (sessionId, role) => {
const token = role
? videoClient.generateClientToken(sessionId, { data: role })
: videoClient.generateClientToken(sessionId);
return { token: token, apiKey: applicationId };
};On the front end, the code receives credentials from the Node.js server to connect to the session, create the publisher, publish the stream, and listen for any incoming subscribers.
const apikey = "<%= apiKey %>";
const sessionId = "<%= sessionId %>";
const token = "<%= token %>";
const publisher = OT.initPublisher("stream-container", {
insertMode: "append",
width: "100%",
height: "100%",
});
const session = OT.initSession(apikey, sessionId);
session.connect(token, (error) => {
if (error) {
console.error("Error connecting: ", error);
} else {
session.publish(publisher, (error) => {
if (error) {
console.error("Error publishing: ", error);
}
});
}
});
// Handle the streamCreated event
session.on("streamCreated", function (event) {
subscriber = session.subscribe(event.stream, "containerId", {
insertMode: "append",
width: "100%",
height: "100%",
});
});
Vonage AI Studio is a conversational AI platform built to handle complex interactions between businesses and customers, lowering operational costs and significantly improving service levels. It currently offers the following channels: telephony agents (for voice bots), WhatApp and SMS agents (for text based bots) and HTTP agents. I chose to use Whatsapp because it’s one of the most popular messaging platforms and offers different types of messages to interact with the user such as buttons, list messages and many others.
See full details on Vonage AI Studio capabilities.
To get started, access the Vonage (dashboard)[dashboard.nexmo.com] and locate the AI Studio section. Next, click on the "Create An Agent" button located at the top right corner of the page. From the available options, choose "Whatsapp Bot" and you'll be presented with a list of templates to choose from. For the purpose of this blog post, select the "from scratch" option, followed by the Inbound Agent. Inbound agents are activated when they receive a message from the customer, while the outbound agent initiates a new conversation using WhatsApp Templates.
The picture below shows what we’re going to build. We will use different types of Vonage AI Studio nodes such as collect inputs, conditionals, webhooks and send messages. Keeping the diagram in mind, the bot starts with an incoming message from the user and replies with a collect input node. Let’s dig into the process in the next sections.
Overview of the Flow in AI Studio
To initiate the meeting creation process, our WhatsApp bot will prompt the user to provide specific information. The first block we’ll utilize is the "Collect Input" block, which enables us to gather data from the user. Within this block, we can ask the user to specify the meeting type (one-time or long term), and recording options (auto_recording or not). By capturing this information, we can tailor the meeting experience based on the user's preferences.
For the meeting type, we use WhatsApp reply buttons so the user doesn’t need to type the message but only click the desired type of meeting:
Example of WhatsApp Reply ButtonsThe next is to dispatch the bot based on the previous reply. To do that, we use a conditional node.
Example of Classification NodeBased on the previous answer (which is saved on the meeting type parameter), the bot has two branches: instant and long term meeting. For a long term meeting we need an extra step, where we ask the user to type the meeting expiration date.
Then, we use the same logic for the recording options, we will use a Collect Input Node with Reply Buttons.
One input we need to gather during our conversation is the expiration date for long term meetings. Using another "Collect Input" block, we prompt the user to enter an expiration date for their meeting. To proceed, let's dig into the concept of entities within AI Studio. An entity serves as a pre-defined database comprising a collection of values and their synonyms. These values are essential for AI Studio to extract and validate specific data from user inputs expressed in natural language. When exploring the entity list, available in the documentation, we'll come across familiar categories such as contacts, dates, email addresses, phone numbers, and more.
Now, the critical aspect at this stage is to select the appropriate entity type for our purpose, which in this case is "@sys.date". By designating the entity as a date type, the agent will intelligently parse the user's input as a date, facilitating its utilization in subsequent steps, particularly within the Webhook Node.
Once we have collected all the necessary information from the user, we need to connect our WhatsApp bot with the Node.js server we created earlier. To achieve this, we utilize the webhook block provided by Vonage AI. This block allows us to make HTTP requests to external endpoints, enabling seamless integration between different systems. By configuring the webhook block to call the relevant endpoints of our Node.js API, we can pass the collected meeting details and trigger the creation of the meeting. In this case we are configuring a POST request to https://{baseUrl}/api/video/room with the body object sending the parameters collected during the bot flow.
A POST Request Using Webhook Node
One last step is to configure the response mapping on the webhook. In this case, the API is returning a JSON object with a URL property:
Response Mapping Example
In conclusion, the utilization of the Video API and Vonage AI in the meeting scheduler exemplifies the ease and user-friendliness of creating self-service, customizable video conferencing experiences for businesses and their customers. By leveraging the Video API, developers can effortlessly create video meetings with configurable options, such as recording options, and more. Combining this functionality with Vonage AI opens up exciting possibilities, allowing users to interact with the bot through popular messaging platforms like WhatsApp.
You can find the full code on GitHub.
Did you enjoy this tutorial? Did you get stuck? Reach out on X, formerly known as Twitter, or the Vonage Community Slack(we even have a channel for AI Studio). We’re excited to see what you’re building with Low Code!
){kind=small}
Enrico is a former Vonage team member. He worked as a Solutions Engineer, helping the sales team with his technical expertise. He is passionate about the cloud, startups, and new technologies. He is the Co-Founder of a WebRTC Startup in Italy. Out of work, he likes to travel and taste as many weird foods as possible.
