用WordPress进行Botframework [英] Botframework with WordPress
问题描述
我想在WordPress中实现BotFramework，但无论以任何方式或形式，都无法正常工作.
I want to implement BotFramework in a WordPress but in any way or form, it's not working properly.
我使用了不同的脚本，但是得到了相同的错误结果.
I used different scripts but got to the same wrong result.
一个:
<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>
它给了我横幅，但是在按下时没有打开聊天. 在其他情况下，脚本:
it's giving me the banner but not opening the chat when pressed. in other case the 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>
但是在这种情况下，它什么也没做. 帮助，请:(
but in this case, it's doing nothing. help, please :(
推荐答案
我不知道您的环境的结构，因此希望可以翻译，但我能够完成.我在本地运行此程序，并在WAMP服务器上启动了WP站点.
I don't know how your environment is structured, so hopefully, this translates but I was able to accomplish this. I'm running this locally having spun up a WP site on a WAMP server.
首先，我通过对以下对象进行API调用来生成令牌
First, I generate a token by making an API call to
https://directline.botframework.com/v3/directline/tokens/generate.
如果您已经在生成令牌，请跳至下一部分.如果没有，您可以在此处(如果有兴趣)中找到该代码.
If you're already generating a token, then skip to the next section. If not, you can reference this code, found here (if of interest).
在WP上，我正在使用一个名为"WP Coder"的插件，它使您可以输入必要的组件，同时在页面中让该插件使其工作".我尝试对其进行手动编码，但是WP页面的播放效果不佳，并且此插件效果不错.
On WP, I am using a plugin called 'WP Coder' This allows you to enter in the necessary components while letting the plugin 'make it work' in the page. I tried hand-coding it in, but the WP page wasn't playing nice and this plugin was.
安装插件后，将其放在"HTML代码"部分:
Once the plugin is installed, put this in the 'HTML code' section:
<!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代码"部分中遵循以下步骤:
Followed by this in the 'CSS code' section:
html,
body {
height: 100%
}
body {
margin: 0
}
#webchat,
#webchat>* {
height: 500px;
width: 100%;
}
顺便说一句，如果您将"#webchat"的高度设置为100％，则聊天室将随着条目的输入而连续向下滚动页面，迫使用户必须滚动".除此之外，请根据需要进行调整.
Btw, if you set the height to 100% for '#webchat' the chat will continuously scroll down the page, as entries are made, forcing the user to have to 'scroll after it'. Outside of that, adjust it as you will.
在"JS代码"下，添加以下内容.请注意，我正在本地生成令牌.您将需要更新它以匹配您的令牌生成方法:
Under 'JS Code', add the following. Please note, that I'm generating a token locally. You will need to update this to match your method of token generation:
( 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' ) );
} )();
接下来，在包含文件"下，分别输入以下两个JS文件作为URL:
Next, under 'Include files' enter the two following JS files as URLs (individually):
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插件中找到.
Lastly, take the Publish 'shortcode' (mine looks like this [WP-Coder id="1"]) and place it on your page. This is found in the WP Coder plugin.
在这一点上，它应该为您工作.如果没有，我将仔细研究您如何生成和传递令牌.
At this point, it should work for you. If not, I would look closely at how you are generating and passing the token.
希望有帮助！
这篇关于用WordPress进行Botframework的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
