Advanced customization of Web Widget (Classic)

Return to top
Have more questions? Submit a request

264 Comments

  • Thomas Verschoren
    Community Moderator

    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

    5
  • Lena Schneider

    Is there any way to customize the size of the widget. It's a tad to big for our page, and I'd like to change things like padding, and margins 

    4
  • Thibaut

    Hello,

    I'm looking to change two things that don't make sense to me on the Web Widget.

    1 / When the Web Widget is displayed in full screen on mobile, I think it would be better to change this icon. More understandable.

    2 / Also on mobile, I would like to add an "OK" or "Search" button, something like that, in the search bar. Few people are familiar with having to press the "Return" key on their smartphone keypad to validate a form. When I watch my visitors sessions with HotJar, I have approximately 20% of people typing their search but failing to validate the form ...

    Guess it is not possible to achieve this with custom code? Don't you think these are good ideas?

    Thanks.

     

    4
  • Joshua Bentley

    @erica I love this thread. Thanks for all the great help and suggestions. One question I have is whether or not you can add text to the contact form. For example, something above the Name field that gives all of your contact options. Or, better yet, maybe something in the web widget where I could put that information on the widget's search results page?

    Example:

    3
  • Nicole Waxmonsky

    Hi Aimee - Any plans to make it easy to adjust the placeholder text in the helpCenter component? 

    3
  • Jacob Johst Christensen
    Community Moderator

    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
  • Eugene Bos

    How to prepopulate a description field?

    2
  • Gab
    Zendesk Customer Advocate

    Hi Sushil,

    To have the widget script load only upon clicking the button, you just have to insert this to your html:

    <script>
      function widget(d) {
          var script = d.createElement('script');
          script.type = 'text/javascript';
          script.id = 'ze-snippet';
          script.async = true;
          script.src = 'https://static.zdassets.com/ekr/snippet.js?key=<key>';
          d.getElementsByTagName('head')[0].appendChild(script);
      };
      </script>

    Just replace <key> with your own widget key. We can't guarantee that it will work on your account, but we tested this and it worked on a test account.

    Hope this helps. Thanks Sushil!

    1
  • Daniel Blanco

    Hello,

    Our use case is somewhat similar to @Dana Fine's: we have a few important customers who would prefer we not direct their users to our helpcenter (because they have their own internal organization helpcenters), though for the vast majority of our customers have in-app access to our helpcenter would be really great.

    So I'm wondering if it's possible configure the web and mobile widgets to be suppressed/hidden from just a few, specific organizations?  

    Thank you

    1
  • Erica Wass
    Zendesk Product Manager

    @Tharrison: Are you looking for more search results or for more Contextual Help suggestions? Our rationale for limiting Contextual Help to 3 results is so that we can surface the most relevant result or results that the user can click straight into. This contrasts to providing a more comprehensive set of results when a search is conducted, where we now offer 3 results and a View more button for the end user to see additional results. I'd be eager to hear more about your goals for this.

    1
  • Miranda Burford
    Zendesk Product Manager

    Hi Ryan Oakman,

    There's a couple of different ways that you could go about this.

    1. Chat triggers

    Using Chat triggers, you can craft a tailored message to your site visitors depending on the conditions you set.  That means, you could enable a chat triggered message to fire when there's an incident or bug that is increasing chat volume.  You can find more information about how to setup chat triggers here.

    2. Customising the Web Widget title

    Another option for you to consider is customising the title that displays within the Web Widget.  There isn't a whole bunch of real estate here for you to work with but it is a very prominent place for you to call out timely messages to your visitors.  You can use the title API to customise this text.

    Hope this helps!

    - Miranda.

     

    1
  • yaniv bussi (‫יניב בוסי‬‎)

    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
  • Erica Wass
    Zendesk Product Manager

    @meirav, You can add Help Center functionality to your Web Widget and use Contextual Help to suggest articles. You can add external links to your Help Center article and the widget will open those links in a new tab.

    1
  • ashwin Indore

    Thanks Yaniv for sharing this information. I tried the solution but it is not working for me. When I apply this solution and click on chat link, the widget blinks once and then disappears totally.

    Please keep posting if you get any other update from Zendesk. Thanks in advance!

    1
  • Zac

    For the Contact Options component: if Chat is offline, will Contact Options still be visible, or will it default to the Contact Form?

    1
  • Devan - Community Manager
    Zendesk Community Team

    Hello Fiona,

    So if Chat is configured for the Web Widget, end users are automatically routed to a chat, if a chat agent is available. However, you can allow end users to choose between chatting with an agent or completing a contact form, even if a chat agent is available. If a chat agent is available when the user clicks the launcher, but the agent signs off before the chat starts, the end users may see a message indicating that the agent is not available.

    The following help article should go into further detail on how to go about customizing the Web Widget to facilitate these settings.

     

    1
  • Andrew Warner

    Hi all, 

    Does anyone know if it's possible to change the default font type in the Widget? We'd like to change the entire font face used. 

    We would also like to be able to open an article in a new window when clicked rather than open it in the widget. 

    Thanks in advance. 

    1
  • Shannon Lewis

    Any plans to allow us to customize the "message sent" pop-up?  I would like to use this as a thank you page and set expectations on when the customer should hear back from support. This is valuable real estate and a big check mark is a waste of space.  thanks

    1
  • Dan Ross
    Community Moderator

    hey Joy,

    When updating multiple parameters, you can do them in the same call. When you run it as two scripts, I imagine what you're seeing the latter of the two will be the one taking effect it's likely overwriting the first script.

    Try something like this! I think I have the syntax right, Zendesk totally butchers any attempt at code formatting and indentation. 

    <script type="text/javascript">
    window.zESettings = {
    webWidget: {
    contactForm: {
    title: {
    '*': 'Submit Support Request'
    }
    },
    offset: {
    vertical: '125px',
    mobile: {
    vertical: '50px'
    }
    }
    }
    };
    </script>
    1
  • Miłosz Ryniecki

    @Jacob thank you that helped!

    1
  • Andy Whitlow

    How do I add multiple settings to the contact form. I can add 'Subject' and 'Title' separately but when I add them both, neither of them appear.

    1
  • Hoff Ho

    Is there a way to add a custom link to the widget? I would like to add a permanent link back to the Help Center website (at a particular category), but I can't see how to do this.

    1
  • Sebastian

    Any news about my question about how it would be possible to link the contact form button directly to the real big contact form?

    1
  • Hoff Ho

    FYI I managed to get this to work. It's not the most elegant code but it works.

    Append to JS

    function getCatFromBC() {
    // returns the Category Name from the breadcrumbs - snippet below
    // <li title="Patient">
    // <a href="/hc/en-us/categories/200431715-Patient">Patient</a>
    // </li>

    var CATS = '/categories/';
    var QUOTE = '"';
    var x = document.getElementsByClassName("breadcrumbs");
    var y = x[0].innerHTML;
    var z = y.search(CATS);
    var cat = '';

    if (z > -1) {
    var a = y.slice(z + CATS.length);
    var d = a.search(QUOTE);

    if (d > -1) {
    cat = a.slice(0, d);
    }
    }
    return cat;
    }

    Put this in the Section or Article pages

    <nav class="sub-nav clearfix category-breadcrumbs">
    {{breadcrumbs}}
    </nav>

    <script type="text/JavaScript">
    var catName = getCatFromBC();

    window.zESettings = {
    webWidget: {
    helpCenter: {
    filter: {
    category: catName
    }
    }
    }
    };
    </script>

    BTW, this works better than the search box {{search scoped=true}} in the Header as that does not seem to work. I have read a few recent threads reporting this and I am also getting this. Not sure if it is a byproduct of introducing the web widget.

    1
  • 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
  • Joy Voltenburg

    thank you! That works great!

    1
  • Amr Selim

    Hi guys
    Here's my widget on the staging server https://petmapz.staging.wpengine.com/ 

    1. I want users to search for a possible answer first then if there is no possible answer they get a button (or link) to submit their question (submit a ticket) right there on the widget. I can't find this part here on the site.
    2. Is it possible to make the view more button take the user to the portal (guide)?
      Or display that link instead of the view more. 
      How can I do that?

    @Erica Wass , Eager to hear from you.

    Thank you

    1
  • Sean Crownover

    Does the help text color really have to be the same as the widget color?  Seems like they are linked which as a web designer makes no sense at all to me.  When I change my widget color, all the text after entering a question is colored the same as the widget?  Is it possible to have a separate color, suitable for reading than the widget color itself?

    1
  • Lena Schneider

    Erica - My use case is on desktop. Our page has relevant data in all corners of the page, and often that big help button covers the content. I'd like to be able to either resize the button, but even better provide my own html to render it. 

    1
  • Jessie Schutz
    Zendesk Team Member

    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

Please sign in to leave a comment.

Powered by Zendesk