Creating A QnA Maker FAQ Bot And Integrating It To Your Web App

QnAMaker FAQ API is used to train your Azure bot to answer customer queries, by creating an endpoint on QnA Maker API and configuring it in your bot.

In this blog, we shall learn how to create a QnA Maker FAQ Bot and also learn how to integrate QnA Maker API bot in your web app.
  1. Sign up on https://qnamaker.ai/ with your Microsoft account and click "Create New Service."

    QnAMaker

  2. Now, give your QnA Service a name and provide the URL of the FAQs page where you want to fetch the FAQs from. You can also provide the list of FAQs in an Excel or a text file. Then, click "Create".

    QnAMaker

  3. Now, you can add any FAQ which is not fetched from the sources you have provided. Click "Add QnA pair."

    QnAMaker

  4. Now, click "Save and retrain". You can click "Test" on the right side and test your QnA Maker Bot.

  5. Now, click "Publish". Once it is published, it will provide the below details. These below details will be used to create a QnA bot on the Azure portal (Knowledgebase Id and Subscription Id).

    QnAMaker

  6. Now, go to Azure portal and create a new Web App Bot. Select Bot template as "Question and Answer".

    QnAMaker

  7. Click "Create" and a new QnA Bot is created. 

  8. Now, update the SubscriptionId and Knowledge base Id in the Application Settings. 

    QnAMaker

  9. Update your QnA Knowledgebase Id and SubscriptionKey as created in step 5.

    QnAMaker

  10. Now, click on "Test Web Chat" to check whether your bot is able to answer the FAQs from the source or not.

    QnAMaker

  11. Click Channels and click "Edit Web Chat" and copy the embed code text and replace your secret key.

    QnAMaker
    <iframe src='https://webchat.botframework.com/embed/qnbo123?s=YOUR_SECRET_HERE'></iframe>

  12. Embed this iframe within your Web Application so that you will be able to display this iframe based on some conditions and you can directly interact with the bot within your web app.

    QnAMaker