{"id":12124,"date":"2018-01-23T07:09:00","date_gmt":"2018-01-23T07:09:00","guid":{"rendered":"https:\/\/viewmyprojects.com\/winwirewp\/?p=12124"},"modified":"2024-04-02T05:21:39","modified_gmt":"2024-04-02T05:21:39","slug":"build-chatbot-azure-bot-services-microsoft-cognitive-services","status":"publish","type":"post","link":"https:\/\/viewmyprojects.com\/winwirewp\/blog\/build-chatbot-azure-bot-services-microsoft-cognitive-services\/","title":{"rendered":"How to build a Chatbot Using Azure Bot Service"},"content":{"rendered":"\n<p>In today\u2019s modern era of Artificial Intelligence and Serverless computing, \u201cBOT\u201d is one of the most buzz term. We have been using BOTs for quite a long but still, if the term is unfamiliar to you, you might ponder what it is and how it works precisely. In simple terms, BOT is an intelligent and smart program designed to perform robotized\/routine tasks.&nbsp;<a href=\"https:\/\/medium.com\/@Brian.johnson_62680\/how-ai-and-cognitive-systems-are-transforming-customer-experience-85a25b9814eb\" target=\"_blank\" rel=\"noreferrer noopener\">Chatbots powered by AI is helping enterprises transform their customer experience<\/a>.<\/p>\n\n\n\n<p>In this article, I am going to articulate on how to fabricate a QnA (FAQ) ChatBot leveraging Azure BOT Service and QnA Maker \u2013 a Microsoft Cognitive service&nbsp;and consume the chat Bot in SharePoint Online environment.<\/p>\n\n\n\n<p>QnA Bot effectively processes questions from the end user, searches up for a matching question (require not be exact) in the knowledge base, retrieves the appropriate response with the highest score and sends it back to the end client. Despite the fact that the question asked by a person isn\u2019t the very same way it is put away in the information base, the BOT is sufficiently wise to coordinate the answer in the source and give answers in like manner. However, if the BOT doesn\u2019t discover a match in the mapped knowledge base, it will answer back with a pre-defined \u201cNo match message\u201d.<\/p>\n\n\n\n<p>As stated above, I will consume QnA Maker Cognitive Service to build the QnA Bot. Briefly, QnA Maker is a web-based Microsoft Cognitive Services that trains AI to reply to any questions in a conversational pattern. It basically provides an FAQ data source\/knowledge base with a predefined set of FAQ data, which can be queried from BOT\/ Application. The knowledge base content is stored in Azure Storage by the QnA Maker tool.<\/p>\n\n\n\n<p>Now we have a brief understanding of what is QnA Bot and QnA Maker service. Let\u2019s follow the below steps and build the BOT, and consume it in SharePoint Online. This will give us the practical handle of the process.<\/p>\n\n\n\n<p>The first step in this process is to create and nourish the FAQ Data source\/ knowledge base for the BOT<\/p>\n\n\n\n<p>Let\u2019s navigate to&nbsp;<a href=\"https:\/\/qnamaker.ai\/\" target=\"_blank\" rel=\"noopener\">QnA Maker web portal<\/a>&nbsp;and login with your Microsoft Live account to create a QnA service and the knowledge base. In the portal, click on \u201cCreate a new service\u201d menu link. This will open a form to fill in the details of the service<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Name of the service<\/li>\n\n\n\n<li>FAQ data source\/knowledge base in the below format<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li>You can directly enter the public website URL of an existing FAQ page<\/li>\n\n\n\n<li>You can upload a file\/questionnaire with questions and answers by clicking on \u201cSelect file\u201d. The information about restricted file format and size is displayed in the form.<\/li>\n\n\n\n<li>You can do either of the above (a or b) or both or multiple websites or multiple files or you don\u2019t have to do either and just type questions and answers from scratch. It\u2019s completely up to you. You can create questions and answers post creation of the service.<\/li>\n<\/ol>\n\n\n\n<p>Once the service is created, you will be presented with the below screen<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"298\" src=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/1-768x298-1.webp\" alt=\"\" class=\"wp-image-18577\" srcset=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/1-768x298-1.webp 768w, https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/1-768x298-1-300x116.webp 300w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/figure>\n\n\n\n<p>Follow the steps as mentioned in the above figure<\/p>\n\n\n\n<p>Step 1: Click on \u201c+Add new QnA pair\u201d. This will enable the placeholder to add new questions and answers to the knowledge base<\/p>\n\n\n\n<p>Step 2:Add question and answer pairs<\/p>\n\n\n\n<p>Step 3:Click on \u201cSave and retrain\u201d. This will extract data and train the knowledge base<\/p>\n\n\n\n<p>Step 4:This will publish and push the changes. Before publishing the changes, verify if you are getting correct responses from your knowledge base<\/p>\n\n\n\n<p>To verify the knowledge base, click on \u201cTest\u201d link in the left navigation. Let\u2019s consider the question \u201cCan you help me finding a manual related to semiconductors?\u201dLets\u2019 type the question as \u201cfind manual\u201d. Even though this doesn\u2019t match the exact question what is stored in the knowledge base, the BOT is intelligent enough to find a match and reply back. If the BOT doesn\u2019t find any suitable answer in the knowledge base, it extracts all answers which it thinks are relevant and list down the questions to the end user.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"381\" src=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/2-768x381-1.webp\" alt=\"\" class=\"wp-image-18576\" srcset=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/2-768x381-1.webp 768w, https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/2-768x381-1-300x149.webp 300w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/figure>\n\n\n\n<p>Post verification of the knowledge base you can publish it. Once published, a summary screen of the count of questions and answers will be displayed. Even you will be provided an option to view the differential data of your knowledge base.<\/p>\n\n\n\n<p>Click on Publish in the summary screen will deploy the knowledge base for the service and the HTTP endpoint for the service will be exposed. The end-point can be consumed in a Bot\/Application to process a question and respond accordingly.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"282\" src=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/3-768x282-1.webp\" alt=\"\" class=\"wp-image-18575\" srcset=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/3-768x282-1.webp 768w, https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/3-768x282-1-300x110.webp 300w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/figure>\n\n\n\n<p>In the above figure, we can see the end-point for the service. Also, this provides the knowledgebase ID and subscription key for the service. Make a note of these IDs, which will be required in the further steps while creating the BOT<\/p>\n\n\n\n<p>So, we are done with the creation of the knowledge base for the BOT.<\/p>\n\n\n\n<p>Let\u2019s go ahead and create the BOT using Azure BOT Service<\/p>\n\n\n\n<p>Login to&nbsp;<a href=\"https:\/\/portal.azure.com\/\" target=\"_blank\" rel=\"noopener\">Azure Portal<\/a>, search for \u201cWeb App BOT\u201d in the Azure marketplace and click on \u201cCreate\u201d<\/p>\n\n\n\n<p>This will open-up a form and ask us to enter the details for the BOT. Enter the details accordingly and select the template for the BOT as \u201cQuestion and Answer\u201d. You can select the pricing tier as F0 as we are creating a Demo Bot.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"455\" src=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/4-768x455-1.webp\" alt=\"\" class=\"wp-image-18574\" srcset=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/4-768x455-1.webp 768w, https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/4-768x455-1-300x178.webp 300w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/figure>\n\n\n\n<p>Once you enter all required details, click on Create, which will allow the BOT to use QnA template. Before testing the BOT, we need to feed the Knowledge Base ID and Subscription Key (that I mentioned before) of my QnA Service to the BOT.<\/p>\n\n\n\n<p>Navigate to the Demo BOT App that you created in the above step. To feed the QnA service details to the BOT, click on \u201cApplication Settings\u201d link from the left links blade.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"483\" src=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/5-768x483-1.webp\" alt=\"\" class=\"wp-image-18573\" srcset=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/5-768x483-1.webp 768w, https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/5-768x483-1-300x189.webp 300w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/figure>\n\n\n\n<p>In the above figure, you can see keys:QnAKnowldegebaseIdandQnASubscriptionKey, enter the values (that we have noted before) for the keys and click on Save.<\/p>\n\n\n\n<p>We are done with the set-up and all configurations. Now we can test the BOT in web chat. To do so, click on \u201cTest in a Web Chat\u201d from left links blade and let\u2019s consider the same question that we have used for verifying the knowledge base \u2013 \u201cCan you help me finding a manual related to semiconductors\u201d.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"465\" src=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/6-768x465-1.webp\" alt=\"\" class=\"wp-image-18572\" srcset=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/6-768x465-1.webp 768w, https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/6-768x465-1-300x182.webp 300w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/figure>\n\n\n\n<p>Now we are all set with the BOT. We can also download the source code of the BOT and do customizations. Click on \u201cBuild\u201d link in the left blade and download the source code.<\/p>\n\n\n\n<p>Below is the screenshot of the downloaded source code of my sample BOT.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"316\" src=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/7-768x316-1.webp\" alt=\"\" class=\"wp-image-18571\" srcset=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/7-768x316-1.webp 768w, https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/7-768x316-1-300x123.webp 300w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/figure>\n\n\n\n<p>Here, I have added a custom Dialog class \u201cCustomQnADialog\u201d. And, I have added the Knowledge base ID and Subscription key in the Dialog code.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1001\" height=\"70\" src=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/8.webp\" alt=\"\" class=\"wp-image-18570\" srcset=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/8.webp 1001w, https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/8-300x21.webp 300w, https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/8-768x54.webp 768w\" sizes=\"auto, (max-width: 1001px) 100vw, 1001px\" \/><\/figure>\n\n\n\n<p>In the above dialog code, if we set the last optional parameter \u2018top\u2019 to some value greater than 1, the QnA Maker utilizes active learning to learn from the utterances that come into the framework. In this process, QnA Maker responds with different pertinent QnAs for low certainty situations and requests that end user stamp the right response. The end user feedback is logged and models are refreshed once the system has assembled enough illustrations. Users will be able to see enhanced response based on the feedback received. However, if this value is not set or set to 1, the Bot responds back the answer with the highest score.<\/p>\n\n\n\n<p>Let\u2019s say we need to respond back to questions with a multi-line of description and images, we can trim the data accordingly in the knowledge base. Accordingly, we can customize the Dialog Code of the Bot to manipulate the data received from the knowledge base and respond back to end user.<\/p>\n\n\n\n<p><strong>Follow the below steps to integrate the BOT in SharePoint Online<\/strong><\/p>\n\n\n\n<p>Navigate to the above created Web App Bot in the Azure Portal. Click on \u201cChannels\u201d in the left blade. This Bot can be connected to all channels displayed over here. This also gives the provision to configure web chat. Click on \u201cGet Bot embed codes\u201d, will open a pane with the embed code.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"672\" height=\"372\" src=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/9-1-672x372-1.webp\" alt=\"\" class=\"wp-image-18568\" srcset=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/9-1-672x372-1.webp 672w, https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/9-1-672x372-1-300x166.webp 300w\" sizes=\"auto, (max-width: 672px) 100vw, 672px\" \/><\/figure>\n\n\n\n<p>The iframe src URL has a secret token parameter. Click on \u201cShow\u201d for the first secret code, copy it and append it to the iframe src URL<\/p>\n\n\n\n<p>Now, add a content editor or script editor web part in a page in your SharePoint Online portal. Embed the above iframe code in the web part and publish the page. We are all done now! The QnA bot will be now rendered in the page on your SharePoint Online site.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"672\" height=\"220\" src=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/10-672x220-1.webp\" alt=\"\" class=\"wp-image-18569\" srcset=\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/10-672x220-1.webp 672w, https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/10-672x220-1-300x98.webp 300w\" sizes=\"auto, (max-width: 672px) 100vw, 672px\" \/><\/figure>\n\n\n\n<p>We can also customize the display of the BOT to expand and collapse accordingly.<\/p>\n\n\n\n<p>Finally, we are done! Is it not interesting? We can make it even more interesting by integrating other fabulous Azure Cognitive Services like Vision, Speech and Language and Machine Learning. So, now you can have your own QnA bot up and running and play around with the Bot.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In today\u2019s modern era of Artificial Intelligence and Serverless computing, \u201cBOT\u201d is one of the most buzz term. We have been using BOTs for quite a long but still, if the term is unfamiliar to you, you might ponder what it is and how it works precisely. In simple terms, BOT is an intelligent and&hellip; <a class=\"more-link\" href=\"https:\/\/viewmyprojects.com\/winwirewp\/blog\/build-chatbot-azure-bot-services-microsoft-cognitive-services\/\">Continue reading <span class=\"screen-reader-text\">How to build a Chatbot Using Azure Bot Service<\/span><\/a><\/p>\n","protected":false},"author":13,"featured_media":16688,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_eb_attr":"","_uag_custom_page_level_css":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-12124","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","entry"],"acf":[],"featured_image_src":"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/How-to-build-a-Chatbot-Using-Azure-Bot-Service-graphic.webp","author_info":{"display_name":"Chinmoyee","author_link":"https:\/\/viewmyprojects.com\/winwirewp\/author\/chinmoyee\/"},"views":3554,"uagb_featured_image_src":{"full":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/How-to-build-a-Chatbot-Using-Azure-Bot-Service-graphic.webp",800,440,false],"thumbnail":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/How-to-build-a-Chatbot-Using-Azure-Bot-Service-graphic-150x150.webp",150,150,true],"medium":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/How-to-build-a-Chatbot-Using-Azure-Bot-Service-graphic-300x165.webp",300,165,true],"medium_large":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/How-to-build-a-Chatbot-Using-Azure-Bot-Service-graphic-768x422.webp",750,412,true],"large":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/How-to-build-a-Chatbot-Using-Azure-Bot-Service-graphic.webp",750,413,false],"1536x1536":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/How-to-build-a-Chatbot-Using-Azure-Bot-Service-graphic.webp",800,440,false],"2048x2048":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/How-to-build-a-Chatbot-Using-Azure-Bot-Service-graphic.webp",800,440,false],"post-thumbnail":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/How-to-build-a-Chatbot-Using-Azure-Bot-Service-graphic.webp",800,440,false]},"uagb_author_info":{"display_name":"Chinmoyee","author_link":"https:\/\/viewmyprojects.com\/winwirewp\/author\/chinmoyee\/"},"uagb_comment_info":0,"uagb_excerpt":"In today\u2019s modern era of Artificial Intelligence and Serverless computing, \u201cBOT\u201d is one of the most buzz term. We have been using BOTs for quite a long but still, if the term is unfamiliar to you, you might ponder what it is and how it works precisely. In simple terms, BOT is an intelligent and&hellip;&hellip;","_links":{"self":[{"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/posts\/12124","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/comments?post=12124"}],"version-history":[{"count":2,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/posts\/12124\/revisions"}],"predecessor-version":[{"id":18599,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/posts\/12124\/revisions\/18599"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/media\/16688"}],"wp:attachment":[{"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/media?parent=12124"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/categories?post=12124"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/tags?post=12124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}