Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Connecting QnAMaker FAQ Bot with Social Channels using Azure Bot Framework

DZone's Guide to

Connecting QnAMaker FAQ Bot with Social Channels using Azure Bot Framework

In this blog will learn how to connect FAQ Bot integrated with Azure Bot service with Social channel, Web Chat & make it live for users.

· Cloud Zone ·
Free Resource

See why enterprise app developers love Cloud Foundry. Download the 2018 User Survey for a snapshot of Cloud Foundry users’ deployments and productivity.

Pre-requisites

  • Microsoft Azure Subscription
  • Dropbox Account (optional)

Quick Overview

In our last article we learn how to integrate QnAMaker knowledge base with Azure Bot service. For enabling Bot to interact with Live users, we need to connect our bot to some social channel. We need to deploy it on public channel in order to meet our business goal of having a FAQ Bot.

Web App Bot's service presents this feature to enables us to connect our FAQ Bot to different channels like Skype, Cortona, Twilio, Facebook, and more.

We will connect our FAQ Bot with Web Chat channel.

Connecting to Web Chat Channel

For brevity of this blog, I have created a QnAMaker Knowledge base for MVP FAQ web page. Also integrated the same to Azure Bot service through Web App Bot using Azure Portal.

Go to Microsoft Azure Portal.

I created a Resource group name, ‘mvpfaqbott’ & clubbed Web App bot service, as seen in below image.

Now for connecting this Bot with social channels,

Go to Azure Bot Service, Click on Web App Bot =>‘mvpbott’

Image title

Navigate under BotManagement=>Channels section


Image title

As you can see Web Chat channel is active & it’s by default.

As we need to connect our FAQ Bot with Web Chat channel, we need channel keys for authorizing & connecting with Bot. Will embed Web chat channel in to our application and deploy to Azure web app to make it live for users.

Click on ‘Get bot embed codes’ OR on Edit to open Web chat configuration page.

Image titleClick on highlighted link to proceed

Image title

It will present Web Chat Configuration page. Here we can:

  • Get Secret keys used for authentication
  • Regenerate Secret keys.
  • Get Embed code to be added in our application to incorporate Web Chat channel in to our application.
  • We can have different keys for different applications, by clicking +Add new site
  • We can disable, delete any created site, to stop Web chat channel functionality.

Image title

Copy Embed Code and any one secret key.
Add a secret key into embed code.

Image title

Adding & Deploying Embed Code to the Application

Create a file name index.html and add Web Chat channel embed code in to it.

Image title

Deploy this file to Web App using deployment options available. For this blog we will be deploying Index.html file, embed with Web Chat channel code using Dropbox.
Click on App Service Setting =>All App service setting.

Image title

This will present with Azure Web App setting blade. Click on Deployment=>DeploymentOptions=> Select Dropbox

Image title

Authorize Windows Azure with Dropbox. And then select the application folder we need to publish or deploy. That’s it. This will deploy our file with Web Chat embed code on Web App, making it live for User.

Read here in detail implementation process of publishing files to Azure using Dropbox & OneDrive. Once you're done with the deployment, open this link.

Image title

Great! our MVP FAQ Bot is Live on Public Cloud Web URL.
Let’sChat with Bot.

Image title

Notice, the Bot reply with display name, configured through Bot Service. We can change it and on the fly this will get reflected in our Web App Channel, For changing, Open Web App Bot in Azure portal. Navigate to Bot Management => Settings.
Provide the desired name in the Display name text box. This could be with minimum 4 characters to maximum 35 characters, and can be changed any number of times.

For this blog, change it to ‘display-demo’ and click on Save.

Image title

Now open up our Web application hosting Web Chat channel in browser, and test with chatting with Bot. The newly configured name can be seen.

Image title

Also, we can give a logo or profile picture for our FAQ Bot. This helps in channel like Skype and Cortana wherein profile picture is displayed during conversations.
Steps to achieve this remain same: Navigate to Bot Management=>Settings. As of now it expects only .png format with maximum 30K file. For this blog, I used a LinkedIn Logo. Upload this sample image in Icon section.

Click on Save.

Image title

You can see this log when you try connect with different channels or profile enabled chats.
For example,

Image title

Note: Above profile picture of LinkedIn is only for demo purpose.

Now lets got to QnAMaker portal to update our knowledgebase, and verify the change in our deployed application with Web Chat channel.
Open qnamaker.ai=>My Services=>MVPDemoFAQservice => Click on Edit

Add a Question & Answer by clicking +Add new QnA pair under knowledgebase Tab
Question:Greetings
Answer:Greetings, Welcome to MVP FAQ Demo Bot!
Click on Save and retrain.
And then Click on Publish button to make it available for outer world.

Image title


Once done with publishing the changes in Knowledgebase,
Open up our Web application hosting Web Chat channel in browser, and test change chatting with Bot.
We can see the added QnA pair Live!
No deployment nothing. Just change in knowledgebase, and change gets reflected.
This the power of QnAMaker and Azure Bot service.

Image title

You may see a message ‘No good match in FAQ’ in above chat window. This message is default response message of QnAMaker when any response or answer is not found in associated Knowledgebase. We can change this default message by any Custom message of our choice. 

Summary

In this blog we learned how seamlessly we connected our Bot with social channels, Web Chat. Also made it live for end users. We updated our backend data and with no efforts it was live. We also saw different settings & configuration offered by Azure Bot service.

The next article .Net application development company will teach you about how to keep up our FAQ Bot knowledgebase sync with live chats.


Cloud Foundry saves app developers $100K and 10 weeks on average per development cycle. Download the 2018 User Survey for a snapshot of Cloud Foundry users’ deployments and productivity. Find out what people love about the industry standard cloud application platform.

Topics:
azure ,frame work ,cloud ,faq ,bot ,QnAmaker ,social media

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}