Hide chat room script until button click

Question

I have Zoplim plugin (chat function) I wish to hide this until my button is clicked.

So the chat room is hidden until the Wen test button is clicked then the coatroom shows

Script

<script type="text/javascript">
    window.$zopim || (function (d, s) {
        var z = $zopim = function (c) {
            z._.push(c)
        }, $ = z.s =
                d.createElement(s), e = d.getElementsByTagName(s)[0];
        z.set = function (o) {
            z.set._.push(o)
        };
        z._ = [];
        z.set._ = [];
        $.async = !0;
        $.setAttribute('charset', 'utf-8');
        $.src = '//v2.zopim.com/?1l9izSc2QRurE71l1L7ugke4Soo38dPc';
        z.t = +new Date;
        $.type = 'text/javascript';
        e.parentNode.insertBefore($, e)
    })(document, 'script');
</script>

My button HTML

 <button id="finish-button" class="button finish m2">End test</button>

What I have tried

<script type="text/javascript">
    document.getElementById("finish-button").onclick = function()
    {myFunction()};
        window.$zopim || (function (d, s) {
            var z = $zopim = function (c) {
                z._.push(c)
            }, $ = z.s =
                    d.createElement(s), e = d.getElementsByTagName(s)[0];
            z.set = function (o) {
                z.set._.push(o)
            };
            z._ = [];
            z.set._ = [];
            $.async = !0;
            $.setAttribute('charset', 'utf-8');
            $.src = '//v2.zopim.com/?1l9izSc2QRurE71l1L7ugke4Soo38dPc';
            z.t = +new Date;
            $.type = 'text/javascript';
            e.parentNode.insertBefore($, e)
        })(document, 'script');
</script>

Answer 1

You have the idea, the problem is that you must execute the code from your chat inside the function that you are assing it to the button, in this case only when you make click, this portion of code will be executed. Check my example

https://jsfiddle.net/b7z0jnsc/

document.getElementById("finish-button").onclick = function(){
                window.$zopim || (function (d, s) {
                    var z = $zopim = function (c) {
                        z._.push(c)
                    }, $ = z.s =
                            d.createElement(s), e = d.getElementsByTagName(s)[0];
                    z.set = function (o) {
                        z.set._.push(o)
                    };
                    z._ = [];
                    z.set._ = [];
                    $.async = !0;
                    $.setAttribute('charset', 'utf-8');
                    $.src = '//v2.zopim.com/?1l9izSc2QRurE71l1L7ugke4Soo38dPc';
                    z.t = +new Date;
                    $.type = 'text/javascript';
                    e.parentNode.insertBefore($, e)
                })(document, 'script');
};

Answer 2

Just put the code you want to happen after you press the finish button where the function myFunction() is now.

Notice the error when the finish-button is pressed because somethings are not accounted for in this program when the script is executed.

<button id="finish-button" class="button finish m2">End test</button>

<script type="text/javascript">
            document.getElementById("finish-button").onclick = function() {
                window.$zopim || (function (d, s) {
                    var z = $zopim = function (c) {
                        z._.push(c)
                    }, $ = z.s =
                            d.createElement(s), e = d.getElementsByTagName(s)[0];
                    z.set = function (o) {
                        z.set._.push(o)
                    };
                    z._ = [];
                    z.set._ = [];
                    $.async = !0;
                    $.setAttribute('charset', 'utf-8');
                    $.src = '//v2.zopim.com/?1l9izSc2QRurE71l1L7ugke4Soo38dPc';
                    z.t = +new Date;
                    $.type = 'text/javascript';
                    e.parentNode.insertBefore($, e)
                })(document, 'script');
              }
        </script>