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.
217 Comments
Howdy Zendesk!
We just flipped the switch on the web widget! Goodbye Feedback tab.
One question though: is there a way to stop the widget from creating Zendesk users when they are on a page with the widget?
More detail:
I had a report using # of End Users. This was great for seeing how many unique users sent in a ticket in a month period.
But when we switched over to the web widget this metric isn't useful anymore. Every time a user lands on a page with the web widget, they are added to Zendesk as a user if they don't have an account. (Note: we auto-populate user name and email since they are signed in when they see the widget).
I'd love to not have the widget create a new user just because they've seen the web widget. I'd rather a new user get created when they send in a ticket.
Any help with this would be greatly appreciated. :D
Thanks!
Hi Kevin,
At the moment it's not possible to prevent the Widget from creating users automatically when they visit a page with the widget, however, you should be able to filter your report to exclude users who have not submitted a ticket. For example, the below metric should give you the number of end-users who have submitted a ticket -
SELECT COUNT(User, Ticket Id) WHERE User Role = End-user
You are a rockstar, James! :D Thank you for the tip!
Am I ONLY allowed one widget per brand? We offer tiered support solutions, and need the ability to offer different options on two widgets per brand.
@Leah Unfortunately you are limited to one widget configuration per brand.
If you have an enterprise account you could use the "Ticket Forms" feature. Here's a really good article on how to limit what ticket forms a user sees based on their organization. It should be pretty easy to adapt this to test other properties of the user object.
If you need to deploy outside of your help center your best bet will be the API. It'll be more work but it will give you a ton of flexibility.
we have added web widget in our web portal. Is it possible to search knowledge base using web widget for signed-in user? User will sign-in into zendesk from our web portal using SSO with JWT.
Hi Alok!
As you'll see here, when a user searches using the Web Widget it will display the top three search results for their search in your Help Center, as long as your Widget is configured to allow it.
Hope that helps!
Hi Jessie,
Thank you for reply.
I already configured the web widget and it works when knowledge based content set to public,but not working for signed-in user in our web portal.(User will signed-in into Zendesk from our web portal using SSO with JWT.)
In Zendesk help center,it's working perfectly(both public and signed-in user).But when i used widget in our web portal, it's not working.
Thanks,
Hi @Alok. As you've seen, currently you can only use the web widget on your primary site with public help centers, not private ones. It's something that we're working on though. If you'd be interested in providing feedback when we get to a feedback/beta stage, please let me know.
Hi Erica,
Thank you very much for very helpful reply.
Yes, i'm very interested to providing feedback and want to use ASAP.Please inform me.
Thanks,
Hi @Erica, we are too looking forward to the web widget using on our website under a closed ZenDesk other than only in Help Center.
Thanks!
Hi @alok, @clement
We have initiated a beta to allow end users to read private help center articles (when logged in) via the Web Widget. The details and sign-up information is in https://support.zendesk.com/hc/en-us/community/posts/208559668--Start-Here-Restricted-Help-Center-articles-in-Web-Widget-beta
Do you have any plan to support a Live Chat as part of the widget?
Your widget is of interest to our organization, and I see that Live chat is the missing bit we are looking for in addition to what you have. "Leave us a message" doesn't really cut it in terms of real-time interaction.
Thanks
@damien Yes, you can connect up Zopim live chat to your Web Widget. Just go into your Web Widget admin and toggle on Chat. You can also toggle on Help Center if you are looking for some deflection as well.
Is there a way to hide the widget when using a print.css stylesheet?
We use the widget on our web app which has some reports that our customers can print. In the previous incarnation, there was a way to hide the tab easily:
#zenbox_tab { display: none !important; }
Not so on the new one, alas.
Hi Lorin:
Not at this time but we have had this request before and are working on a solution. Would there ever be a time you'd want to print with the Widget included or would a complete suppress on print work best?
Erica
Erica,
Help widget is not nearly as useful on a piece of paper. There may be a circumstance where it would be helpful but I struggle to think of one.
The big issue is that the style info for the widget is inline which makes it supercede all other styling rules. Inline is the trump for the Cascade (the C is CSS). Easy solution would be to not have the style be inline but instead loaded so we could then do something simple like:
iframe#zEWidget-launcher { display: none !important; }
The previous iteration of the help widget didn't do it this way and while we have found a workaround, it's not as good because it still loads all the stuff for the widget and then we have to hide the guts with the print.css.
Lorin
By default web widget shows only three articles from the help center/knowledge base and it's super bad in our situation because we have a lot more articles covering certain topics.
So I have several very urgent issues:
1) Is it possible to configure the number of the found articles - I want to increase it to at least 10?
2) Is it possible to add a link "View more results at our help center"?
3) Is it possible to show all the results as a scrollable list (perhaps paginated)?
Our users usually ask questions which are already answered by this or that article and the way ZenDesk works at the moment is contrary to why we've employed it in the first place.
Hi @ryan. Thanks for writing. At the moment there is no ability to show more but we are working on that. I don't have an ETA at this time but if you would be interested in giving beta feedback to us, please let me know.
Can I control the order of custom fields on the web widget form?
It doesn't seem to mirror the Zendesk ticket form for me.
Hi Jacob: You're right. They appear in the order that they appear in the Custom Fields list. I'll make a note of your request to mirror your ticket form.
Hi Erica,
Come to think of it, you could have multiple forms, so figuring out which one to mirror could be difficult.
Perhaps a way to order fields by drag-and-drop on the widget customization page instead.
Marius Jacobsen already asked this, but I couldn't find an answer in this thread.
Is it possible to hide the link to the original article that is displayed at the bottom of articles displayed within the widget?
I don't need a closed Help Center, but I would like to limit traffic away from our commerce sites and removing this link to the Help Center, I think, would be helpful.
Is it possible to customized the widget to show some text once the form is successfully submitted? We would like to be able to set expectations with customers submitting a help request on when they will likely receive a response. Without this, users have a tendency to submit numerous tickets in row.
Hi @stephanie:
This isn't currently possible but I appreciate your sharing you use case. I'm making a note of it.
I'm investigating the Web Widget, as I understand that the Feedback Tabs are being deprecated as of November 1. However, I am concerned at the lack of features that we may be forced to accept. There are 6 pages of responses to this thread, and I admit I have not read them all....if some of my questions are addressed, I apologize. So far I have gleaned enough to ask the following:
1) It's definitely a problem for us to only offer 3 possible results without a link to "view more" or something like that.
2) The "Help" button and the "Leave us a message" button are both wording that will not be appropriate for our situation. Is there a way to configure those messages?
3) I'm getting the impression that there is no CSS control at all. While we do appreciate the fact that the Zendesk logo is removed for Enterprise (really? only Enterprise?) we definitely need to control the color of the Help button. Zendesk green is way outside of our style guide. ;-)
4) Can the web widget be embedded on another website, or is it only available in the Help Center?
Thanks, I'll be looking forward to hearing from you guys :)
Hi @Marci:
We are working on the first item. I appreciate your letting me know this is important for you. For #2 and 3, take a look at the Web Widget admin page. There are some additional labels there that you can choose from and there is a color chooser as well. For #4 you can definitely embed the Web Widget on a non-help center site. You can just put the embed code on your site(s) where you want the Web Widget to appear.
Hi Erica,
Is it possible to hide the link to the original article that is displayed at the bottom of articles displayed within the widget?
I don't need a closed Help Center, but I would like to limit traffic away from our commerce sites and removing this link to the Help Center, I think, would be helpful.
Thanks, Erica. That's great to know. For #2 and #3 I can't see the interface yet, because (unless I've misunderstood....?) I can't enable Web Widget until I've disabled all my Feedback Tabs. This is not something we are prepared to do yet. Thanks for the info. :)
Please sign in to leave a comment.