Start here: Web Widget customizations beta

Comments

45 comments

  • Official comment
    Avatar
    Erica Wass

    Hi all:

    We have added some new items to this beta, answering the following questions:

    • How can I change the position of my Web Widget?
    • How can I select certain functionality to appear in the Web Widget on particular pages?
    • How can I change the theme color on different pages or sites?
    • How can I change the z-index, or visible ordering of the Web Widget?
    • How can I automatically restrict searches to particular sections, categories or labels?

    I look forward to hearing your feedback on them.

  • Avatar
    Matthieu ETIENNE

    Hi,

    Great documentation.

    That said,  on one of your artiucle related to the "web Widget" configuration, I notice that from the agent interface (menu Channels / Widget), it's posible to add to to the widget a Custom ticket fields.

    Currently, in some of our Help centers, we offered more than 1 contact form (one contact Form per category).

    I wondering if you planned to give us the ability to use the class 'form-field select optional request_ticket_form_id', in order to display a drop down menu where the customer will be able to select the form he wants to use and in other hand, if the full form can be shown in the widget (including conditional fields rules?.  Thanks

    Matthieu 

  • Avatar
    Erica Wass

    Hi @matthieu
    Thanks! As it happens we are working on a project to allow customers to enable Ticket Forms in the Web Widget. It won't be part of this Web Widget customizations beta but will be its own beta when the time is right. I'll reach out privately though to get some feedback from you on our current thinking.

  • Avatar
    Robert Owen

    Hi Erica,

    Thanks for providing access to the beta.

    I was excited when I saw that you had added the ability to offset the position of the widget. Unfortunately it doesn't achieve what we need.

    The widget has been designed to only open from the bottom of the screen. We don't want to have a separate widget button showing at the bottom of the screen. We have our own menu bar along the top of our application and have previously shown the help search box when a user clicks on our Support menu option.

    With the new widget we can hide the button and activate the search when a user clicks on the support button, great! However when a user clicks a button at the top of the screen we don't want them to have to the travel all the way to the bottom of the screen to enter the search details - it's just plain bad design.

    So we want the help search box showing at the top of the screen. Hence the excitement at the offsets.

    I have tried the following code to position the widget to the right and top of the browser window -

    <script>
    var horizpos = String(window.innerWidth - 400) + 'px';
    var vertpos = String(window.innerHeight - 350) + 'px';
    window.zESettings = {
    webWidget: {
    offset: { horizontal: horizpos , vertical: vertpos }
    }
    };
    </script>

    However, when the user enters a search term, or clicks on a search result the widget window extends upwards i.e. the bottom of the widget remains fixed. This doesn't work for us because the top of the widget then extends beyond the top of the browser window and the user can't see the title or click on the X to close the window.

    This is pretty basic stuff but is crucial to making the widget work for us. I'm surprised that you are forcing users to design their app based on the widget button appearing at the bottom of a page and not allowing us to select the top of the page. Rather than using an offset it would be better to extend the options in the Zendesk settings to instead of just left and right to be also top or bottom.

    Cheers,

    Rob.

  • Avatar
    Erica Wass

    Thanks @robert! We are exploring the best way to include that in-widget so should have some progress on that for you in due course. Could you add that request as a post in the beta forum at https://support.zendesk.com/hc/en-us/community/topics/200993567-Zendesk-beta-Web-Widget-Customizations? Then others will be able to follow and add additional thoughts and I'll be able to update that thread with questions or as I have more to report.

  • Avatar
    Emma

    I see that you provide the option to suppress the chat and Help Center features. Is there a way to suppress the contact form? We want to provide help articles in product but prefer that users contact us via our existing Help Center contact form as we collect a lot of data through that form that we can't collect via the web widget.

  • Avatar
    Erica Wass

    Hi @emma. Thanks for your feedback. We are developing flexibility for contact forms in the Web Widget as well as additional suppression options.Could you add a request as a post in the beta forum at https://support.zendesk.com/hc/en-us/community/topics/200993567-Zendesk-beta-Web-Widget-Customizations? Then others will be able to follow and add additional thoughts and I'll be able to update that thread with questions or as I have more to report.

  • Avatar
    Andrea Saez

    Awesome stuff! Our UX Designer was just asking if the web widget can be customized. What about stuff like custom CSS and look/feel of the button itself? 

  • Avatar
    Erica Wass

    Thanks @andrea! If you have specific examples of what you are looking to change or if you have an end state that you are looking to get to then we'd be really interested to learn more. In the meantime, you can already create your own launcher. That way it can look exactly how you want it; then you can use the JavaScript APIs to create the interactions you want when someone clicks on it.

  • Avatar
    Andrea Saez (Edited )

    Hey Erica, 

    We have our own buttons and are looking to add the same styling in our app as the other buttons, to keep things consistent. We're still in the process of updating this anyway, so it isn't a rush, but it would be nice to have. It would also be interesting if we could have a custom version for our marketing site and a different version for our app. Right now the widget actually blends really nicely with the marketing site, and we're testing Zopim to see if it's something we can eventually add in-app as well. 

  • Avatar
    Максим Бережной

    The method for changing the text used by the Web Widget doesn't seem to work. What I write is:
    window.zESettings = {
    webWidget: {
    launcher: {
    label: {
    'en-US': 'Find out more',
    '*': 'Get help'
    }
    }
    }
    };

    Why it is not working?

  • Avatar
    Erica Wass

    Hi @Максим I've emailed you privately to troubleshoot your implementation. 

  • Avatar
    Manuel Frick

    I have the same issue with the Web Widget (Naming), nothing changes. Also tried the language "de" but it also has no effect. The other settings work fine. Iam also interested in a solution/hint you provided to Максим.

    <script type="text/javascript">
    window.zESettings = {
    webWidget: {
    offset: { vertical: '100px' },
    helpCenter: {
    suppress: true
    },
    contactForm: {
    subject: true
    }
    },
    launcher: {
    label: {
    'de': 'Support kontaktieren',
    '*': 'Get help'
    }
    }
    };
    </script>

  • Avatar
    Erica Wass

    Emailing you privately as Manuel, thanks!

  • Avatar
    Erica Wass

    Hi all: I'm pleased to announce that the first set of customizations from this beta has been released for all to enjoy. The Announcement is here. We will continue to enhance the Web Widget with some additional flexibility, so will be leaving this beta open for exploration of those features.

  • Avatar
    adam

    Not sure if this is still the right channel for this feedback, but we finally made the migration.

    Feels like high-priority: 

    - ability to control if "top suggestion" links will display article in widget or target a new window (see note)

    Feels like nice-to-have:

    - ability to more finely control the application of color to various elements. we really want to use a dark grey for the "help" button color, but then the "contact us" button in the widget is too high-contrast for the users. We should be able to set the help button, link color, and contact button color immediately

     

    note = on the first day of implementation of the new help widget, we saw an increase in the number of tickets from our users for issues which previously would have been deflected by finding a canned answer in the help center. we believe this partly due to styling issues, but mostly due to the fact that the search for surfacing articles offers fewer results for users. as such, they don't see their exact answer, and they give up before finding the correct article. if we could deflect them into the help center, they could explore more easily before deciding to contact support

  • Avatar
    Erica Wass

    Thanks @adam for the great observations based on your experiences. I've made some notes. A couple of quick things I thought of: 1) If you haven't yet, I encourage you to explore the Contextual Help JS APIs to escalate the visibility of specific articles on specific pages of your site or that answer questions that commonly arise from tickets submitted on particular pages of your site. 2) We are working on a View more results feature which will allow users to see additional results that match their search terms. That should help to mitigate some of the concerns you raised as well.

  • Avatar
    Philip Green

    Good afternoon!

     

    I would love to see the ability to customize the image that is intially displayed on the page showing Help.  Ideally something like the Zopim chat customizations you can do during the setup. 

    Adding and branding the icon as your own initially, the ability to minimise it to then show help and so on.

    Is anything like this coming in the future?

    Thank you.

  • Avatar
    Oleksandr Muzychko

    Hi,

    We find the feature zE.identify() very useful. So it allows us to pre-populate name & e-mail values on the form.

    Is there any way to do that for other fields? (e.g. description)

    We also have added a set of custom fields to the Widget via Zendesk Admin panel and need to populate some of these automatically.

    Also it would be great to make (optionally) such custom fields as read-only for the end-user (or even hide them from the form).

    E.g. say our system supports multiple users per single billable account, so additionally with the user identification we would like to have an AccountID to be set automatically in the Widget form as a read-only field, so support team upon receiving new ticket would navigate to the account details directly (skipping additional step of searching the account via user email).

  • Avatar
    Dave Weldon

    After switching to the new widget, our ticket volume increased significantly. One suggestion we received was to enable contextual help to improve the search results.

    I'm playing around with the API now, but it seems unusable in a SPA because there is no notion of a reset. If I call setHelpCenterSuggestions with a search string, that works well for a given route, but the suggestions are sticky. As soon as I switch to another client-side route, I get the previous suggestions.

    So I'm left deciding between always having some generic suggestion + a few page specific ones, or customizing every route. If there was an API call to reset the suggestions, that would give me the UX I want: no suggestions on some routes, and context suggestions on others.

    Alternatively, if searching for a nonsense string like "foobar" would reset the results, I'd also be fine with that.

  • Avatar
    Erica Wass

    @Dave I'm going to convert your comment into a ticket because you should be able to get that working better. 

  • Avatar
    Erica Wass

    @Oleksandr thanks for writing. Your use case is valuable to us as we explore additional features. Could you tell me a bit more about your need for pre-populating the description? 

  • Avatar
    Erica Wass

    Hi all:

    We just added the View more search results and related JavaScript API to hide it to this beta.

    I look forward to hearing how it works for you!
    Erica


  • Avatar
    Jennifer Eolin

    We would like to change the text of "How can we help?" in the search bar of the widget. Our customers are getting confused and think its a chat box. (We have many strings of conversational text that show up in our Insights metrics as items 'searched' that then resulted in a ticket being opened.)

    We'd like to change it so as to be clear that it's not a chat box, just a search box. Can you help? :) 

  • Avatar
    Dave Weldon

    I'm not sure if this is the same point @Jennifer is making, but there is something about the UX of the "contact us" form which doesn't make it clear to users that an email is about to be sent and a ticket created. With the new widget we now get A LOT of tickets created with strings that look like search terms instead of actual descriptions of a problem. We then have to follow up and ask what the real issue was and the whole process takes much longer.

  • Avatar
    Michael McAfoos

    Yep, totally agree with both Jennifer and Dave. Customers are "searching" with conversational text, and it seems to be because they think they are chatting whereas they are actually just searching the help center through the web widget

  • Avatar
    Erica Wass

    Hi all: Just an update that we have fully released the View more search results feature. Here is the announcement with more information. 

  • Avatar
    Erica Wass

    @jennifer We have had a couple of requests to change the placeholder text which we are exploring but we have actually seen this issue crop up with different language permutations as well. One thing that I think could help is if you did some advanced configurations for Contextual Help with zE.setHelpCenterSuggestions so that the Widget opens with suggested articles, a search bar and a contact button all at once. 


    @dave I think your experience is a bit different perhaps to Jennifer's but is interesting. Have you tried perhaps customizing the Contact Form title text to provide a bit more clarity? 

  • Avatar
    Heather R

    Hi! We have successfully customized the text of the launcher button, offset its location, and changed the title string text. 

    Would anyone have a hint on how we can create a feature that shows text when a mouse hovers over/near the launcher button? 

    Thanks for this beta! 

  • Avatar
    Erica Wass

    Thanks @heather! I haven't heard that request before. Can you tell me a bit more about your needs and goals for the hover text? 

Please sign in to leave a comment.

Powered by Zendesk