how to make a voice enable chatbot

The advent of AI has made voice-enabled chatbots and voice assistants part of our lives. Imagine the likes of Siris and Google Assistants for your phones, Alexa and Google Home for your house. These aforementioned systems are nothing but voice-enabled chatbots.

We have extensively discussed building text based-chatbots and integrating them in your websites. In this post, we will be discussing how to make a voice-enabled chatbot.

Step by step guide to making a voice-enabled chatbot

Pre-requisites

We will be using two tools to build the voice chatbot, Jovo, and Dialogflow.

Jovo is an open-source framework that lets you build voice apps for Amazon Alexa and Google Assistant. Dialogflow is a conversational interface builder by Google. Both of these tools are free to use so you can try your hands at them right away.

Let’s jump into the crux of the article now.

Install Jovo

Install Jovo in your system by this command:

$ npm install -g jovo-cli

Proceed to create a new project in Jovo. You can use the following method:

$ jovo new <directory>

We will be using a simple example of a HelloWorld project to start with. Just enter the directory name as HelloWorld.

Configuration

Open your HelloWorld project in Visual Studio code editor.  We will be using Webhook for local development. You can check the server configuration in Index.js file.

voice-enable chatbot server configuration
Server configuration in Index.js file.

You can understand the app logic, intents, and configuration by scanning through the App.js file.

Intents are your triggers to perform certain actions on launch, initialization, and replies. You can find some basic intents set up in the handler, “LAUNCH”, “HelloWorldIntent” and “MyNameIsIntent”. 

App logic and configuration

Jovo’s V1 framework project contains ‘models’ folder and it has an en-US.json file. This file contains the language model. The language model gives the structure to create platform-specific models, which can be used to pass on the data to NLU platforms, such as Dialgflow and Alexa.

It contains generic elements such as intent, input types et cetera and a few platform-specific elements. You can find more information here.

Passing the data to Dialogflow

To train your chatbot and deploy it, you need to pass on the data to Dialogflow. First, you need to create and initialize Google Action folder. You can find it under models > platform > googleAction. The ‘googleAction’ folder contains the ‘dialogflow’ folder with all the files needed to deploy the agent to Dialogflow Console.

$ jovo init googleAction

This will create an App.json file which contains ‘googleAction’ object. Here, ‘nlu’ stand for Natural Language Understanding and points to the NLU platform, Dialogflow.

Next, you need to create platform-specific files based on App.json file and models folder.  Use this command:

$ jovo build

This will create new folder /platforms/googleAction/dialogflow. You need to deploy this to further use in Dialoflow console, use command:

$ jovo deploy

This will create a new file called  dialogflow_agent.zip. We will use this file in Dialogflow Console. This makes it very easy to import the language model to your Dialogflow agent.

The googleAction file

Creating Dialogflow agent

Now, login to your Dialogflow Console and create a new agent by clicking the ”Create Agent ” button.

In Dialogflow, an agent is your NLU module which converts inputs into actionable data. You can name your agent “HellowWorldAgent” and click on “Create button”.

Creating a Dialogflow agent

“HellowWorldAgent” agent will be created with two intents, namely “Default Fallback Intent” and “Default Welcome Intent”. These are two basic intent for welcoming and fallback action.

Intents in Dialogflow

Next, import your dialogflow_agent.zip file into Dialogflow agent.

  • Click on the ‘+’ button beneath your agent’s name  > Export and Import > RESTORE FROM ZIP > SELECT FILE
  • Upload the dialogflow_agent.zip file from Jovo.
  • Click on Restore and Done after successful restore.
Importing your Jovo agent in Dialogflow

This will create new intents based on the imported zip file. The “HelloWorldIntent” and “MyNameIsIntent” will start showing up here. 

The Webhook URL will also be automatically filled in the Fulfillment section. Fulfillment allows data to be exchanged from any service/backend over Webhooks.  It gathers information and dynamically passes on to the service/backend.

Imported intents from Jovo

Integrate with Google Assistant

Next, we need to integrate with Google Assistant to exchange voice messages with the newly created voice chatbot. Go to Integrations > Google Assistant > Integration Settings. 

You will find everything imported from the file already present there, this is the power Dialogflow brings. Click on Test > Continue to test your voice chatbot. This will take you to Actions on Google console. 

You will find your new Action on Google project HelloWorldAgent here. Your voice chatbot is now almost ready for testing. The Actions for Google platform needs to communicate with your local environment. Just run the local server an create a link to it. Use the below command to run:

$ jovo run

Test your voice-enabled chatbot

For best practice, first tets your voice chatbot using Dialogflow and then using the built-in simulator of the Actions for Google Console.

For Dialoglflow:

Type “say hi” > default response – <speak>Hello World! What’s your name?</speak>”

Type “Alex” > default response – <speak>Hey Alex, nice to meet you!</speak>

Testing the voice chatbot in Dialogflow

Now, test this using Google simulator. Click on Talk to my test app or just click on the input field and press enter. Just respond using the mic button to input your answer. The bot will reply by your response thread: “Hey name, nice to meet you!”.

Testing the voice chatbot in Google Simulator

The sample conversation goes like:

Google: “Alright. Here’s the test version of my test app. Hello World! What’s your name?”

You: “Alex”

Google: “Hey Alex, nice to meet you!”

That is it. Your voice-enabled chatbot is ready. Now you can create customized intents and responses to create a more versatile voice chatbot.


Subscribe here to get the good stuff — we solemnly swear to deliver top of the line, out of the box and super beneficial content to you once a week.

At Kommunicate, we are envisioning a world-beating customer support solution to empower the new era of customer support. We would love to have you on board to have a first-hand experience of Kommunicate. You can signup for free and start delighting your customers right away.

Author

Full-Stack Developer