- Search for knowledge base articles
- Live chat with an agent
- Contact form to submit a ticket
The widget appears in the bottom corner of your website or Help Center. You configure the components you want in the widget, then add the widget code your website or Help Center.
You must be an administrator to set up and manage Web Widget.
- About browsers supported by Web Widget
- Configuring the components in your widget
- Adding the widget to your website or Help Center
- Adding custom tags to Widget tickets from specific pages
- Understanding the end-user experience
- Optimizing Help Center images for the widget
- Removing the widget from your website or Help Center
You can also watch these short videos.
About browsers supported by Web Widget
The Web Widget is supported on the following browsers as of January 27th, 2015.
On desktop
- Google Chrome: latest two versions
- Microsoft Internet Explorer: latest two versions
- Mozilla Firefox: latest version
- Apple Safari: latest version
On mobile
- iOS Safari: latest two versions
- Android browser: latest version
- Chrome Mobile for Android and iOS: latest version
Configuring the components in your widget
- Help Center search for knowledge base articles
- Zendesk Chat for live chat with an agent
- Contact form for filing a ticket in Zendesk Support
- Suggested articles based on the web page the user is on (contextual help)
- Contact form only
- Zendesk Chat only
- Contact form and Zendesk Chat
- Contact form and Help Center
- Contact form and Zendesk Chat and Help Center
When you enable multiple components, your customers are presented with the options at different times, not all at the same time. To understand how these options are presented to your customers, see Understanding the end-user experience.
You can choose whether you want the widget to appear on the left or right side of your site. If you're on Enterprise, you can remove the logo from the widget. Some advanced customizations are possible using the API (see Advanced customization of your Web Widget).
Adding the Web Widget also lets you better analyze your Help Center metrics (article views and searches), by allowing you to filter for only those coming from the Web Widget. For more information on working with Help Center analytics, see Analyzing Help Center search results (Professional and Enterprise)and Analyzing Help Center community and knowledge base activity (Professional and Enterprise).
To configure your widget
- Click the Admin icon (
) in the sidebar, then select Channels > Widget. - Click the Customization tab.
If this is your first time setting up the widget, click Get Started, then click the Customization tab.
- Enable the components you want in your widget:
- Contact form: Click the toggle to Off if you do not want to allow customers to submit tickets in your widget.
The contact form is enabled for your widget by default. Tickets submitted through the widget will contain the tag "web_widget."
- Custom ticket fields: Click the dropdown menu, then select up to two custom ticket fields, if you'd like to include custom fields in your Web widget contact form.
You can add a maximum of two custom ticket fields. Regular expression and Date custom fields are not supported. Ticket forms are not supported.
Note: This option does not appear if you did not enable the contact form or if you do not have custom ticket fields that are visible and editable to end-users. Only custom fields that are visible and editable appear in the list. To make a custom field available for the widget, select For end-users: Visible and For end-users: Editable in the custom fields settings (see Adding a custom ticket field). - Chat: Click the toggle to On if you want to offer Zendesk Chat in your widget, when chat agents are online.
This option is not available if you have not enabled Zendesk Chat. Click Set up Chat to enable Zendesk Chat now. You cannot add Zendesk Classic Chat or any third-party chat to the Web Widget.
Tip: The Web Widget can be used in place of of the Zendesk Chat widget. - Help Center: Click the toggle to On if you want to offer Help Center search in your widget.
This option is not available if you have not enabled Help Center for Zendesk Support. Click Set up Help Center to enable Help Center now.
Note: You cannot enable Help Center only in the widget. When you enable Help Center, you must also enable the contact form, at least. -
Contextual Help: Click the toggle to On if you want to offer Contextual Help in your widget. Contextual Help suggests articles to the end-user that may be relevant to them, based on the page from which they accessed the widget.
Note: To use Contextual Help, the Help Center option must be enabled.
- Contact form: Click the toggle to Off if you do not want to allow customers to submit tickets in your widget.
- Beside Zendesk logo, click the toggle to Off if you do not want to show the Zendesk logo in your widget (Enterprise only).
- Beside Theme color, click the color picker to select a custom color for your widget.
After you select your color, simply click away from the color picker.
- For Position: Use the drop-down menu to select either Right or Left.
Your selection determines whether the widget appears on the bottom-right corner or the bottom-left corner of the page.
- Use the Web Widget button text: dropdown menu to select the text displayed on the Web Widget button.
- Use the Contact form button text dropdown menu to select the text displayed on the button that launches the contact form.
- Click Save changes.
Now you are ready to copy your widget code from the Setup tab and add it to your website or Help Center.
Adding the widget to your website or Help Center
You can add the Web Widget to any page of your website or to your Help Center.
The Web Widget is fully optimized for the mobile experience and does not affect page load times. The widget is presented in the end user’s language, according to the language setting for end user’s web browser. You can force the widget to always appear in a specific language (see Displaying your widget in a different language).
You can add the widget code to each web page where you want it to appear or to the Help Center header. After you add the code, you manage changes in Zendesk Support, and updates are reflected in the widget wherever it appears.
Adding the Web Widget to your Help Center also allows you to monitor usage initiated from the widget. For more information on using Insights to track Web Widget usage, see the following articles:
To add the widget to your website or Help Center
- Click the Admin icon () in the sidebar, then select Channels > Widget.
- Click the Setup tab, if it is not already selected.
- Under the code box, click Copy to clipboard.
- If you want to add the widget to your website, go to the web page where you want to add the widget, then paste the code before the closing HTML </HEAD> tag.
You need to add the code to every web page where you want the widget to appear.
- If you want to add the widget to your Help Center, in Help Center, click Customize design in the tools panel, then click Edit theme. Select the Header template from the drop-down and paste the code before the </HEADER> tag. Click Save, then click Publish changes (see Customizing the HTML for Help Center).
You need to add the code only once, in the Header, and the widget will appear on every page of your Help Center.
Note: Essential cannot customize the Help Center theme, so they cannot add the Web Widget to Help Center.
Adding custom tags to Widget tickets from specific pages
All tickets submitted through the Web Widget include the URL for the page the user was on when the ticket was sent. Administrators can use triggers to add custom tags, agent assignments, and other actions to these tickets, based on the originating page, to streamline your ticket workflow.
For general information on triggers, see Triggers resources.
For example, let's say you are the administrator for a health care website, and you want to add the tag "peanut_allergies" to any tickets submitted through the Web Widget from a Help Center article about managing peanut allergies.
To add a custom tag to a ticket based on its originating page
- Click the Admin icon in the sidebar, and click Triggers.
- On the Triggers page, click Add trigger.
- Enter a descriptive title for your trigger.
- In the section Meet all of the following conditions: use the drop-down menus to select the following options:
- Ticket: Channel
- Is
- Web Widget
Click the [plus] and add another condition with the following options:
- Ticket: Comment text...
- Contains the following string
- In the text entry box: Enter the URL of the page you want to trigger the custom tag.
- In the section Perform these actions: select the following options:
- In the drop-down menu: Ticket: Add tags
- In the text entry box: Enter the text of the tag you want applied to the ticket (for example, peanut_allergies).
- At the bottom of the page, click Create trigger.
Understanding the end-user experience
In your widget, you can enable components to combine knowledge base search, live chat, and contact form.
- Knowledge base search. Customers are presented with Help Center knowledge base search first, for ticket deflection, if Help Center is enabled for your widget. Customers can enter a search term, and the top three results appear, when matching results are found. The end-user can click an article from the results, and it will open in a new tab.
If you have Contextual Help enabled, up to three suggested articles appear below the search box. The suggested articles are determined by the page from which the end-user accessed the widget.
- Live chat. Customers are presented with Zendesk Chat when:
- Help Center is not enabled or has already been presented to the user and
- Zendesk Chat is enabled and agents are online
When Zendesk Chat is enabled for the widget and agents are online, end-users have the option to start a live chat.
When end-users click Live Chat, they can fill in the information, then start chatting with an agent.
- Contact form. Customers are presented with a contact form to file a ticket when:
- Help Center is not enabled or has already been presented to the user and
- Zendesk Chat is not enabled or agents are not online and
- Contact form is enabled
When Zendesk Chat is not enabled for the widget or agents are not online, end-users have the option to leave a message, which creates a ticket.
When end-users click Leave us a message, they fill in the information, add any useful attachments, then send the ticket.
Note: You can disable the attachments feature by modifying the API. See Disabling ticket attachments for information.
Optimizing Help Center images for the widget
To make sure the images in your Help Center articles display correctly in the Web Widget, it’s important to make sure the images are added to the article at the desired size.
When Help Center articles are converted for viewing in the Web Widget, the article’s images are stripped of their attributes in the HTML tags (except for the src and alt attributes), and custom CSS rules are ignored. For most images, this isn’t a problem. However, if the original images are very big, and significantly resized in the HTML or in a custom CSS, they can appear awkwardly large.
Say, for example, you want to display an icon in your Help Center article. The icon’s original image is 300x300 pixels. In order to display it at a more reasonable size, the HTML is modified by adding the attributes width=“6%” height=“6%”.
In the Help Center article, the icon is 18x18 pixels, 6% of the actual image size. When the article is processed for the Web Widget, and the width and height attributes are removed, it balloons up to its original size and, even after being sized down to fit inside the widget, it’s too big for an icon.
Simply resizing the original image down to the size you want, rather than manipulating the size in your code, avoids this problem.
Removing the widget from your website or Help Center
You can remove individual instances of your widget by deleting the code from the web page or Help Center. You can turn off all instances of the widget by disabling it in Zendesk Support.
- Delete the code from the web page or from the Help Center theme.
To disable the widget and prevent it from appearing on your website and Help Center
- Click the Admin icon () in the sidebar, then select Channels > Widget.
- Click the Customization tab.
- Beside Contact form, Chat, and Help Center, click each toggle to Off.
All three widget components must be turned off.
- Click Save changes.
The widget will not appear on your website or Help Center.
I have added this widget to my external site Is there a way of styling the widget?
For example, I wish to hide to Zendesk logo at the bottom right of the frame.
Hi Andrew, not at the moment, we'll bear it in mind.
We have initially focussed on providing a simple user experience for both the end-user of the widget and the Zendesk admin. I hope the widget was easy to setup on your site!
EDIT - it is now possible for Enterprise customers to hide the Zendesk logo in the Web Widget by selecting the option from the Web Widget admin
Hi Aaron,
It's great, does exactly what I want it to do, but I probably won't be able to use it due to the Zendesk logo. Is there any way of overriding the styling with css on the page it is featured?
No CSS overrides are supported currently, as I mentioned we may look at this in the near future to work out the best way forward
Ok, thanks for your help.
Will this work if our Knowledge Base is for logged in users only? We use single sign-on for Zen and our own web solution and would want to put the widget behind the login on our site.
Is it possible to make the help widget appear in context (example, specific web pages where we want to show specific articles?). Is it planned to limit the option to send tickets via this channel?
We also have a private Zendesk instance and require our users to log in before they can do anything in Zendesk. Will this widget work in this configuration or must we make our instance public? I'm currently receiving an error stating there was an error processing the request and to try again later.
@Steph currently the Help Center search component of the Web Widget will only display content that is publicly accessible (i.e. readable by anonymous users).
I realise this is not going to work in your case, we'll bear authentication in mind, public Help Center content was our starting point.
You could make use of the contact form on the pages behind your login as long as the 'Anybody can submit tickets' option is ticked in your Zendesk (see my reply to Esley below).
@Ryan you could put the Web Widget code on specific pages of your website or hide it and activate it using the Widget API (more info on the API at https://developer.zendesk.com/embeddables/docs/widget/api)
The Help Center search component will search and display results for all publicly accessible Help Center content wherever the widget does appear.
There are no plans to limit tickets submitted via this channel
@Esley you will need to have the 'Anybody can submit tickets' turned on in your Zendesk to make use of the Contact form of the Web Widget.
You can find that option by click on the Admin cog in the sidebar and going to Settings > Customers. Screenshot here: http://cl.ly/image/3b1y0x3Q0T2A
Hi, it seems that the search capabilities don't take into account the help center language. I have 2 languages (fr and en) and even if I succeed to display the widget in the correct language, it only search in my default help center language
Thanks for great addition to overall customer experience!
I have a feature request for being able to use the default english texts on the widget button (help and chat) AND still get the forms/chat translated according to the customer's browser. Please vote this feature at link
Love this! Can we change the word on the button from "Help" to something else like "Feedback"?
And instead of "How can we help you?" customize that to something like "What can we do better on this page?
Very UserVoice-esq! Kudos to Zendesk for unifying all (3) communications channels. This was no small task.
My only complaint is Zendesk's intrusive branding. Same story with the Net Promotor Score feature. I wish software companies would be more forthcoming with paying customers, especially Enterprise customers. Tens of thousands of dollars each month to send a customer to Zendesk marketing landing page. Yikes!
@Aaron - "No CSS overrides are supported currently, as I mentioned we may look at this in the near future to work out the best way forward."
What does that mean?. Its not as if removing the hyperlink is some monumental engineering hurdle. I've worked at several SaaS companies and removing Powered By takes literally 2-minutes to deprovision.
If you want me to advertise Zendesk, then just say so! Just my two cents.
Overall, Embeddables is an awesome feature addition to the Zendesk family. Good job!
I am setting the web widget up on my site now and am having issue with how to customize the activate and hide features. I hide the widget on page load with this...
zE(function () {
zE.hide();
});
and activate with a button onclick="zE.activate();". However once the close button is clicked inside the widget, the built in launcher "help" button appears in addition to the custom one I made. Is there a way to remove the default launcher button? I could not find any documentation on this?
How does this widget mesh with the planned 'Brands' option? I cannot see how to set it up to create tickets within a certain brand.
Would love to see the ability for the widget to be used for helpcenter search only. Our customers want all of their employees to find their own answers, but only some may submit tickets.
Our flow would be:
Employee searches the public helpcenter but doesn't find the answer, notifies his senior manager who then submits a ticket if he deems fit. We've managed to setup zendesk to allow public search but only restricted users can submit tickets, only pain left is the contact button and form in the widget, which throws an error upon submit.
The option to hide the ticket creation button would be what we needed...
Because I'm in the Not-For-Profit sector Enterprise is not the way forward for me
So I have multiple zendesks dependant on the functions of the teams delivering the service. So I have multiple Help centers and Knowledgebases
Is there anyway that I can have:
a) Different Widgets on different pages of the site?
b) more than one desk widget on a single page....
"b)" of course would take us back to the earlier customisation queries- can we at least have it reflect the Desk color scheme?
Hi Richard,
a) If you're talking about different web widgets from different Zendesk accounts, yes, you could just paste the relevant web widget code snippet onto the corresponding page. Any submitted tickets would then go through to the corresponding Zendesk account .
b) No, this is not currently possible.
I'm not sure what you mean by 'Desk' color scheme? You can change the widget color in the admin page.
Some kind of flag to enable/disable search on categories would be huge! We don't need everything to be returned in search results, just specific help content only. I know right now it's all or nothing, but a single checkbox per category or article would be awesome. Great widget!
Is there an article highlighting the similarities/differences between the Feedback Tab and the Web Widget? From this article, it sounds like essentially the same idea, but with fewer customization options. I don't want to switch unless the feature set is more robust that what we're already using, but I'm not getting that impression here. Thanks! :)
Hi Marci,
Aaron here, I'm the Product Manager for the Web Widget - yes, we should edit it this article to make the advantages clearer.
To summarise, the main benefits of the Web Widget over the Feedback Tab are:
I'd love for you to give the Web Widget a try and let me know what you think.
Aaron - nice job on the widget. I have not played with it on mobile yet, but we will.
Some things we would love to see in the next round
a. Setting (perhaps between the <script> tags) that would allow us to alter the configs per page. We would like to have the "Search help center" option on when someone is in the help center (and authenticated) and have that turned off on our public site.
b. Ability to change the name of the widget (I know this could cause a problem on mobile), but perhaps on the web we could have it say something different? (e.g. Chat with us", or "Give us feedback")
c. Ability to let the user decide if they want to chat or just leave a message (right now if we are online - people can only chat - and that is annoying them a bit).
Thanks
aaron - is it possible to modify the behaviour of the widget?
we very much liked the pop up of the feedback tab in the middle of the screen while the actual page faded out.
and +1 to the request to be able to search the help center according to the brand. this doesnt seem to be working currently. it would be a great addition to the multibranding concept.
How I can put the widget to left side?
Aaron, Nice work! I would love to see the widget gather and include client details that can be used to help troubleshoot.
Things like:
1. What OS, browser, Java version, etc... Like from http://supportdetails.com/
2. What page the user was on when widget was initiated.
@Markus: there's currently no way to make the widget pop-out in the middle of the screen. We've currently got a feature request at the Chat-Widget-Page-Position including the positioning like the feedback tab. It would be nice to have you add your thoughts to that post.
@Andre: currently there's no supported method to move the position of the widget. The feature request over at Chat-Widget-Page-Position is for moving the position to the left side, so it would be nice to see your support on that request also.
@Mathew: When a new ticket is created through the widget, the URL where the widget was placed will be displayed in the ticket. You could create a trigger to check for a specific URL and apply the corresponding brand!
@Jason - the page the user was on when they submitted the ticket is already automatically appended to the bottom of the ticket.
As for OS, browser etc - you can already get some of this information by clicking 'Show all events' on the ticket, here's a quick demo: http://tinyurl.com/pyc3k8y