带有 WordPress 的 Botframework答案

【问题标题】：Botframework with WordPress带有 WordPress 的 Botframework
【发布时间】：2019-08-09 13:42:19
【问题描述】：

我想在 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>

但在这种情况下，它什么也没做。请帮忙:(

【问题讨论】：

您列出的第一个脚本存在于哪个文件中，它是如何与 html 页面相关的？
此脚本位于 WordPress 主页的 HTML 小部件中。所以它是自己生活的。脚本的第一部分是创建一个页脚，其中聊天栏处于关闭状态。但是当我按下 is 来触发点击事件时，什么也没有发生。
两个问题...您在使用什么小部件或插件？另外，您是否传递了 Direct Line 令牌值的令牌或机密？

标签： wordpress botframework

【解决方案1】：

我不知道您的环境是如何构建的，所以希望这可以转化，但我能够做到这一点。我正在本地运行它，并在 WAMP 服务器上启动了一个 WP 站点。

首先，我通过调用 API 来生成令牌

https://directline.botframework.com/v3/directline/tokens/generate.

如果您已经在生成令牌，请跳到下一部分。如果没有，您可以参考此代码，找到 here（如果感兴趣）。

在 WP 上，我使用了一个名为“WP Coder”的插件，这允许您输入必要的组件，同时让插件在页面中“使其工作”。我尝试手动编码，但 WP 页面效果不佳，而这个插件很好。

安装插件后，将其放入“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 代码”下，添加以下内容。请注意，我正在本地生成令牌。您需要更新它以匹配您的令牌生成方法：

( 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（单独）：

https://unpkg.com/markdown-it/dist/markdown-it.min.js
https://cdn.botframework.com/botframework-webchat/master/webchat.js

最后，将 Publish 'shortcode'（我的看起来像 [WP-Coder id="1"]）放在您的页面上。这可以在 WP Coder 插件中找到。

此时，它应该适合您。如果没有，我会仔细查看您是如何生成和传递令牌的。

希望有帮助！

【讨论】：