如何修改嵌入SharePoint的Azure托管Luis Bot背景色

首先直接说结论：通过原生iframe是没办法直接修改嵌入的Web Chat背景色的，这是因为浏览器的同源策略限制，你无法跨域操作iframe内部的DOM元素和样式。不过不用慌，有更简单的方法实现你的需求，完全不用克隆源码重新部署Azure上的Bot。

推荐方案：用Web Chat脚本嵌入替代iframe #

Azure Bot Framework的Web Chat支持直接通过脚本嵌入到页面中，并且提供了官方的样式配置选项，轻松自定义背景色，步骤如下：

1. 获取Web Chat的Direct Line Token #

• 登录Azure Portal，找到你的Bot资源
• 进入「Channels」页面，打开「Web Chat」通道
• 复制页面里的「Secret Key」，你可以用这个密钥换取短期的Direct Line Token（推荐，避免密钥泄露），或者直接使用通道提供的嵌入代码中的临时token（注意有效期）

2. 在SharePoint页面中添加自定义脚本 #

在SharePoint页面里添加「脚本编辑器」或者「现代页面的嵌入Web部件」，插入以下代码：

<!-- 用于承载Web Chat的容器 -->
<div id="webchat-container" role="main"></div>

<!-- 引入Web Chat的官方脚本 -->
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>

<script>
  // 初始化Web Chat并配置样式
  window.WebChat.renderWebChat({
    // 配置Direct Line连接，替换成你的token
    directLine: window.WebChat.createDirectLine({ token: 'YOUR_DIRECT_LINE_TOKEN' }),
    // 自定义样式选项，这里设置背景色
    styleOptions: {
      // 整个Web Chat容器的背景色
      backgroundColor: '#f5f5f5',
      // 机器人消息气泡的背景色（可选）
      bubbleBackground: '#e0e0e0',
      // 用户消息气泡的背景色（可选）
      bubbleFromUserBackground: '#2196f3'
    }
  }, document.getElementById('webchat-container'));
</script>

<!-- 调整Web Chat容器的大小 -->
<style>
  #webchat-container {
    height: 600px;
    width: 450px;
    border-radius: 8px;
    overflow: hidden;
  }
</style>

3. 验证效果 #

保存SharePoint页面后，刷新就能看到背景色已经变成你设置的颜色了。这种方式不需要修改任何Bot的源码，也不用重新部署Azure上的Bot服务，快捷又省心。

如果你坚持要用iframe的话 #

如果一定要用iframe嵌入，那你需要：

• 按照官方教程修改Web Chat的SCSS样式（自定义背景色）
• 将修改后的Web Chat代码部署到一个独立的托管服务（比如Azure App Service、Azure静态网站托管）
• 把这个自定义Web Chat页面的URL放到iframe中

不过这种方式需要额外维护一个托管资源，步骤更繁琐，不如上面的脚本嵌入方案高效。

内容的提问来源于stack exchange，提问作者Soufien Hajji