Zendesk Improvement

chatbot.html

<script>
  (function () {
        function ZendeskCustomWidget() {
            this.element = document.getElementById('zendesk-widget-custom');

            this.options = localStorage['ZD-store'] ? JSON.parse(localStorage['ZD-store']) : {
                widgetShown: false,
                is_chatting: false
            };

            this.options.locked = false;

            if (this.element) {
                this.options.language = this.element.dataset.language;
                this.options.key = this.element.dataset.key;
            }
        }

        ZendeskCustomWidget.prototype.hideCustomWidget = function () {
            this.element.style.display = 'none';
        };

        ZendeskCustomWidget.prototype.showLoader = function () {
            this.element.querySelector('div.zd-icon-loader').style.display = 'inline-block';
            this.element.querySelector('div.zd-icon-default').style.display = 'none';
        };

        ZendeskCustomWidget.prototype.waitForLoad = function(mutationsList, observer) {
            for(var mutation of mutationsList) {
                if (mutation.attributeName === 'class') {
                    if(mutation.target.classList.contains('zEWidget-webWidget--active')) {
                        this.hideCustomWidget();
                        observer.disconnect();
                    }
                }
            }
        };

        ZendeskCustomWidget.prototype.onWidgetOpen = function () {
            var iframe = document.getElementById('webWidget');

            if(typeof MutationObserver === 'function' && iframe) {
                var observer = new MutationObserver(this.waitForLoad.bind(this));
                observer.observe(iframe, { attributes: true, childList: false, subtree: false });
            } else {
                this.hideCustomWidget();
            }
        };

        ZendeskCustomWidget.prototype.loadWidget = function (userInitiated) {
            var g = document.createElement('script');
            var s = document.getElementsByTagName('script')[0];

            g.src = 'https://static.zdassets.com/ekr/snippet.js?key=' + this.options.key;
            g.async = true;
            g.id = 'ze-snippet';
            s.parentNode.insertBefore(g, s);

            g.onload = function () {
                zE('webWidget', 'setLocale', this.options.language);

                if (userInitiated) {
                    zE('webWidget', 'open');
                    zE('webWidget:on', 'open', this.onWidgetOpen.bind(this));
                }
            }.bind(this);
        };

        ZendeskCustomWidget.prototype.onClick = function (event) {
            event.preventDefault();

            if (this.options.locked) {
                return;
            }

            this.options.locked = true;

            this.showLoader();
            this.loadWidget(true);
        };

        var zendesk = new ZendeskCustomWidget();
        if (!zendesk.element) {
            return;
        }

        if (zendesk.options.widgetShown || zendesk.options.is_chatting) {
            zendesk.hideCustomWidget();
            zendesk.loadWidget(false);
            return;
        }

        zendesk.element.addEventListener('click', zendesk.onClick.bind(zendesk));
    })();
</script>

<div id="zendesk-widget-custom" data-key="[YOUR KEY HERE]" data-language="en">
    <div class="zd-button">
        <div class="zd-base-icon zd-icon-loader"><div></div><div></div><div></div><div></div></div>
        <div class="zd-base-icon zd-icon-default"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" style="enable-background:new 0 0 20 20"><path d="M11,12.3V13c0,0-1.8,0-2,0v-0.6c0-0.6,0.1-1.4,0.8-2.1c0.7-0.7,1.6-1.2,1.6-2.1c0-0.9-0.7-1.4-1.4-1.4 c-1.3,0-1.4,1.4-1.5,1.7H6.6C6.6,7.1,7.2,5,10,5c2.4,0,3.4,1.6,3.4,3C13.4,10.4,11,10.8,11,12.3z"></path><circle cx="10" cy="15" r="1"></circle><path d="M10,2c4.4,0,8,3.6,8,8s-3.6,8-8,8s-8-3.6-8-8S5.6,2,10,2 M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0 L10,0z"></path></svg></div>
        <div class="zd-label">Help</div>
    </div>
</div>

<style>
  #zendesk-widget-custom button, #zendesk-widget-custom span, #zendesk-widget-custom div {
        all: unset;
    }

    #zendesk-widget-custom button {
        background-color: #20b2bb;
        color: #ffffff;
        fill: #ffffff;
        padding: 13px 22px;
        border-radius: 13986px;
        bottom: 0;
        font-size: 15px;
        cursor: pointer;
    }

    #zendesk-widget-custom span.icon svg {
        min-width: 20px;
        min-height: 20px;
        height: 20px;
        width: 20px;
    }

    #zendesk-widget-custom span.icon {
        padding-right: 8px;
        display: inline-block;
        vertical-align: middle;
        pointer-events: none !important;
    }

    #zendesk-widget-custom span.label {
        display: inline-block;
        font-size: 15px;
        line-height: 17px;
        font-weight: 700;
        vertical-align: middle;
        pointer-events: none !important;
    }

    #zendesk-widget-custom {
        color: #1a1a1a;
        font-size: 14px;
        line-height: 16px;
        border: medium none;
        background: transparent none repeat scroll 0% 0%;
        z-index: 999998;
        transform: translateZ(0px);
        position: fixed;
        transition-property: opacity, top, bottom;
        transition-duration: 250ms;
        transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        transition-delay: 0s;
        opacity: 1;
        width: 113px;
        height: 50px;
        max-height: 551px;
        min-height: 50px;
        margin: 10px 20px;
        left: 0;
        bottom: 0;
        font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Arial,sans-serif;
    }
</style>