在网站上嵌入机器人 [英] Embedding a bot on a website

问题描述

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

Please I have been able to position the bot in its wanted position I need help with the toggling here is my code

(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';
      };
    });
  }());

推荐答案

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

I have been able to position the bot in its wanted position I need help with the toggling

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

It seems that you position your chat bot at bottom right corner of web page, and now you want to toggle visibility of chat bot window. Based on your requirement and code snippet, I modify your code to achieve the requirement, the following code should work for you.

<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)关闭网络聊天窗口:

这篇关于在网站上嵌入机器人的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！