Search code examples
azureminimizeazure-qna-maker

Minimizing Azure QnA Chat bot to Website

I have recently made a chat bot and am seeking to further edit the components of the interface by adding a minimizing button and an anchor so that the Chatbot is statically secured to the bottom right of the page (which is the most common area). This is made with the Azure QnA framework, so I'm not sure how much I can really edit..

Is there any way that I can access the code so that I can minimize the chat bot or add a button?

I will show a photo to make things more clear: minimizing image

Solution

  • The webchat interface that you are using is coming from Microsoft GitHub's project named BotFramework-WebChat available here.

    If you look at the documentation provided on GitHub's main page, you will see that you have several ways of implementing your webchat on your website, from the easiest iframe inclusion to more detailed solutions.

    If you want to customize your interface, I would suggest an implementation like the following in your hosting page code:

    <!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
  </head>
  <body>
    <div id="bot"/>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
    <script>
      BotChat.App({
        directLine: { secret: direct_line_secret },
        user: { id: 'userid' },
        bot: { id: 'botid' },
        resize: 'detect'
      }, document.getElementById("bot"));
    </script>
  </body>
</html>

    Here you are declaring the chat and using js and css files from the CDN.

    All the code for the webchat component is in the js, so you should get it, make your customization and host it on your side to have what you want.

    From the CDN it is minified, but you can rebuild the file using the process described here: https://github.com/Microsoft/BotFramework-WebChat#building-web-chat

    For example an interface that we made from those sources:

    Webchat sample

    For this example, we have customized the header in js to :

    • add 1 button to maximize
    • add 1 button to close

    Then the image of the buttons is made with CSS