使用WordPress的Botframework
我想在WordPress中实现BotFramework，但无论以何种方式或形式，它都无法正常工作。
我使用了不同的脚本，但得到了相同的错误结果。
其一：
<script>
(function () {
var div = document.createElement("div");
document.getElementsByTagName('body')[0].appendChild(div);
div.outerHTML = "<div id='botDiv' style='height: 38px; position: fixed;
bottom: 0; z-index: 1000; background-color: red'>
<div id='botTitleBar' style='height: 38px; width: 400px;
position:fixed; cursor: pointer;'></div>
[advanced_iframe src="https://webchat.botframework.com/embed/..."
width="100%" height="600"]</div>";
document.querySelector('body').addEventListener('click', function (e) {
e.target.matches = e.target.matches || e.target.msMatchesSelector;
if (e.target.matches('#botTitleBar')) {
var botDiv = document.querySelector('#botDiv');
botDiv.style.height = botDiv.style.height == '600px' ? '38px' : '600px';
};
});
}());
</script>它会给我横幅，但按下后不会打开聊天。在其他情况下，脚本：
<!DOCTYPE html>
<html>
<body>
<div id="webchat" role="main"></div>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<script>
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({ token: 'key' }),
userID: 'YOUR_USER_ID',
username: 'Web Chat User',
locale: 'en-US',
botAvatarInitials: 'WC',
userAvatarInitials: 'WW'
}, document.getElementById('webchat'));
</script>
</body>
</html>但在这种情况下，它什么也做不了。请帮帮忙:(
回答 1
Stack Overflow用户
发布于 2019-04-09 09:16:01
我不知道你的环境是如何构建的，所以希望这能翻译过来，但我能够做到这一点。我在本地运行这个WAMP服务器上的可湿性粉剂网站。
首先，我通过调用API来生成一个令牌
https://directline.botframework.com/v3/directline/tokens/generate。
如果您已经在生成令牌，请跳到下一节。如果没有，您可以参考此代码，找到here (如果感兴趣)。
在可湿性粉剂上，我使用了一个叫“可湿性粉剂编码器”的插件，它允许你输入必要的组件，同时让插件在页面上“让它工作”。我试着手工编码它，但可湿性粉剂页面玩得不好，而这个插件玩得很好。
插件安装完成后，将此代码放入“HTML代码”部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>WebChat</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="webchat" role="main"></div>
</body>
</html>然后在“CSS代码”部分中写道：
html,
body {
height: 100%
}
body {
margin: 0
}
#webchat,
#webchat>* {
height: 500px;
width: 100%;
}顺便说一句，如果你将“#webchat”的高度设置为100%，聊天将不断向下滚动页面，因为输入了条目，迫使用户不得不“滚动到它后面”。除此之外，您可以随意调整它。
在“JS Code”下，添加以下内容。请注意，我是在本地生成一个令牌。您需要更新它以匹配您的令牌生成方法：
( async function () {
const res = await fetch( 'http://localhost:3979/directline/token', { method: 'POST' } );
const { token } = await res.json();
window.WebChat.renderWebChat( {
directLine: window.WebChat.createDirectLine( { token } )
}, document.getElementById( 'webchat' ) );
} )();接下来，在'Include files‘下输入以下两个JS文件作为URL(分别)：
https://unpkg.com/markdown-it/dist/markdown-it.min.js
https://cdn.botframework.com/botframework-webchat/master/webchat.js最后，把发布的“短码”(我的是这样的[WP-Coder id="1"])放在你的页面上。这可以在WP Coder插件中找到。
在这一点上，它应该可以为您工作。如果没有，我将仔细查看您是如何生成和传递令牌的。
希望能帮上忙！
https://stackoverflow.com/questions/55263284
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号