Creating a QnA bot

A question and answer bot (QnA bot) provides predefined answers to user questions, similarly to Frequently Asked Questions with the added interactivity permitted by a conversational agent. A QnA bot can handle many support issues, leaving only the complex ones to your other support channels.

Below you will see how you can create such a bot in a matter of minutes using Botfuel Dialog and Botfuel QnA. This bot can be connected to any messaging platform , but for the purposes of our example here we will show how to connect it to Botfuel WebChat.

Introduction

The architecture we will set up is pretty standard for a chatbot, and consists of three main parts, as shown below:

Summary diagram

Importantly, each part is replaceable without affecting the other parts.

Botfuel Dialog

Botfuel Dialog is our open-source bot-building framework. Here we will see only a fraction of its capabilities, because our bot is simple. We developed it with modularity in mind, so it can be extended with external features, such as Botfuel QnA.

Botfuel QnA

Botfuel QnA is a powerful web service that uses advanced Natural Language Processing to match questions from users to specific answers. It also allows you to easily manage the content of your QnA. Additionally, it provides insights about the performance of this matching.

Botfuel WebChat

Botfuel Webchat allows you to add a chat interface connected to your bot to any website. Although we will use Botfuel WebChat here, it is very easy to build a similar bot on any other messaging platform by using the corresponding adapter in Botfuel Dialog.

We will begin by adding content to Botfuel QnA and then build the bot using Botfuel Dialog. Finally we will connect it with Botfuel WebChat.

Create the content on Botfuel QnA

If you don't already have a Botfuel App, please follow the first part of our Getting Started.

With a Botfuel App created, make sure you can locate your app credentials : App Id, App Key, App Token. You'll need them soon!

In the Services section of the app page, access the QnA interface.

Here you can fill the questions and the corresponding answers for your bot.

QnA portal

In the chat panel on the right, you can test at any time how questions will be answered. To open the panel, click on the chat icon on the bottom right.

Chat panel

Build the bot using Botfuel Dialog

With the Botfuel QnA populated with questions, we are ready to create the bot using Botfuel Dialog.

Install Botfuel Dialog

Create a new file named package.json:

{
  "name": "howto-qna",
  "version": "0.0.1",
  "description": "Sample qna bot using botfuel-dialog and qna",
  "scripts": {
    "start": "botfuel-run",
  },
  "dependencies": {
    "botfuel-dialog": "latest"
  }
}

Then run npm install.

Configure your bot

Store your configuration in a file named botfuel-config.js:

module.exports = {
  adapter: 'botfuel',
  qna: {},
};

The parameter adapter is set to botfuel to specify to use Botfuel Webchat.

The empty object qna is enough to tell the bot to use Botfuel QnA.

Start your bot

On your server, start the bot using the app credentials shown on the app page :

BOTFUEL_APP_TOKEN=<...> BOTFUEL_APP_ID=<...> BOTFUEL_APP_KEY=<...> npm start botfuel-config

Configure Botfuel WebChat

Now that the bot is running, we will embed it in a web page using Botfuel Webchat.

From your app's page, access the WebChat configuration panel to provide the URL of your server. By default, the bot listens to HTTP on port 5000.

WebChat configuration

If you want to test the bot on your personal computer, make sure that it is reachable from the outside. If needed, you can use reverse port forwarding, ngrok or a similar service.

Test

Create a sample client web page containing your App Token:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>

<body>
  Webchat
  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  <script>
    BotfuelWebChat.init({
      appToken: '<YOUR_BOTFUEL_APP_TOKEN>',
      size: { width: 500, height: 600 },
      startOpen: false,
      startFullScreen: false
    });
  </script>
</body>

</html>

Then open that page in your browser and your bot will answer!

Demo on Botfuel WebChat

With the bot ready, you could also add tests and configure other adapters, if needed. For more help, check out our sample QnA bot!