[COMPLETED] Web Widget Customization Options
CompletedThe customization of the Web Widget is very limited. I would like to customize the following, but unfortunately can't:
- Change the text on the Help-button (for example: 'Support')
- Change the text in the input fields
- More styling options. Now we can only change the color of the button. But it would be great if we could change: the shape of the button, the shape and color of the input fields and pop-up window etc.
- Option to position the button to the center or upper left/right of the screen.
Are any of these options in development? If so, when can we expect them?
-
Hi,
Aaron here, I'm the Product Manager for the Web Widget.
Thanks for your feedback. We do not have any customisation options in development.
That said, I'm always interested in hearing from our customers: Of the options you have listed above, which would be the most valuable to you and why?
-
Hi Aaron,
The most important thing for us are the ability to
Change the text in the input fields:
our way of communicating with our customers differs from time to time. We use several widgets on multiple website i.e a B2B website and a consumer website.Change the text on the Help-button
We'd rather have the 'Support' or change the text to something else that suits the website/customers best. -
We also have the same requests for the web widget but most critical is the position of the web widget. It would make most sense to us if it were in the center.
Our products are web apps which have a white background and people cannot see the web widget when it pops up (it blends into the background). We have hidden the widget using the APIs to only show when our clients click on an existing support button (zE.activate({hideOnClose: true})). Since our button is at the top and the widget appears at the bottom they never see it. We've been using the Feedback tab which our clients loved and have already told us they miss.
This will affect the self-service bit of our zendesk while more tickets are created for questions we've already addressed in our Help Center.
So either we have options to change the position, or perhaps be able to modify the colour to improve visibility of the widget.
Changing our UI is certainly not an option for us.
-
Hi,
Yes, the Customization of the button and the title of the form is critical! As it is now I don't think I could use it without changing the text. "Leave Us A Message" is not a good title for support. The customer sees that text as saying "We will not be answering your question, but type it out anyway".
Arron, when can you roll this out? Love the widget but it's not usable for us with the stock wording.
Can it be overwritten with a style sheet?
Thanks - I love Zendesk!
Mark
-
Hi Mark,
If you had a second option for the text instead of 'Leave Us A Message' what would it be?
-
I wish that the web widget let you have a field to populate the 'subject' field in the ticket. At the moment have the entire description entered in the widget appearing as the subject is just messy.
Even if there was a category field that auto populated the subject with a shorter description that would be better. We have a category as a custom field, but we don't have anyway to get this appearing as the subject line.
Here's hoping that Zendesk add this in the future.
-
Aaron - great to see you're taking your customers seriously on this one. The two priorities for us in being able to customize the button are:
- Position - Bottom left and bottom right don't really work for us. Greater flexibility in positioning besides having us pick a specific quadrant would be great. Then we can decide where it should go.
- Text - Our company website already has a lot of links that say "Help" so I'd love to be able to change it to something like "Support" or "Get Answers"
-
Hi,
I agree Joshua Bentley:
- Change the position of of Help-button
- Change the text on the Help-button
are very important for us.
-
I would agree with all of these options. Additionally, I think being able to specify a DOM target for the widget to be injected into would be extremely helpful. The way i would imagine it working is as follows:
Client specifies an empty div element with an id for the widget button to be injected.
on pageload, Zendesk would then inject the button code to the specified div. The widget would retain all it's normal style and behavior, but the actual button trigger would be able to inherit styles from the main site.
Thoughts?
-
Aaron, I agree with Mark. "Leave us a message" isn't a great title for the contact form. If it were simply something like "Contact support" it would at least not give the impression that no one is home. But ideally, we'd be able to set it to whatever we want.
-
There are several option here to alter some stuff, although it's a bit technical.
Changing the position (load custom CSS on specific elements) and change values on specific elements
The most common thing we found was altering the position of the widget, I know it's not the most preferred way, but it is possible. Check this out:
<script> var helpCenterExists = setInterval(function() { /* Wait until helpcentre widget is loaded */ if ( $('#helpCenterForm').length ) { /* Change position of widget */ jQuery("iframe") .attr('style', 'right: 50% !important;'); /* Alter the text on the widget open button */ jQuery("iframe#launcher") .contents() .find('.Button.Button--launcher span') .html('Click me for help!'); /* Alter the buttons text on widget */ jQuery("iframe#helpCenterForm") .contents() .find('.Container.Container--popover .u-textRight input[type=button]') .attr('value','Get in touch'); clearInterval(helpCenterExists); } }, 100); </script>Now you have a way to override the CSS on the Widget. The trick here is to load the css after the HelpCentreWidget is loaded.
If you need any further assistance, let me know.
-
Hi Kay (and everyone else),
Changing the position of the widget or doing anything else by overriding the CSS is not supported.
We continually deploy updates to the widget code so 'hacking' the CSS in this way may result in strange behaviour of the widget on your public website.
-
Hi Aaron,
thanks for your quick reply.
Indeed it is not support, however it is still a solution. One of your first comments stated that you don't have any customizations in the pipeline.
As you may have realised, having the button only available to the left or right is not enough for several users, including several of our customers. Since there 'save button' and/or menu are common on those positions.
For many of them it means, not using the widget at all, developing one of their own ($$$), or dealing with that sometimes there are changes in the widget, where you have to edit them. I prefer to use the widget.
@Everybody, while it is not supported, but if you're still looking for a solution, we've have a way to capture the last search query as a subject on new tickets. As I don't want Aaron to go crazy ;-), I'll only post it if you let me know you're interested.
@Aaron, in regards to changes on the widget as you're stating, are these documented in https://support.zendesk.com/hc/en-us/sections/200623796-Release-notes?
-
We would love to be able to customize the web widget. (I.e. Change the name)
Also when a customer clicks on the widget it should have an option to bring up certain links that customers use often.
-
I too am looking for a way to customize the web widget.
At the moment we are using the old feedback tab customized to fit into our web portal.
I do understand that you have chosen to make the widget appear in the left or right corner because this makes sense for UI reasons.. However, because this makes sense we are already using these places for menus and notifications of our own.
This means that while both I as the support manager and the developers like the web widget better than the feedback tab we are still using the latter :(
Just as you guys, we want our customers to have the best experience possible and that's not the case at the moment.. (although they don't know what they're missing, since they have never seen the new web widget)
-
Hi every one,
As a french CRM working with a French Website, the button to start an online chat only says: "Chat" and we believe that this is not the most professional way to enhance a conversation.
So this customization could actually be helping us a lot.
Please make it possible to change the text on the button to start the conversation.
Thanks for reading :)
-
I want to be able to control the placement and look of the button. As a team, we've found ourselves in a bind several times because of the inflexibility of the button and have found ourselves making some really uncomfortable UI compromises because of it.
The menu that pops up is all fine, I believe Zendesk should control that experience. But please, let me choose what the button looks like.
-
Same here.
We need to change the text from 'Help' to 'Support' (like Joshua, we have too many other 'Helps' on our sites). We'd like to change 'Chat' as well.
We'd like control over where we can place the widget. Placing it within the design of our webpages would be better than having it float bottom left or right over other page elements.
And critically, we need to say something more focused on technical support than 'Leave us a message'. We have students on our sites, and we're using Zendesk for tech support only (we have other channels for pedagogic support, pre-sales questions - and it's not practical for us to use Zendesk for those). So 'Leave us a message' will have students asking our tech team pedagogic support or pre-sales product questions.
-
Hi Aaron Cottrell,
I have a suggestion for your question: If you had a second option for the text instead of 'Leave Us A Message' what would it be?
It would be really great if we had the option to change it to something like "get in touch" or "message us". It would be best if we could customise this though because everyone probably wants something different.
A field on the channels/widget/customisation page would be perfect.
-
My web-site is just myself so having the help widget say "How can we help?" is goofy and a turn off.
-
Not being able to customize the web widget is literally a deal breaker for us and I think we'll need to find another Support system until this is an option.
We have invested thousands into the design of our site, and the web widget doesn't match our theme at all. It is crucial that we be able to customize it to match the rest of our sites theme.
-
I'm really surprised by the length of time that has passed and all these wonderful suggestions that haven't been rolled into the web widget.
Simply put, the web widget needs much greater customization control.
* The ability to have multiple web widgets that have different customization properties on each
* The ability to change the web widget header text
* The ability to change the web widget button texts
* The ability to add attachments to the web widget itself
-
I agree with David Moses here...it seems that most people are in agreement that it would be most helpful to change the text, and it's puzzling why this is not a feature yet. I can't imagine that it would be a very difficult update. I saw on another forum the reasoning from Zendesk is that since the word "Help" exactly precisely fits what the widget does, it would be inappropriate to change it.
I disagree. I think if changing the text would make the widget imperfect, but usable, it would be worthwhile. As it happens, we have decided that since the word "Help" is absolutely not workable for what we need to use the widget for (we'd like the word "Feedback" so we could get quick comments about various features of our website during the beta launch) we prefer to do without a widget entirely.
I contacted Zendesk about this, and was told to just post here on the forum. I'm not sure what that will change, since people have been making these requests since at least January. No one is asking for the widget to be a three-dimensional gumball that bounces up and down and rattles around at the bottom of the screen. Just. Changing. The. Text. (More customization would be nice, of course, but that would be the most crucial).
Or, even if customization was not possible at this time, if for some reason it's way more difficult than it seems to develop, or perhaps the team is in fact working on the bouncing gumball feature and can't devote the time to it, just having 2, possibly 3 readymade options to choose from..."Help", "Feedback", "Support"....without a single change to the functionality of the widget...would be super easy for Zendesk to change in the code, and would make the difference for many people as far as being able to use this.
But, I have been repeatedly frustrated with and disappointed by Zendesk, (there are so many details of the Zendesk site itself that are not user-friendly, which is surprising to me, as this is the business they're in) so I'm not holding my breath for a fix on this anytime soon.
-
Hello there. Just purchased and started tinkering with Zendesk Support. Awesome experience so far - just suffering on the Widget part. Being able to customize it a little further ( text, especially ) is also a deal breaker for me: my support center is for Brazilian people, and although 'Help' is quite universal ( thanks to the Beatles ), I feel it will be overlooked by my clients because it is not in their native language.
Any feedback on this would be highly appreciated.
cheers! -
@David/Katie - Thanks for all your suggestions. As the Product Manager for the Web Widget, I do read all customer comments.
Regarding the Web Widget 'Help' button text - I'm currently looking into offering a couple of 'readymade' options so that customers have a choice of the text displayed on the Web Widget button.
I realise 'Help' does not fit every use-case. The 'readymade' option route allows the Web Widget to stay full internationalized out of the box (see my answer to Marcos below if you're interested in how that works) - As Katie points out there's also plenty of Zendesk bouncing gumball work going on as well :) so the readymade option route means we can move more quickly on it. Bear with me while I work with our development team - I will provide an update as soon as I can.
@Marcos - the Web Widget is translated into Brazilian Portuguese out of the box. The widget will look at the browser locale of the end-user and display the widget in that language (so if your web browser is set to Brazilian Portuguese, the Web Widget will display in that language).
If you want to force the widget to always appear in Brazilian Portuguese for anyone visiting your web page, you can do that with our zE.setLocale JavaScript API method - it's just adding this small piece of code directly after the Web Widget snippet you already have:
<script>
zE(function() {
zE.setLocale('pt-br');
});
</script>Here's a demo of how the language auto detection works and an example of using setLocale to force the language: http://cl.ly/image/0A1R2O2a2O2i (The only difference from the above piece of code is that I've used 'pt-br' which is the language code for Brazilian Portuguese which is what I'm assuming you want).
There's more info on zE.setLocale and the rest of the Web Widget API at our developer portal here: https://developer.zendesk.com/embeddables/docs/widget/api
-
@Aaron thanks for the quick response. Both solutions will work fine for now - thank you for the clarification.
As a side note, it would be good to keep in mind to extend this feature further in the near future, as pointed out by all the people above.
cheers!
-
I'm a bit dismayed that this remains unaddressed. While we love Zendesk for our support team, the bulbous, non-customizable widget button is a huge problem for our application aesthetic. Is there anything in the works? Any workaround for applying CSS? Please take this as an attempt at constructive criticism, this really is an issue for our business and may be a deal-killer in the long run. Thanks.
-
Hi Andy,
Thanks for the feedback.
A number of our customers use their own button to launch (pop-open) the Web Widget.
This is done by hiding our default Web Widget button using the zE.hide() method (with the JavaScript API) and then calling zE.activate({hideOnClose: true}); when their button is clicked.
In this way, you can have a button that fits the style of your application but get the benefit of Web Widget functionality.
You can find more information about the Web Widget API and examples on our developer portal: https://developer.zendesk.com/embeddables/docs/widget/api
Thanks,
Aaron
-
@David/@Katie and anyone else interested,
We have just pushed out an update that lets you select from some readymade text options for:
- Web Widget button text (Help [default], Support or Feedback)
- Contact form button text (Leave us a message [default] or Contact us)
As mentioned previously, the reason we are not offering full-text customization with these labels is to ensure that the Web Widget continues to work out the box in over 15 languages across desktop and mobile web browsers.
You will find these new options on your Web Widget admin page:
Note: Once you have made a change and clicked Save on your Web Widget admin page, you will need to *wait 5 minutes* and then refresh your web page to see the changes reflected in the widget (this is due to the way we cache settings for performance reasons)Enjoy.
Thanks,
Aaron
-
Hi,
I'm also a fan of more custom options for the widget.
- widget button text (let us free type instead of limited dropdown option)
- styling options. The heavily rounded borders curse with our page styles.
I see no option now to edit the CSS of this button, but to override it on our own site, which isn't very ideal.
Thank you for considering this.
Please sign in to leave a comment.
105 Comments