0

I have created a Web App bot (Node.js) in Microsoft Azure and am able to deploy successfully. But I can't find any css file or scss file in the code provided or even in the online code editor. Does anyone have any experience in this?

Thank you

Shagun Mistry
  • 41
  • 1
  • 9

3 Answers3

3

What are you trying to style exactly?

Azure Bots work by connecting them to existing channels like Skype, Facebook Messenger, SMS, etc or making REST calls from a custom application. The bot itself doesn't have an interface to style.

The simplest way to embed chat frame into a static page that you can style is to add:

<iframe src="https://webchat.botframework.com/embed/YOUR_BOT_ID?t=YOUR_TOKEN_HERE"></iframe>

See this documentation for more information. However, do note that this method will expose your secret key in the source of your HTML and allow other developers to embed your bot on their pages as well.

Joel Guerra
  • 4,760
  • 4
  • 12
  • 26
2

I am using iframe to include the bot on my website. But I wanted to customize the colors and other such things.

As you are using iframe in your website, which means it will load the site https://webchat.botframework.com/ and the stylesheet file is also loaded in the botframework server site, but yours.

IF you need to customise the style, the easy way is to follow the guide https://github.com/Microsoft/BotFramework-WebChat#easy-in-your-non-react-website-run-web-chat-inline, customise your own stylesheet, and leverage botframework-webchat js lib to build bot application in your website.

If your website is built up by React, you can follow https://github.com/Microsoft/BotFramework-WebChat#medium-in-your-react-website-incorporate-the-web-chat-react-component to customise UI components of bot application.

Gary Liu
  • 13,758
  • 1
  • 17
  • 32
0

Try this

<!DOCTYPE html>
<html>
  <head>
    <script
      crossorigin="anonymous"
      src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"
    ></script>
    <style>
      html,
      body {
         height: 100%;
      }

      body {
        margin: 0;
      }

      #webchat {
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="webchat" role="main"></div>
    <script>
      window.WebChat.renderWebChat(
        {
          directLine: window.WebChat.createDirectLine({
            token: 'YOUR_DIRECT_LINE_TOKEN'
          }),
          userID: 'YOUR_USER_ID',
          username: 'Web Chat User',
          locale: 'en-US',
          botAvatarInitials: 'WC',
          userAvatarInitials: 'WW'
        },
        document.getElementById('webchat')
      );
    </script>
  </body>
</html>
Sudhir smart
  • 1