Question

我在Microsoft Azure中创建了一个Web App bot（Node.js），并且能够成功部署。但我在提供的代码中甚至在在线代码编辑器中都找不到任何css文件或scss文件。有没有人有这方面的经验？

谢谢

Answer 1

你想要准确定型的是什么？

Azure Bots的工作原理是将它们连接到Skype，Facebook Messenger，SMS等现有渠道，或者从自定义应用程序进行REST调用。机器人本身并没有风格的界面。

将聊天框架嵌入到可以设置样式的静态页面中的最简单方法是添加：

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

有关详细信息，请参阅此documentation。但请注意，此方法会在HTML源代码中公开您的密钥，并允许其他开发人员在您的网页上嵌入您的机器人。

Answer 2

我正在使用iframe将僵尸程序包含在我的网站上。但我想自定义颜色和其他类似的东西。

当您在网站中使用iframe时，这意味着它将加载网站https://webchat.botframework.com/，并且样式表文件也会加载到botframework服务器站点中，但是您的。

如果您需要自定义样式，最简单的方法是遵循指南https://github.com/Microsoft/BotFramework-WebChat#easy-in-your-non-react-website-run-web-chat-inline，自定义您自己的样式表，并利用botframework-webchat js lib在您的网站中构建bot应用程序。

如果您的网站是由React构建的，则可以按照https://github.com/Microsoft/BotFramework-WebChat#medium-in-your-react-website-incorporate-the-web-chat-react-component自定义bot应用程序的UI组件。

Answer 3

尝试一下

<!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>

无法找到编辑Microsoft Azure Web Bot样式的方法

3 个答案: