简单的问题是，有没有办法将我自己的 Embed Web 聊天版本发布到 Azure 中？我需要更改网络聊天机器人的布局以在公司网站中使用，但 iframe 不允许更改。
github BotFramework-WebChat repo 和教程在这种情况下不起作用，因为我在 Dot Net 中完成了所有工作，Azure 甚至不允许在 Dot Net 应用程序中使用 npm 命令。
我卡在这一步，我真的需要帮助来解决这个问题。
【问题讨论】：
标签： c# azure iframe botframework
除了使用 iframe，您还可以使用其他一些技术。嵌入 iframe 很容易，但它并没有给我们控制权。 here列出的几种方法中的一些。
在这些在您的非 React 网站中，内联运行网络聊天允许您使用自定义 CSS 控制网络聊天布局的外观，同时仍然相对容易
网页截图
添加 DirectLine（不是 Web Chat）频道，并生成 Direct Line 秘密。确保启用 Direct Line 3.0。
例如，在您的网站中包含 botchat.css 和 botchat.js，
<!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>
这是一个应用了自定义 CSS 的卡片轮播示例：
.Net 或 Node 模块在这里无济于事。它更多的是应用 HTML、CSS 和 JS 知识。
【讨论】：
我需要更改网络聊天机器人的布局以在公司网站中使用，但 iframe 不允许更改。
如果我们使用提供的代码，它指向 Microsoft 托管的网络聊天实例。正如您所说，使用自定义 CSS 和 JavaScript 代码来更改网络聊天的布局并不容易。
如果你只是想大致改变一下webchat的显示/布局，如士大夫建议的，你可以使用botchat.js运行webchat inline，然后使用F12开发者工具检查webchat的html结构并应用自定义覆盖默认样式的 CSS 样式。
但据我所知，一些需求/布局修改（例如showing bot icon with each message）无法通过使用自定义CSS和JavaScript覆盖默认样式来实现，我们需要克隆BotFramework-WebChat repo，修改它，构建它，并引用我们自定义/构建的 botchat.css 和 botchat.js 文件，这需要您安装 NPM。
如何将我自己的 Iframe BotFramework 发布到 Azure？
如果您想构建您的自定义网络聊天并将其托管在您自己的 Azure 网站中，以便其他网站可以使用 <iframe> 嵌入您的网络聊天实例：
<iframe src="/path/to/your/webchat/instance" height="height" width="width" />
您可以参考以下步骤：
1) 克隆 BotFramework-WebChat 仓库和Build your own Web Chat
2) 创建一个网页（以下示例代码供您参考）并引用您构建的botchat.css 和botchat.js 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="BotChat/botchat.css" rel="stylesheet" />
<script src="BotChat/botchat.js"></script>
</head>
<body>
<div id="bot"></div>
<style>
.botIcon {
float: left !important;
border-radius: 50%;
}
.userIcon {
float: right !important;
border-radius: 50%;
}
</style>
</body>
</html>
<script>
const params = BotChat.queryParams(location.search);
const user = {
id: params['userid'] || 'You', name: params['username'] || 'You',
};
BotChat.App({
bot: { id: "{your_botid_here}"},
resize: 'window',
user: user,
directLine: {
secret: params['s']
}
}, document.getElementById('bot'));
</script>
3) 将其发布到 Azure 网站并将上述网页添加为默认文档
4) 在其他网站中，要嵌入您构建的网络聊天，您可以使用
<iframe src='http://{your_webapp_name}.azurewebsites.net/?s={directline_secret}&userid={user_id}' width="400px" height="500px"></iframe>
测试结果：
【讨论】：