With the Web Widget, you can add customer support features from Zendesk Guide, Support, Talk, and Chat to your website or Help Center, so that your customers can get immediate help from a single interface, in whatever form they like best.
Here are the ways that your customers can get help from the Web Widget:
- Search Help Center articles for immediate self-service.
- Submit a support request using a contact form.
- Request a callback, or view a phone number that they can call instead.
- Start a live chat with an agent.
About the Web Widget
The Web Widget is a separate web application that you embed in a web page that gives customers access your Help Center and the agents in your other Zendesk support channels (Support, Talk, and Chat). It can encourage customers to self-serve, whenever possible, by using Help Center articles. It can also make it easier to get help from an agent by reducing the number of steps required to access a contact form, request a call back, and start a chat.
All of these things can be done from a single interface. The customer doesn't need to go from your home page to your Help Center, open their email application, or search your website to find a email address to contact you.
You can add the Web Widget to your website or Help Center. It appears in the bottom corner by default.
You must be an administrator to set up and manage the Web Widget.
The first thing you need to do is configure the components you want in the widget (see Configuring the Components in your Web Widget), and then you can add the widget code your website or Help Center (see Adding the Web Widget to your website or Help Center).
For a complete list of documentation about the Web Widget, see Web Widget resources.
Browser requirements for Web Widget
The Web Widget is supported on these browsers.
| Device type | Browsers |
|---|---|
|
Desktop computers |
|
|
Mobile devices |
|
Understanding the end-user experience
In the Web Widget, you can enable components to combine knowledge base search, live chat, phone calls, and contact forms. The end-user experience depends on what options are enabled and whether agents are online.
When multiple components are enabled in the Web Widget, components are presented to end users in a specific sequence, at different times, rather than all at once.
Components are presented in this order:
For more information about how visitors can use these components, keep reading.
Self service
If the Help Center is enabled in the Web Widget, customers are presented with Help Center search first. When the Web Widget opens, it includes both self-service and the contact button.
When you search, up to nine results appear, if matches are found. The customer can click an article in the list and it opens in the Web Widget.
If Contextual Help is enabled in the Web Widget, up to three suggested articles appear below the search box. The suggested articles are determined by the page URL from which the customer accessed the Web Widget, or it is chosen by the administrator using advanced customizations (see About Contextual Help for the Web Widget).
Live chat
This is an overview about how Chat in the Web Widget works from a visitor’s perspective. It’s meant to give administrators and agents a general idea about how it works, but it doesn’t cover all scenarios—the exact appearance and behavior of Chat in the Web Widget depends on how it was configured by the administrator.
Visitors to your website can use Chat functions in the Web Widget from a desktop or mobile browser (see Customizing the Chat widget for mobile devices).
Your visitors can perform these chat-related activities from the Web Widget:
- Starting chats from the Web Widget launcher
- Receive proactive chats
- View conversation history
- Customize the avatar, name, and byline of the chat Concierge section
- Send and receive attachments with chats
- Adjust sound, request transcripts, edit contact details, and end chats
- Translate chats
- End and rate chats
- Popping out the Web Widget during chats
For more information, see Setting up Zendesk Chat in the Web Widget.
Starting chats from the Web Widget launcher
When Chat is enabled in the Web Widget, the appearance of the launcher to end users depends on which other contact options are enabled.
| Launcher appearance | Contact options and agent availability |
 |
If Chat is the only contact option enabled in the Web Widget and a Chat agent is online, the launcher includes the Chat icon and says Chat. |
 |
If Chat and the Help Center are enabled, when a chat agent is online, the launcher includes the Chat icon and says Help. |
 |
