Web Widget & Chat advanced customization

Have more questions? Submit a request

12 Comments

  • Vladan Jovic
    Comment actions Permalink

    Awesome, thanks Sergiu!

     

    0
  • Diego García
    Comment actions Permalink

    Excelent! Thanks!

    0
  • David
    Comment actions Permalink

    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

    0
  • Sergiu Birca
    Comment actions Permalink

    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.

     

     

    0
  • Lucas Crostarosa
    Comment actions Permalink

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

    0
  • Sergiu Birca
    Comment actions Permalink

    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.

     

     

     

    0
  • Dan Harding
    Comment actions Permalink

    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.

    0
  • Fiona
    Comment actions Permalink

    Hi there

    Is there a way to still show the option to contact us via the form even if an agent is online for chat. I'd like to still offer customers the option to either chat with us (if we're online) or leave us a message (even if we are online for chat). 

    Thanks

    Fiona

    0
  • Brett - Community Manager
    Comment actions Permalink

    Hi Fiona,

    If you want more control over what options are available to the user, you'll want to use the Web-Widget API which I've attached for you.

    You may want to customize your website so that some pages allow end users to make a choice and others don’t. More information here: Advanced customization of the web-widget

    Hope this helps!

    0
  • Fiona
    Comment actions Permalink

    Thank you, again, Brett! I will pass this to our developer - hopefully he can do this for us!

    Fiona

    0
  • Brett - Community Manager
    Comment actions Permalink

    Happy to help Fiona :)

    0
  • Thomas Verschoren
    Comment actions Permalink

    For all of you having trouble writing code, or if you want a quick and easy way to test out what all the customisation options do:

    I build a web tool that generates the necessary custom code for the available changes you can make.

    https://widget.premiumplus.io

    Hope this helps someone!

    8

Please sign in to leave a comment.

Powered by Zendesk