Advanced customization of the Web Widget

Have more questions? Submit a request

182 Comments

  • Erica Wass
    Comment actions Permalink

    @heather: I see the Widget fine in my tests in Safari; I've created a support ticket for you.  

    0
  • Joshua Bentley
    Comment actions Permalink

    It's great to be able to use these customizable options! Our help center is moxiworks.zendesk.com and I'm trying to get the Help button to align with the right edge of the rest of our elements and stay there no matter how the browser is resized. Linked are a couple screenshots of what we want it to look like. You can see what it actually looks like on the live site now.

    Full Screen
    Resized

    Any tips?

    0
  • Erica Wass
    Comment actions Permalink

    @joshua. We currently do not have a way to enable you to fully anchor the launcher. What you could do though is build your own button within the site design that could serve as a custom launcher and then you could use zE.activate to have it open the Widget.

    0
  • Joshua Bentley
    Comment actions Permalink

    Thanks, Erica. I played around with that a little bit on our site and it seems easy enough but how do I enable that without displaying the widget?  Also, I'm not sure how we'd get the button to open the menu in a different location. Example: I'd like the customer to click on it and have the widget open right where the button is.

    0
  • Erica Wass
    Comment actions Permalink

    @joshua You'd use zE.activate in conjunction with zE.hide; you could use the offset and position settings as well. It won't remain perfectly oriented through zoom changes but I think if you play around with it you should be able to get something that works well.

    0
  • George Kaloyanov
    Comment actions Permalink

    Looks like the web widget's options to customize have improved big time for the last 2 years. We are evaluating finally using the widget. That said, is there an option to customize the size of the expanded widget?

    Re-positioning and offseting is good but what about resizing?

    0
  • Greg
    Comment actions Permalink

    Hi George!

    Thanks for the feedback! 

    Erica previously noted this, so rather than paraphrasing her words, I'll share what she had said:

    "No, I'm afraid that there is no sizing configurations currently available for the Widget. But I'd be eager to learn more about your design needs. The Widget is optimized for mobile devices so should appear well on mobile devices, so I'd be interested in learning more about what you're seeing."

     

    0
  • Hoff Ho
    Comment actions Permalink

    How do I get the category id to which the section/article belongs when I am on that page? For example, if I am on the Section or Article page and I want to filter the widget's search scope to the Category to which it belongs. How can I access the category id?

    I am trying to set the category filter via script on top of the Section/Article page template, but I can't access the category object.

    What's the best way to do this? Thanks.

    0
  • Benjamin Goff
    Comment actions Permalink

    Hi Hoff Ho,

    If you're looking for the Category ID, you should be able to find that by either navigating to that Category and then looking in the URL for that page:

    Or if you inspect the URL for any links to that Category, then you should be able to observe it at the end of the linked URL as well:

    Cheers,
    Ben Goff

    0
  • Hoff Ho
    Comment actions Permalink

    Thanks Ben, the problem is that I need to find the category when I am either viewing a Section or an Article. For example, from an URL such as ../sections/201416433-General-FAQs or ../articles/210618263-How-can-I-cancel-an-appointment-I-booked-online-, how can I programatically tell which Category it belongs to?

    The Section object https://developer.zendesk.com/apps/docs/help-center-templates/objects#section-object does not have any properties to the parent Category. I can probably write some code to parse the breadcrumbs object and look for the Category name from there, but I am asking if there is a better way.

    0
  • Benjamin Goff
    Comment actions Permalink

    Hey Hoff Ho,

    Unfortunately I'm not aware of a better way to surface that information, other than through the breadcrumbs, as you suggested. As you've pointed out, we unfortunately don't have another object or placeholder specific to Sections, to pull that information through.

    Cheers,
    Ben Goff

    0
  • Hoff Ho
    Comment actions Permalink

    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
  • Zac
    Comment actions Permalink

    Help Center API endpoints for this are available to anonymous end users... could you do a call to the section endpoint based on the section ID and retrieve the parent category ID?

    https://developer.zendesk.com/rest_api/docs/help_center/sections

     

    0
  • Jessie Schutz
    Comment actions Permalink

    Thanks for coming back and sharing what you figured out, Hoff! 

    0
  • Dan Lautman
    Comment actions Permalink

    Is there a way to change the colour of the Help Center search bar within the Widget? As per image below e.g. so the gray bar is navy and font is white.

    My theme colour is navy blue, which looks great when the widget is closed, but this doesn't really fit.

     

     

    Also, is there a way of turning auto complete on within the widget?

    0
  • Erica Wass
    Comment actions Permalink

    Hi @Dan, not currently but we are working on some new enhancements that might include a theme colored header. Can you tell me a bit more about your goals for autocomplete? There are a few types so I want to make sure I'm fully across what you're trying to achieve.

    0
  • Phil
    Comment actions Permalink

    Is it possible to skip viewing the article contents within the Web Widget? For example, if someone clicks on one of the articles it would open a new window and take them directly to it. I would prefer this over showing the consents within the Web Widget itself.

    0
  • Dan Lautman
    Comment actions Permalink

    @Erica - Thanks v interested to hear more about the new enhancements when ready. For the auto-complete, I'm hoping there's a way that a user can see suggested results 'on the fly' without having to hit enter/click search. e.g. if I type in the word 'cancel', articles which match this entry would be suggested to the user without them having.

    Hope that makes sense.

    Also a further question - is there a way to make the widget less obstructive in mobile? e.g. have it partially hidden on the bottom of the screen? I'm finding it is a little distracting from our main site content when on a smaller device.

    0
  • Shannon Lewis
    Comment actions Permalink

    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
  • Heather Cook
    Comment actions Permalink

    I was wondering if there is a way to suppress the widget on a certain page of a website? For example we want the user to log in to our website first before they can then use the widget, so we want to suppress the widget on the logon page.

     

    0
  • Jessie Schutz
    Comment actions Permalink

    Hey Phil!

    There isn't a setting for this so, if it's possible, it would require adding JS code to the widget. I'm sorry I can't be more help than that.

    0
  • Erica Wass
    Comment actions Permalink

    @phil to add to Jessie's comments, the individual articles also have a "View original article" button that will take them to that article in the Help Center. I'm eager to hear more about your use case and your preference to not display article content in the Widget.

    @dan thanks for your additional feedback. I have received some other requests regarding the mobile launcher so we'll be seeing how we could add some greater flexibility. In the meantime, you could create a custom launcher within your site design that would activate the Widget. We don't have any specific plans for the autosearch, but have made a note of the request.

    @shannon Thanks for writing. It's something we're thinking about broadly so I appreciate your use case. 

    @heather I think you have a few options. You could 1) remove the snippet from the login page or other pages where you don't want it to appear, or 2) Use the Suppress advanced customization to suppress all features, or 3) Develop some custom code that only displays the Web Widget to logged in users.

    0
  • Jon I.
    Comment actions Permalink

    We need at our company web widgets into basque, but it isn't available. Would it be possible to help translating it?

    0
  • Hoff Ho
    Comment actions Permalink

    I have the following piece of code which works perfectly in Chrome but not IE 11:

    <script type="text/javaScript">window.zESettings = {webWidget: {authenticate: {jwt: <?php echo json_encode($wsstoken); ?>}, helpCenter: {suppress: false, filter: {category: '200322819-Practice'}}}};</script>

    I have a valid $wsstoken, and the category '200322819-Practice' has restricted access hence the JWT required. The behaviour in IE as if the JWT authentication does not work. FYI I have also tested the filter of a category which does not have restricted access and that worked as expected.

    Do you have any suggestion on how to get this to work in IE 11?

    0
  • Diogo Maciel
    Comment actions Permalink

    Hi Jon!

     

    Basque translation is available through volunteer transators! You can try implementing it on your Guide using our Web Widget API

    https://developer.zendesk.com/embeddables/docs/widget/api

     

    Hope this helps!

    1
  • Jon I.
    Comment actions Permalink

    @Diogo Maciel, could you tell me where must I look into to customize translations? Thank you!

    0
  • Jessie Schutz
    Comment actions Permalink

    Hi Hoff! 

    I see that you're already getting assistance with this in a ticket, so we'll be assisting you from there!

    0
  • Hoff Ho
    Comment actions Permalink

    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
  • Erica Wass
    Comment actions Permalink

    @hoff ho, not currently. You could add one to an article, however, and it would open.

    0
  • Meirav
    Comment actions Permalink

    @Erica Wass - Can you please clarify? Do you mean that it is possible:

    1) To add an article link to the widget?

    2) To add an external link to an article?

    We would also like to add a Help Center article link to the widget, much as it is possible to do with the web ticket creation form described here:

    https://support.zendesk.com/hc/en-us/articles/203661336-Customizing-custom-ticket-field-descriptions-with-HTML

    0

Please sign in to leave a comment.

Powered by Zendesk