The chat badge is a special launcher that allows a customer to get support from a chat agent immediately. It's larger than the default Web Widget launcher button and it doesn't include other contact options (see Customizing the Chat Badge section). If the chat badge is enabled, chat is the only contact option enabled in the Web Widget, and a Chat agent is online, the chat badge appears on the page instead of the regular Web Widget launcher. |
| If Chat is the only contact option enabled and no agents are online, the launcher does not display. |
Once the customer opens the Web Widget, they see this:
When the customer clicks Live chat, what they see next depends on whether the pre-chat form is enabled.
If the pre-chat form is enabled, the customer fills in the form, then clicks Start Chat |
If the pre-chat form is not enabled, the customer can start the chat right away. |
If an agent is available when the customer clicks the launcher, but the then agent signs off before the chat begin, the customer sees a message indicating that the Chat agent is not available.
Receiving proactive chats
Agents can see who is the currently on your site and decide whether to proactively contact a visitor before they request a chat. For example, you might want to reach out to visitors who have items their shopping cart, but are taking too long to complete their purchases. For more information, see Browsing your site's visitors, Using Zendesk Chat, and Targeting key visitors with proactive chat.
Viewing conversation history
If visitor authentication is enabled in the Web Widget, authenticated visitors can see their past chats. For more information about visitor authentication, see Enabling authenticated visitors in the Web Widget and Conversation history in the widget for authenticated visitors.
Customize the avatar, name, and byline of the chat Concierge section
Before visitors connect with a support agent, they see the avatar, name, and byline of the chat Concierge. For more information, see Customizing the Chat widget concierge.
Sending and receiving attachments with chats
Visitors can send and receive attachments. Clicking the attachments icon (
) opens a standard file selection dialog box, but you can also drag and drop files into the Web Widget too. For more information about attachments, see Managing file sending options.
Adjusting sound, requesting transcripts, editing contact details, and ending chats
Visitors can use the expandable menu at the bottom (
) to turn sounds on and off, request a transcript of the chat, edit their contact details, or end the chat. For more information about transcripts, see Automatically send chat transcripts with email piping. For more information about editing contact details, see Editing Visitor Profile settings.
Translating chats
If Chat detects that the agent and visitor are using different languages, the Show translated link appears in the conversation. Visitors can click this link to translate the agent’s replies into their language. The translation is performed by Google Translate.
Ending and rating chats
When the visitor is ready, they can end the chat by clicking the end chat (
) icon. They can also end the chat from the expandable menu ().
Visitors can rate a chat as good or bad using the thumbs up (
) and thumbs down () icons at any time during the chat. After they rate the chat, the Leave a comment button appears, so they can add a comment, if desired.
If the visitor doesn’t rate the chat after a little while, the agent can prompt the visitor to rate the chat by making the Rate this chat button appear.
For more information about chat ratings, see Measuring visitor satisfaction with chat rating.
Popping out the Web Widget during chats
WhenChat is enabled in the Web Widget, visitors can click the pop-out icon (
) to pop-out the Web Widget to it's own browser window.
The Web Widget becomes separate from the website and receives a unique URL. It can be moved around and is no longer anchored to the website.
You can share the URL to the Web Widget popout in a range of marketing communications, inviting the user to engage directly with you without having to be on your website.
Phone calls
When Talk is enabled in the Web Widget, the appearance of the launcher to end users depends on which other contact options are enabled.
| Launcher appearance | Contact options and agent availability |
  |
If Talk is the only contact option enabled in the Web Widget and an agent is online, the launcher includes the Talk icon and says either Request a callback or Call us, depending on your configuration. |
 |
If Talk and the Help Center are enabled in the Web Widget, and an agent is online, the button says Help. |
 |
