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 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>

Test result:

1)open webchat window:

2)close webchat window: