Hide/show chat/HC/form based on custom settings

chat_visilbity_logic.html

<!-- Custom chat script begin -->
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=3c32985e-0ce9-42ed-9c6f-82ac021f84e7"> </script>

<script>
    // This is upgraded Zendesk Widget handler script. Ver: 1.2 Updated: 2019-01-02
    // It is intended to simplify the control of Widget behaviour through custom JavaScript configuration
    // Script is using Widget JS API https://developer.zendesk.com/embeddables/docs/widget/introduction
    // Script expects integrated Chat experience to be available
    // To run the script follow the steps below:
    // 1. Decide which part of the Widget you want to run using runWidgetLogic().init(true, true, true);
    // 2. Configure `globalConfig` with global Widget settings
    // 3. Choose department name to watch by configuring `departmentName`
    // 4. Configure `onlineChatConfig` with Chat configuration when Chat is available
    // 5. Copy final code to desired pages and run. Make sure that actual Widget code is loaded BEFORE this script
    var runWidgetLogic = function(){
        'use strict';
        // Global Widget configuration
        var globalConfig = {
            webWidget: {
                contactOptions: {
                    enabled: true,
                    contactButton: {
                        '*': 'Get in Touch'
                    },
                    // The Chat Label on the Contact Options window
                    chatLabelOnline: {
                        '*': 'Enjoy Live Chat'
                    },
                    chatLabelOffline: {
                        '*': 'Chat is Offline'
                    },
                    // The Contact Form Label
                    contactFormLabel: { 
                        '*': 'Leave us a message' 
                    }
                },
                // The Widget Color
                color: {
                    theme: '#7433FF'
                },
                launcher: {
                    // The Web Widget button title (HC/Contact Form are On)
                    label: {
                        '*': 'Need Help?'
                    },
                    // The Web Widget button title (HC is Off)
                    chatLabel: {
                        '*': 'Chat now'
                    }
                },
                helpCenter: {
                    // Sets the title of the Help Center Window
                    title: {
                        '*': 'ACME SUPPORT'
                    }
                }
            }
        };
        // Department to watch for online status
        var departmentName = 'Support EN';
        
        // Widget config when desired chat department is online
        var onlineChatConfig = {
            webWidget: {
                chat: {
                    // Set a specific department and hide the department selection drop-down field IF enabled: ['']
                    // Set a specific department and show only one department in selection drop-down field IF enabled: [departmentName]
                    departments: {
                        // enabled: ['']
                        enabled: [''],
                        select: departmentName
                    },
                    prechatForm: {
                        // The Prechat greeting text
                        greeting: {
                            '*': 'Please fill out the form below to start the chat with us'
                        }
                    },
                    title: {
                        '*': 'Chat with us!!!!!'
                    },
                    concierge: {
                        // the Concierge parameters
                        avatarPath: 'https://dl.dropbox.com/s/h9ci5d92r5m58cr/sb-logo.png?dl=0',
                        name: 'Customer Support22',
                        title: {
                            '*': 'Live support'
                        }
                    },
                    // Add the relevant tags to the Chat session
                    tags: ['loggedin', 'brand_name1']
                }
            }
        };
        
        var ze_module = {};
        
        ze_module.init = function(HCSearch, chat, contactForm) { // init Widget logic
            if (zE) {
                window.onload = _applyWidgetConfig(HCSearch, chat, contactForm);
            } else {
                console.log("ERROR: No Web Widget running on the page");
                return;
            }
        };
        function _applyWidgetConfig(HCSearch, chat, contactForm) { // execute Widget logic
            _setLocale();
            _updatePath()
            _updateGlobalSettings(HCSearch, chat, contactForm);
            _updateChatSettings();
        }
        function _setLocale(locale) {  // set the Widget language
            zE('webWidget', 'setLocale', locale || 'en');
        }
        function _updatePath(pathObject) {  // update the chat visitor’s webpath.
            zE('webWidget', 'updatePath', pathObject);
        }
        function _setSurpressSettingProp(prop, val) { // extend config with surpress logic
            if (window.zESettings && window.zESettings.webWidget) {
                var ww = window.zESettings.webWidget;
                if (ww[prop]) ww[prop].suppress = val; else ww[prop] = { "suppress": val }
            } else console.log("Widget is missing window.zESettings object.")
        }
        function _updateGlobalSettings(HCSearch, chat, contactForm) { // update global Widget settings
            window.zESettings = globalConfig;
            _setSurpressSettingProp('helpCenter', !HCSearch);
            _setSurpressSettingProp('contactForm', !contactForm);
            _setSurpressSettingProp('chat', !chat);
            _adjustChatLabel(HCSearch, chat, contactForm)
        }
        function _adjustChatLabel(HCSearch, chat, contactForm) { // change launcher label if contact options and chat are enabled
            // when contact options and chat are enabled Widget shows "Chat now" from webWidget.launcher.chatLabel,
            // however, it opens contact options instead of chat.
            // this function displays "Need Help?" from webWidget.launcher.label so label will make more sense
            var wwConf = window.zESettings.webWidget;
            if (wwConf.contactOptions && wwConf.contactOptions.enabled && wwConf.launcher) {
                if (!(chat && !HCSearch && !contactForm)) wwConf.launcher.chatLabel = wwConf.launcher.label;
            }
        }
        function _updateChatSettings() { // update Chat settings when chat is connected
            zE('webWidget:on', 'chat:connected', function() {
              zE('webWidget:on', 'chat:status', function(status) {
                var department_status = zE('webWidget:get', 'chat:department', departmentName);
                if (department_status && department_status.status === 'online') {
                     // ONLINE LOGIC
                    zE('webWidget', 'updateSettings', onlineChatConfig);
                } else {
                    // OFFLINE & UNDEFINED LOGIC (undefined = a department with this name doesn't exist OR the department has been disabled)
                    // suppress the Chat channel as the targeted department is offline
                    zE('webWidget', 'updateSettings', { webWidget: { chat: { suppress: true }} });
                }
              });
            });
        }
        return ze_module;
    };
</script>

<script>
    /**
     * Change the widget settings.
     * @params {boolean} HCSearch - enable HC Search?
     * @params {boolean} chat - enable chat?
     * @params {boolean} contactForm - enable contact form?
    */
    runWidgetLogic().init(false, true, true);
</script>
<!-- Custom chat script end -->