Web Widget & Chat advanced customization Follow

Comments

5 comments

  • Avatar
    Vladan Jovic

    Awesome, thanks Sergiu!

     

  • Avatar
    Diego García

    Excelent! Thanks!

  • Avatar
    David (Edited )

    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

  • Avatar
    Eric Ypsilantis

    Hi David,

    We're going to be limited in how much we can assist with modifying the code examples in tip articles such as this, as custom coding is outside what we can troubleshoot in a Support context.

    However, that said, we have another support tip article which shows how to only display the Widget if the currently logged-in user has a specific tag present on their user profile:

    Providing targeted support with Zendesk Chat

    Even though this particular article is for user tags and not org tags, I hope this other article's suggestion for this helps out nonetheless!

    In terms of your second question, there is not going to be a way of preventing the minimize button from working when clicked on by the End-user with the product's native functionality. Customers needing to get around this product limitation in the past have built their own widget and made calls into Chat using the API, however that type of custom work is outside what we can support as well.

    I hope this information helps out with your customization efforts, have a great day!

  • Avatar
    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>

    <script>
    zE(function() {
    zE.hide()
    })
    </script>


    <script>
    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.");
    return;
    }
    };
    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);
    </script>

    <script>

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

     

     

    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.

     

     

Please sign in to leave a comment.

Powered by Zendesk