Advanced customization of the Web Widget

Have more questions? Submit a request

177 Comments

  • William Michael
    Comment actions Permalink

    Great work...hurrah!

    0
  • Bret Johnson
    Comment actions Permalink

    Hi-

    I've been able to edit the Title for contactForm: and also the Label for launcher: but I'd really like to change the text of the "How can we help you?" prompt. 

    Is that possible?

    Thanks.

     

    0
  • Jessie Schutz
    Comment actions Permalink

    Hi Bret! Welcome to the Community!

    Let me see if I can find someone to answer this for you. Please stand by!

    0
  • Cody
    Comment actions Permalink

    Hey Bret,

    You can definitely change that text. That setting is called the searchPlaceholder and is documented here along with an example script.

    Hope this helps

    0
  • Bret Johnson
    Comment actions Permalink

    Thanks Jessie & Cody!

    I actually almost tried that but the 'search' through me off and I immediately talked myself out of it.

    Glad its as simple as that.

    0
  • Miłosz Ryniecki
    Comment actions Permalink

    Unfortunately the above instructions don't work for me. I am placing the code in the page header. This is the code I am using:

    <script type="text/JavaScript">
    window.zESettings = {
    webWidget: {
    chat: {
    title: {
    'pl-PL': 'W czym możemy pomóc?',
    '*': 'Tell us what you need'
    }
    },

    launcher: {
    label: {
    'pl-PL': 'Otwórz chat',
    '*': 'Chat now!'
    }
    }

    }
    };
    </script>

    I am placing it underneath the Zendesk Chat Widget code. Please help.

    0
  • Jacob J Christensen
    Comment actions Permalink

    Hi Miłosz,

    Could you please try to change the locales from 'pl-PL' to simply 'pl' ?

    That's the only possible problem I see.

    0
  • Miłosz Ryniecki
    Comment actions Permalink

    Thanks Jabob but the changes are not visible regardless the locales. Even after your suggestion to change pl-PL to pl no luck.

    0
  • Jacob J Christensen
    Comment actions Permalink

    I think the problem is that the title element is not part of the chat component, but instead the contactForm or helpCenter, try to see if something like this works:

     contactForm: {
    title: {
    'pl': 'W czym możemy pomóc?',
    '*': 'Tell us what you need'
    }
    },
    2
  • Rakesh Bhonagiri
    Comment actions Permalink

    We have used the ze.Identity function to auto-populate user name and email id in the widget form. is there a way for us to make them non editable. i.e since my users have signed in and we have captured their details automatically, we dont find a need for them to edit these fields and also it helps us from security perspective.

    0
  • Miłosz Ryniecki
    Comment actions Permalink

    @Jacob thank you that helped!

    1
  • Jessie Schutz
    Comment actions Permalink

    Hey Rakesh! 

    I'm checking to see if one of our Community Moderators can help you out!

    0
  • Jacob J Christensen
    Comment actions Permalink

    Hi Rakesh,

    I don't see any way to lock the pre-populated fields on the Web Widget in the API currently. 

    However, there is a running beta program for the web widget, and it seems that others are requesting the same thing as you. I would recommend you sign up for the beta and also voice your use case in the existing thread - and give it a vote.

    0
  • Nate Legakis
    Comment actions Permalink

    I'm trying to create my own button with html and attach a handler using Javascript to that button to open the iframe contact form.  I'm also trying to load the iframe in the middle of the browser window.  I know this part is a little problematic and probably doesn't work on some mobile devices, but we're OK with that. 

    The code below that I'm using almost works perfectly.  However, the default Zendesk button shows up in the lower right corner of the page for a second as the page loads.  Is there any way to prevent the default button from showing up?

     

    Here's the code that I am using.

    jQuery(function()                            {
       
      zE(function() {
      //Hide the default Zendesk contact us button in the lower right corner.
      zE.hide();
       
      });
      //Attach click event handler to custom support button in the upper mid section of the page.
      document.getElementById('customZendeskWebWidgetSupportButton').onclick = function ()
      {
      zE.activate();
      //Position Iframe in the center of page.
      jQuery("iframe#webWidget").css('display', 'block');
      jQuery("iframe#webWidget").css('margin', 'auto');
      jQuery("iframe#webWidget").css('top', '0');
      jQuery("iframe#webWidget").css('left', '0');
      jQuery("iframe#webWidget").css('height', '700px');
      jQuery("iframe#webWidget").contents().find(".src-component-container-ScrollContainer-content").css('max-height', '700px');
       
      };
       
       
     

    });

    0
  • Christine Berry
    Comment actions Permalink

    How do you remove the Zendesk link at the bottom of the Web Widget?

    0
  • Jacob J Christensen
    Comment actions Permalink

    @Christine

    Go to: 

    Admin > Widget > Zendesk logo

    And untick the selection as shown above.

    0
  • Comment actions Permalink

    Hi,
    I just want to share with you a different Web Widget customization implementation that i've created few months ago using $zopim.livechat only without zE.Web Widget settings.

    Here you can see it live with animation: https://www.lupa.co.il/

    little info:

    1) first $zopim.livechat.hideAll();


    2) Detecting if Chat is 'Online' or 'Offline and show structure according status_callback(status)

    'online'

    close: [label: chat with us]

     

    open: [link1 - close], [link2 - youtube tutorials], [linke3 - help center], [link4 -  open Chat]





    'offline'

    closed: [label: need help?]

    open: [link1 - close], [link2 - youtube tutorials], [linke4 - contact form], [link4 -  link to help center]

    extra:

    3) Detecting unread messages

    i've created a special notification bubble element that fill up according $zopim.livechat.setOnUnreadMsgs callback so users won't miss messages

     

    Tell me what you think...

     

    1
  • Jacob J Christensen
    Comment actions Permalink

    Looks really great Yaniv! Very dynamic. Is it only available for desktop devices?

     

    0
  • yaniv bussi (‫יניב בוסי‬‎)
    Comment actions Permalink

    Hey Jacob

    The custom buttons can be adjust by design to fit mobile, Can remove labels or change CSS style..i.e scale..transform..width..height..image etc..to earn more space.

    Quicker solution is to check if screen is smaller than 560 pixels then show Zendesk native chat button (structure) that already fits mobiles, example:

            if ($(window).width() > 560) {
                $widget.fadeIn();
            }
            else {
                $zopim.livechat.button.show();
            }

     

     

    1
  • Jessie Schutz
    Comment actions Permalink

    Hey Nate! I'm checking with our Community Moderators to see if there's anything that can be done with this. Stand by!

    0
  • Nitya Subramani
    Comment actions Permalink

    Hi team, 

    We understand that we can customize our Widget to hide the 'View Original article' link from showing up, but is there a way we can hide any other hyperlinks to our Help Center as well? We are struggling with the SSO authentication to take our clients to our Help Center from the Widget, so we thought it may be better to just hide all links to the Help Center within the Widget. Thanks! 

    0
  • Jessie Schutz
    Comment actions Permalink

    Hi Nitya!

    It might be possible to modify the widget code to do this, but I'm not totally sure. Let me see if some of our Community Moderators can shed some more light into this for you.

    0
  • Nitya Subramani
    Comment actions Permalink

    Hi Jessie,

    We were able to get our SSO authentication to work, so we don't need any further assistance here. 

    Thanks!

    0
  • Jessie Schutz
    Comment actions Permalink

    Great news, Nitya! Let us know if you need anything else! :)

    0
  • Karim Tarek
    Comment actions Permalink

    Is it possible to change the success message for the contact form? I couldn't find anything about it in the doc 🤔

    0
  • shuxin
    Comment actions Permalink

    Hey!

       i just download a Zendesk sample app. How to add a carousel image in chat box?

    Where should i start

    0
  • Jessie Schutz
    Comment actions Permalink

    Hi Karim! Welcome to the Community!

    It doesn't look like it's possible to customize that particular page; I don't see it in the list of HTML templates in the Customize design dashboard in Guide.

    1
  • keith chee
    Comment actions Permalink

    Hi, is it possible to get status for the agent? If agent online -> zE.activate() 

     

    Thanks

     
    0
  • Ramwell Claudio
    Comment actions Permalink

    Hi Keith! 

    This would only be possible if the status(online/offline) you will pull is from the chat dashboards account status and not from the Support panel as there is no API function for the "logged in" Support agents.

    So if you will be pulling status of your online agents from the chat dashboard to launch and activate the Web widget you may use:

    $zopim.livechat.setOnStatus(); > zE.show();

    Zendesk Chat API: https://api.zopim.com/files/meshim/widget/controllers/LiveChatAPI-js.html#setOnStatus 

    Hope this helps!

    0
  • Mongkon BBN
    Comment actions Permalink

    How can I set chat widget theme with 'docked' type? 

     

    Thank you

    0

Please sign in to leave a comment.

Powered by Zendesk