Cognitive Services QnA Maker – Make embed code for Bot Client App

Using Microsoft Azure Cognitive Services QnA Maker is super easy way to create chatbot app.
I wrote two articles [Cognitive Services QnA Maker – Create knowledge base from online FAQ] and [Cognitive Services QnA Maker – Setting Azure Bot Service] before this article. Next, this article describes making embed code for the chatbot client app.

・Test in web chat

Web app bot created when the knowledge base publish process has done has a test feature in the Azure portal. So if input the phrase as same as the phrase was used at [Test] console in the QnA maker portal page when the knowledge base created, can confirm the same answer is replied on the test console of Web app bot test feature of the Azure portal.

・Web Chat Channel

And already has one channel in Channels list in Azure console. We will create a chatbot client app use this channel.

・Get embed codes

Azure web app bot Channels list has auto-generate feature of web bot embedded code, use [Get bot embed codes] link to get code for a client web app.

・Set secret code to iframe parameter

Press [Copy] link next to the text of [Embed code] text area, and paste to anywhere you want. Then press either [Show] links to show secret code and copy secret code and replace ‘YOUR_SECRET_HERE’ in the last of [src] attribute of [iframe] tag of copied text for completing bot embed code creating.

Check both [Enable Preview] checkbox and [Block attachment upload from user] checkbox, then press [Copy] link of Embed code text area and keep anywhere you want. At last, press [Done] button at the bottom.
*[Enable Preview] check is not required, If you want to test the preview feature before the feature generalizes, it may be checked.

About takao

I'm Microsoft MVP since June 2010.