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'); do

Solution 1:

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 headerdocument.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 headerif (e.target.matches('#chatbotheader')) {
                var botDiv = document.querySelector('#botDiv');
                botDiv.style.height = botDiv.style.height == '400px' ? '38px' : '400px';
            };
        });
    }());
</script>

Test result:

1)open webchat window:

2)close webchat window: