Website Chatbot Window Plugin for Microsoft QNA Maker

By Stephen Garside on 3/20/2018

Microsoft QNA Maker is a great way to create and maintain a simple chat-bot for your website. 

To implement your QNA chat-bot you will need a website chat-window plugin, and thats where my 'QNA Client' comes. 

QNAClient is a free, fully customisable chat-bot window that links directly to your QNA Maker endpoint (provided by Microsoft when you publish your bot).

Customising the QNAClient Chat-bot Website Plugin

It is possible to customise QNAClient through the use of parameters that are passed in when initialising the chat website plugin. The following is a list of the customisable parameters together with an explanation of what they do:-

  • title - The title displayed in the header of the chat window.
  • minimumAcceptableAnswerScore [Default : 50] - This score is used to calculate whether the top answer returned by the QNA Maker bot is acceptable. If all the answers returned have a score lower then the 'noAnswer' phrase is displayed in the chat stream.
  • pageContainerId [Optional] - If present, the html for the QNAClient will be inserted into the page element with this id.
  • pageContainerClass [Optional] - If present, the html for the QNAClient will be inserted into the page element with this class. N.B. if an id or class name is not provided then the QNAClient will be appended to the <body> tag. 
  • theme [Default: "default"] - At the time of writing there is only 1 theme, however, more are planned, or you can easily create your own. The SCSS stylesheet is primed to extend!
  • noAnswerPhrase ["Sorry I don't understand."] - This parameter works together with the 'minimumAcceptableAnswerScore'. This phrase is added to the chat stream if your bot cannot provide a suitable answer.
  • somethingGoneWrongPhrase ["Mmm, something went wrong there, try me again!"] - This phrase is added to the chat stream if something goes wrong when communicating with your bot.
  • loggingEnabled [true] - When set to true, debug information is written to the browser console.
  • displayImagesInline [false] When true, images returned within bot answers are displayed as block elements on their own line. If set to false, then images are displayed inline (i.e. within the text).
  • botPrimingPhrase ["Hi"] - When the QNAClient chat window is displayed initially, this phrase is passed to your bot and the response is displayed in the chat stream.
  • logoUrl ["/qna/logo.png"] - This is the url of the logo displayed chat window header. The image should be 50px x 50px and in .png format.
  • buttonToolTip ["Start a chat"] - The tooltip displayed when a user hovers over the chat launcher button.
  • position ["bottom-left"] - The position of the chat launcher button and the chat window within the website. Options are bottom-left, bottom-right, top-left, top-right.
  • inputPrompt ["What would you like to say?"] - Placeholder text displayed in the user input text box.
  • busyMessage ["Hold on a mo..."] - This message is displayed over the chat stream whilst a user question is submitted and a awaiting a response.

Adding the Website Chatbot Window Plugin to Your Website

Adding the QNAClient chat-bot window to your website is easy, requires minimal coding experience and should only take a couple of minutes. Follow these simple steps:-

  1. Create a folder at the root of your website called /qna .
  2. Next, copy the files from https://github.com/garsidestephen/qnaclient to your new /qna folder (excluding the dev folder).
  3. Finally, add the code snippet below to each web page you want the chatbot window to appear on (substituting the Url and Subscription keys with those provided by Microsoft when you publish your QNA chat-bot).

<script src="/qna/qna.min.js"></script>

<script> CreateQNAClient("SubscriptionKey", "URL Key", { "theme" : "default" }); </script>

Adding QNA Maker as an Interactive Chat-bot Within a Blog / News Article

Embedding your QNA Maker chat-bot within a blog or news article is a great way to make an article more interactive.  It is possible to run QNAClient in two modes - as a chat window (default), or embedded within an article using 'response chips' for user interaction - try the following interactive demo:-

To run QNAClient in this way you need to change the theme parameter to "chips-only" when you initiate the bot e.g.

<script>CreateQNAClient("SubscriptionKey", "URL Key", { "theme": "chips-only", "botPrimingPhrase": "Hi" })</script>

Adding Chip Responses to Your QNA Maker Chat-bot

Response Chips are simple buttons below a chat-bot response which offer the user interaction choices to proceed through the conversation without having to type. QNAClient supports response chips by looking for a certain pattern within your chat-bot's response. As an example, lets use the embedded chat-bot above.

The initial response is:-

"This free QNA Maker chat-bot window website plugin can be used in two modes. What mode would you like me to tell you about?"

The user is then offered two 'response chip' options:-

"Chat Window Mode" or "Chips Only Mode"

e.g.

 

 

 

To include these chips, add the following string at the end of your response:-

##chips[Chip Button Text|Question to ask bot][Some Other Chip Button Text|Another question to ask bot]##

 

So, in QNA Maker your full response will look something like this:-

You can include any number of chips in your response - each chip should have its own button text and the question you want the 'chip to ask' when it is clicked.  Don't forget to include answers to each chip's question in your QNA Maker chatbot.

Download Free QNA Maker Chat-bot Window

You can download this free javascript based QNA chat-bot window for your website from Github by clicking the button below.

Download Free QNA Chat-bot Window for Websites