未捕获的类型错误：无法读取未定义的属性“renderWebChat”

Question

我正在创建一个嵌入 iframe 源中的网络聊天。我想要的是更改该 iframe 中每个聊天消息（称为聊天气泡）的背景颜色。

这是我的代码：

<div id="webchat" role="main">
        <iframe src='https://webchat.botframework.com/embed/...?s=SECRET_KEY_HERE'
        style='min-width: 400px; width: 100%; min-height: 500px;'></iframe>
</div>

<script type="text/javascript">

const styleOptions = {
    bubbleBackground: 'rgba(0, 0, 255, .1)',
    bubbleFromUserBackground: '#ddd'
};

window.WebChat.renderWebChat({
    directLine: window.WebChat.createDirectLine({ secret: 'MY_SECRET_KEY_HERE' }),
    // Passing "styleOptions" when rendering Web Chat
    styleOptions
}, document.getElementById('webchat'));
</script>

问题：

我能够看到 Iframe，并且使用专用的密钥我能够聊天；但是，我无法看到应用于聊天气泡和页面加载的样式，我收到此错误：

未捕获的类型错误：无法读取未定义的属性“renderWebChat”

这是什么原因呢？

Answer 1

这是行不通的，您正在混合两种嵌入网络聊天的方式。

1. 通过 iFrame 嵌入
2. 与 JavaScript 集成

如果您想设计网络聊天的样式，则需要使用 JavaScript 集成。JavaScript 集成有大量文档，其中展示了如何启动以及如何修改网络聊天。