If Talk, the Help Center, and Chat, or contact forms are enabled in the Web Widget, and agents are online, the launcher includes a question icon and says Help. |
When the Web Widget opens, the exact appearance of Talk in the Web Widget depends on the how it's configured by the administrator and the status of agents (see Configuring Zendesk Talk settings for the Web Widget). Depending on your configuration, customers can:
- View a phone number that they can call
- Request a callback
- View the average wait time for a callback
The following examples show how Talk in the Web Widget might appear, depending on your configuration.
|
If Talk is the only option enabled in the Web Widget and it is configured to allow callback requests, and then you click the launcher, the callback form displays. |
If Talk is the only contact option enabled and Talk is configured for Call Us only, your phone number displays. |
|
If Talk and the Help Center are enabled, and other contact options are enabled (for example, Chat or contact form), after a Help Center search the customer can access Talk from the Contact us button. |
If Talk and the Help Center are enabled, and Chat and contact form are disabled, after a Help Center search the Contact us button says Request a callback (or Call us) instead. |
Contact forms
Your customers can submit a ticket from the Web Widget to receive an email reply to their inquiry. The contact form is enabled in the Web Widget by default.
By default, the contact form includes fields for the customer's name, email address, and a description of the problem. If the administrator enabled multiple ticket forms in the Web Widget (see Configuring the components in your Web Widget), then the customer can choose from multiple ticket forms. If not, then only the default contact form appears.
Tickets submitted through the Web Widget contain the tag web_widget.
190 Comments
Hi Huong-Ly,
As I understand the web widget has to be listing content for that contact button to surface. On your Help Center it appears after I do a search that returns an article.
You can have this happen before the end user does a search by enabling Contextual Help, and if that isn't enough set some Help Center Suggestions.
This should let your users have options to browse/search HC content as well as get in contact with your support staff immediately after clicking the web widget button.
Hope that helps you out.
Hi guys, I have for instance a user with 2 organizations on zendesk.
When submitting the ticket it is always associated with his default organization. Is there any way of setting it according to the user current account where he is using the widget?
Thank you,
Nuno Mendes
Hi Nuno - thanks for your post, great question! A ticket created by a user via the Web Widget will initially be set to the user's default organization; you can manually change the organization on the ticket once it comes in.
Otherwise it is possible to use the Widget API to set the organization if you have a way to identify users:
https://developer.zendesk.com/embeddables/docs/widget/api#ze.identify
Hope this helps!
Hello there Zendesk Team!
Our team is currently looking at ways for our clients to reach us easily and Web Widget seems to be a good fit. I'm not sure if it was mentioned in this article but I would like to seek clarification on below points;
= Is it possible to just have self service, contextual help and contact form in the widget? phone call is not a possibility for us at the moment.
= Can the WW icon positioning on the page now be customized?
= If we are to just to have the contact form option, will it require us, the ticket receivers, to update our OS to handle them or will it just be the sender that needs to have an updated OS?
= What would it cost to have this option available (You can answer me via direct email on this one)
Thank you.
Hi Donald,
Thanks for getting in touch. Below are some updates for you to your queries.
1. Yes you sure can. We don't require you to have all features available in the widget on all at the same time. You can turn them on and off as you please.
2. Yes, you can use the javascript API to customize the positioning of the widget. You can refer here to more details on offsetting the widget position.
3. No requirements for the agents to update their OS. Just need to make sure your customers are using the latest web browsers so our widget runs smoothly on it.
4. No extra cost! The Web Widget feature is something which we offer to all customers on all plans. :)
Hope this helps. Lets us know if you have any more widgety queries and we'll be happy to help.
Best,
Amie
How do I set the widget to follow the language of my website and switch languages?
Hi 胡斯文,
We have a multilingual help center and used the following script after the web widget embed code, to make the widget follow the language selected for the help center - the example uses Danish and English:
{{#is help_center.url '/hc/da'}}
<script>
zE(function() {
zE.setLocale('da');
</script>
{{/is}}
{{#is help_center.url '/hc/en-gb'}}
<script>
zE(function() {
zE.setLocale('en-gb');
</script>
{{/is}}
On your website you could do something similar where you set the language based on some condition that matches the language selected on the site. How exactly that is done would depend on your particular website platform, and I would not be able to help with that.
But the script to call would still be something like:
The example above should be for simplified Chinese.
If you don't explicitly set the language of the widget (like in the above examples) it will display the widget in the language of the visitors browser.
Hope that helps you out.
Thank you, Jacob J Christensen your answer completely solved my problem. I found that setting 'zh' or 'en' can display Chinese or English. I don't need to set 'zh-CN' or 'en-gb'. Can I set this up? 'zh' can meet my needs, what is the difference between setting 'zh-CN' and 'zh'?
@胡斯文 FYI
Hi 胡斯文,
Wonderful! Glad I could help.
@Clement: Wow! There are a lot of Chinese language variants! Thanks for stepping in!
Zendesk, however, may only support a subset of those, there is a list of supported language codes here.
Hi friends!
CC: @胡斯文 @Clement @jacob
Thanks for all the great collaboritve help you've provided each other here. I've checked on the language query above for you with out widget team and can confirm the following:
The Web Widget supports the zh-cn and zh-tw locales only; however the widget does fallback to the above locales you are talking about in the posts above when other zh variants are passed. i.e. if you pass in zh-sg, zh-my or zh-hans, the widget will use zh-cn; and if you pass in zh-mo, zh-tw, zh-hk or zh-hant, the widget will use zh-tw.
Hope this helps to clear up the locales for you and the way the widget works with them. :)
Best,
Amie
Amie Brennan | Chief Unicorn Wrangler | Senior Customer Advocate - Tier 1
Thank you. Amie Brennan I noticed that there are'zh-cn'and'zh-tw' in your language list, but there is no'zh'. There are many'en-*'in English, but there is no'en'.
Is there a rule of retreating? Such as' en-* ',' zh-* ', only setting'en' 'zh' will go back to a language.
Hey 胡斯文,
From testing, simply stating zh looks to default to zh-cn while stating en will default to en-US. You can always test out functionality by creating a local HTML page and throwing in the widget script. You can then utilize the console in your browser to maniupalte the widget and inspect the page elements.
Hope this clears up your questions!
I can't figure out the following options for the web widget:
1.) enable a link to take the user to the landing page/home page of the HC
2.) enable talk on the web widget to display an external number (i.e. not a talk number -- we route all our calls through an external 800 number)
3.) remove the zendesk branding from the web widget. We pay to not have branding on the help site, and the zendesk branding which links to a random zendesk landing page is confusing.
Any ideas or help?
Hi James,
I can't help you with the first two issues, unfortunately, but the 3rd should be a simple fix.
Go to Admin > Widget and flip the switch where it says Zendesk logo.
Hi James and Jacob,
Thanks for jumping in to help here Jacob with number 3.
James, I've followed up on the first 2 queries for you and at present it's not possible to achieve either of these.
- The "View original article" link at the bottom of each article is the only link available.
- There's no way to have your external number appear in the web widget. This feature is designed to work with Zendesk Talk and not an external number outside of Zendesk.
Hope this helps. :)
Amie Brennan | Chief Unicorn Wrangler | Senior Customer Advocate - Tier 1 | support@zendesk.com
We use zendesk talk, but routed through our 800 number. I would much rather present our 800 number. Can this be a requested feature? I know we can get an 800 number via zd talk, but want to keep things consolidated to our current services etc.f
Hey James,
The ability to display a non-Talk number isn't possible at the moment. The web widget displays Talk as an available option in the WW when agents in Talk are available and online, since we don't have that kind of insight into a non-Talk number it'd be difficult for us to know when to display Talk or not. We've no plans at the moment to build for non-Talk numbers to be fed into Request a Callback. Thanks for your feedback! Much appreciated.
Is there a way to add custom text - inclusive of a hyperlink to the heading of the webwidget form? The widget will be placed on an external site not the help center. I would like to add text informing users that they can browse through our knowledge and communities on our help center in additional to submitting a ticket via the widget.
Hey Reshma,
You can edit the Title of the Web Widget, please have a look at the Web Widget API:
https://developer.zendesk.com/embeddables/docs/widget/zesettings#title
If that is not what you are looking for, I would write a feature request here:
https://support.zendesk.com/hc/en-us/community/topics/200993567-Zendesk-beta-Web-Widget-Customizations
Is there any way to a/b test the appearance of the widget?
I want to understand it's affect on ticket submission.
Hey Tom,
I would recommend you to copy the Widget code you have in Admin >> Widget >> Setup tab, in this website: https://jsfiddle.net/ (HTML portion) and click on Run.
Then, you can have a look at this article and apply the customizations on the page:
https://support.zendesk.com/hc/en-us/articles/229167008-Advanced-customization-of-your-Web-Widget
If you want to see all the possible options:
https://developer.zendesk.com/embeddables/docs/widget/api
Does anyone have success stories using the web widget with help center only? We don't offer chat or phone support so we'd only use it for serving help center content, which I feel our search interface does well already.
https://gemsofwar.zendesk.com/hc/en-us
Customizing the chat badge link is broken
Hi Սմբատ,
Thank for let us know and Please accept my apologize for the inconvenience.
I have attache the right link: https://chat.zendesk.com/hc/en-us/articles/212679577-Customizing-the-appearance-of-the-widget. ;)
Hi,
with contextual help disabled (and help center enabled), if you don't enter a search term, only the window is presented (check attachment)
How do we pre-populate the window with "N" articles most researched / more views, instead of having no list at all if the user doesn't insert any search term?
I looked it up but did not find any solution : would it be possible to offer the customer the possibility to use one of our custom forms, even if the chat is enabled in the web widget (but no phone).
Something like that (from your article) but without the 'Request a callback', and with "Leave a message" leading to custom forms (as we have it when the chat is unavailable) and not pre-chat form ?
Thanx for any tip !
Hey, is it possible to only offer chat to specific parts of my website? We have customers, and clients, and only want to offer the chat feature to our clients, when they are logged into our dashboard, if not then they will have to submit a ticket.
Also, can someone explain to me what the "organization" parameter of zE.identify() actually does on the Widget API? All of my tests have had zero impact on how a ticket gets created or categorized.
Should we be passing the organization name, zendesk organization id? Even when passing in the "organizer" parameter, the ticket will still be assigned to the zendesk users default organization.
Thanks in advance.
@Jean you'll most likely need to use the Web Widget API to choose which contact options are available on your website. I'd also recommend taking a look at our Advanced customization of the Web Widget article to see what customization options are currently available.
@Max you'll want to copy the widget code snippet to only the pages you'd like to display. Our Advanced customization of the Web Widget also goes over suppressing certain features on specific pages. As for the organization parameter, it's worth mentioning that passing an organization only works for existing organizations in your Zendesk Support account. It does not create a new organization. Can you confirm whether or not that's the case on your end?
Please sign in to leave a comment.