在网站上嵌入机器人

Question

请我已经能够将机器人定位在想要的位置，我需要有关切换的帮助 这是我的代码

(function () {
    var div = document.createElement("div");
    document.getElementsByTagName('body')[0].appendChild(div);
    div.outerHTML = "<div id='botDiv' style='width: 400px; height: 438px; position: fixed; bottom: 0; right:0; z-index: 1000;><div  id='botTitleBar' style='height: 40px; width: 400px; position:fixed; background: #6819bf; cursor: pointer;'></div></div>";  
    BotChat.App({
      directLine: { secret: 'Your Secret Key Here' },
      user: { id: 'userid' },
      bot: { id: '' }
    }, document.getElementById("botDiv"));
    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 == '400px' ? '38px' : '400px';
      };
    });
  }());

Answer 1

  

我已经能够将机器人定位在想要的位置，在切换时需要帮助

似乎您将聊天机器人定位在网页的右下角，现在您希望切换聊天机器人窗口的可见性。根据您的要求和代码段，我将修改您的代码以达到要求，以下代码应该适合您。

<script>
    (function () {
        var div = document.createElement("div");
        document.getElementsByTagName('body')[0].appendChild(div);
        div.outerHTML = "<div id='botDiv' style='width: 400px; height: 400px; position: fixed; bottom: 0; right:0; z-index: 1000;><div  id='botTitleBar' style='height: 40px; width: 400px; position:fixed; background: #6819bf; cursor: pointer;'></div></div>";

        BotChat.App({
            directLine: { secret: 'Your Secret Key Here' },
            user: { id: 'userid' },
            bot: { id: '' }
        }, document.getElementById("botDiv"));

        //specify id for webchat header

        document.getElementsByClassName("wc-header")[0].setAttribute("id", "chatbotheader");

        document.querySelector('body').addEventListener('click', function (e) {

            e.target.matches = e.target.matches || e.target.msMatchesSelector;
            //detect if user clicked webchat header
            if (e.target.matches('#chatbotheader')) {
                var botDiv = document.querySelector('#botDiv');
                botDiv.style.height = botDiv.style.height == '400px' ? '38px' : '400px';
            };
        });
    }());
</script>

测试结果：

1）打开网络聊天窗口：

2）关闭网络聊天窗口：