Skip to content

Instantly share code, notes, and snippets.

@asha23

asha23/chatbot.html

Last active October 6, 2020 11:15
Download ZIP

Revisions

  1. asha23 revised this gist Oct 6, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion chatbot.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    <script>
    (function () {
    (function () {
    function ZendeskCustomWidget() {
    this.element = document.getElementById('zendesk-widget-custom');

  2. asha23 created this gist Oct 6, 2020.
    167 changes: 167 additions & 0 deletions chatbot.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,167 @@
    <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>