Web Widget & Chat advanced customization

Have more questions? Submit a request


  • Vladan Jovic

    Awesome, thanks Sergiu!


  • Diego García

    Excelent! Thanks!

  • David

    Hi Sergiu, perhaps you can help with a few issues:

    1) How can i use this code but have the chat widget appear only for users with a certain ORG tag? Please point out where in the code the script should be pasted.

    2) How can i prevent the widget from disappearing when the user minimizes it?


    Thank you

  • Sergiu Birca

    Hi David,

    Ideally we should hide the widget first, then apply the conditionality logic (to check the visitor role and the presence of the Org tag) => then show the widget.

    To check the Org's tag => HelpCenter.user.organizations[0].tags.indexOf('tag_name')

    To check the visitor role (we want to target only the authenticated users) => HelpCenter.user.role==="end_user"


    The final suggested script:


    <!-- the web widget -->
    <script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"> </script>

    zE(function() {

    var runWidgetLogic = (function() {
    'use strict';
    var module = {};
    module.init = function(HCSearch, chat, contactForm) {
    if (zE) configureWidget(HCSearch, chat, contactForm);
    else {
    console.log("ERROR: No Web Widget running on the page.");
    function configureWidget(HCSearch, chat, contactForm) { // API configuration
    var widgets = { webWidget:{ launcher:{}, helpCenter:{}, chat:{}, contactForm:{} } }, ww = widgets.webWidget;
    ww.launcher.label = { '*': 'Have a Question?' }; // Web Widget button text
    ww.launcher.chatLabel = { '*': 'Chat' }; // Chat button text - When the Help Center Search option is disabled
    ww.helpCenter.chatButton = { '*': 'Chat with a person now' }; // Chat button text - when the Help Center Search option is enabled
    ww.helpCenter.title = { '*': 'BRAND Help Centre' }; // Web Widget header text
    if (!HCSearch) ww.helpCenter.suppress = true;
    if (!chat) ww.chat.suppress = true; else zopimConfig();
    if (!contactForm) ww.contactForm.suppress = true;
    window.zESettings = widgets;
    function zopimConfig() {
    zE(function() {
    $zopim(function() {
    var zl = $zopim.livechat;
    zl.setOnConnected(function() {
    var department_status = zl.departments.getDepartment('Department Name');
    if (department_status.status == 'offline') zl.setStatus('offline'); // Set the account status to 'offline'
    else {
    zl.setLanguage('en'); // Set language to English:
    zl.window.setTitle('BRAND Support'); // Set the Window Title:
    zl.addTags("brand_name"); // add a tag
    zl.departments.filter(''); // Hide the Drop-down list option in the Pre-Chat Form to select the Department
    zl.departments.setVisitorDepartment('Department Name'); // Automatically set the Department
    return module;
    * Change the widget settings.
    * @params {boolean} HCSearch - enable HC Search?
    * @params {boolean} chat - enable chat?
    * @params {boolean} contactForm - enable contact form?
    runWidgetLogic.init(true, false, false);


    zE(function() {
    if(HelpCenter.user.role==="end_user" && HelpCenter.user.organizations[0].tags.indexOf('vip') > -1) {
    setTimeout(function() {
    }, 3000)



    Don't forget to set the WW key, the Chat department name and the Org tag.

    Also suppress the relevant channels via runWidgetLogic.init(true, true, true);


    Hope it helps.



  • Lucas Crostarosa

    Do the settings from the main user interface interfere / effect this code at all? Having massive trouble implementing this

  • Sergiu Birca

    Hi Lucas,

    It depends on how this is done.

    If you set for example the color in the UI and then use an API end point in the script that's also seting the color, the script will overwrite the UI setting.

    My suggestion for you is to enable all the channels in the UI: Contact Form, Help Center Search and Chat (in case if you use chat) and then via the script suppress the ones you don't want to use in general or on particular pages.




  • Dan Harding

    I would like the balloon, when clicked to show both the search bar and the Send Message button.  I've tried adding the code shown, but it still only shows the search bar until I actually enter something to search, and then the send message button shows. (which is how it behaved before)

    I'm pretty sure the code is being executed, because the customization of the text is happening. It is not showing the default text as before I added this code.

    Any ideas what I am missing?

    I am calling:  runWidgetLogic.init(true, false, true);

    If I try taking out the standard code that I had before (and only have the code you posted), the balloon doesn't show at all.

    I am new to all this, so it might very well be something "obvious"

    Thanks for your time.


Please sign in to leave a comment.

Powered by Zendesk