Question

我在sdk3版本的stackoverflow中发现了这个很棒的代码，但是该版本已更新为sdk4版本。有人知道如何升级吗？

我尝试了一些尝试，但是主要在标题中给了我一些错误

我在git中找到了一些样本，但是我需要在其中使用react。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
   <link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
  <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <style>
        #mychat {
            margin: 10px;
            position: fixed;
            bottom: 30px;
            right: 10px;
            z-index: 1000000;
        }
    </style>
</head>

</html>
<script>
    (function () {
        var div = document.createElement("div");
        document.getElementsByTagName('body')[0].appendChild(div);
        div.outerHTML = "<div id='botDiv' style='width: 400px; height: 0px; margin:10px; position: fixed; bottom: 0; right:0; z-index: 1000;><div  id='botTitleBar' style='height: 40px; width: 400px; position:fixed; cursor: pointer;'></div></div>";
        BotChat.App({  // change to window.WebChat.renderWebChat
            directLine: { secret: 'myAppSecret' },
            userID: 'YOUR_USER_ID',

        }, document.getElementById("botDiv"));

        document.getElementsByClassName("wc-header")[0].setAttribute("id", "chatbotheader");
        document.querySelector('body').addEventListener('click', function (e) {
            e.target.matches = e.target.matches || e.target.msMatchesSelector;
            if (e.target.matches('#chatbotheader')) {
                var botDiv = document.querySelector('#botDiv');

                botDiv.style.height = "0px";

                document.getElementById("mychat").style.display = "block";
            };
        });

        document.getElementById("mychat").addEventListener("click", function (e) {

            document.getElementById("botDiv").style.height = '500px';

            e.target.style.display = "none";
        })
    }());
</script>

Answer 1

看看代码，我建议看看这个Minimizable Web Chat Sample。由于它是用React编写的，因此稍微复杂一些，但是可以完成您要尝试做的事情。

如果您仍然有兴趣将问题中的代码移植到Web Chat中，建议您看一下Web Chat自述文件中的Migrating from Web Chat v3 to v4部分。

或者，您可以将Facebook Messenger添加为机器人的频道，并在您的网站上使用其Chat Plugin。

希望这会有所帮助。

如何将此代码从v3＃转换为v4＃？

1 个答案: