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 different ways that your customers can get help from the Web Wiget and how those methods correspond to your Zendesk products:
- Guide: Customers can search Help Center articles for immediate self-service.
- Support: Customers can submit a support request using a contact form.
- Talk: Customers can request a callback, or view a phone number that they can call instead.
- Chat: Customers can start a live chat with an agent.
For information about performing basic tasks related to the Web Widget, see these articles:
For a complete list of documentation about the Web Widget, see Web Widget resources.
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 makes it easy 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 they can use 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).
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 you search, up to nine results appear, if matches are found. The customer can click on 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. When the Web Widget opens, it includes both self-service and the contact button. 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. There are many possible configurations.
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
- Starting chats from the chat badge
- 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
Starting chats from the Web Widget launcher
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.
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:
The customer clicks Live chat, fills in a form (if enabled), and then clicks Start Chat.
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.
Starting chats from the chat badge
The chat badge is a special launcher that allows a customer to get support from a chat agent immediately. It's larger that the default Web Widget launcher button, making it more prominent on the page, and it doesn't include options for other forms of support like help center search, contact forms, or requesting a callback.
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. You can use the chat badge instead of the Web Widget launcher.
For more information about enabling and customizing the chat badge, see Customizing the chat badge.
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.
Phone calls
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
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 instead.
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.
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.
By default, the contact form includes fields for the customer's name and email address, and a description of the problem.
If the administrator enabled 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.
The contact form is enabled in the Web Widget by default. Tickets submitted through the Web Widget contain the tag web_widget.
173 Comments
@Kristi, currently there is no method to add a more button. This sounds like an interesting feature, and it would be great if you could add a feature request for it over in our Product Feedback Forum so the issue can gain more visibility.
Why the web widget could not appear in landscape orientation mode? Many tablet users browse web sites in this mode
@Arsenio I will create a support ticket for you
Is there any chance to rename the "Help" Widget? (e.g. Contact)
@Volunteer World - not currently, we'll bear it in mind for the future.
@Aaron, can you give an indication on if you guys are even considering the change that we can enable the Widget with only the helpcenter. For lots of reason we don’t always want to offer an email or chat option as other contact options are better suited to answering a customer question.
For some reason it feels that Zendesk employs a "holier-than-thou" attitude with regards to how Brands should provide service when using your product.
Hi Stas,
No plans for a 'Help Center only' version of the Web Widget at the moment.
I'll share your feedback with the Help Center team as we do want customers to provide articles in-context if they might be of use to the end-user.
I am evaluating zendesk for our team. I notice that it says the web widget is only available to 'open zendesks'. Is there any work around for that with a closed zendesk? Or, any plans to make that available anytime soon?
Hi Aaron,
My team is migrating back to Zendesk from UserVoice and I'm only now realizing that SSO is not supported with the widget. It's very important to us to know what accounts certain tickets are coming from. I saw a few other people were asking for it as well. Is there any plan to support this in the near future?
Is it possible to have the widget button placed in a fixed position?
Hi Johnd,
There isn't a native way to fix the web widget to a particular position. I've not been able to find examples of this being done, but I suspect you could write JavaScript to relocate that component.
If you were using the Zopim chat widget, there's a different API for that which does allow for this. If you figure out JavaScript way to do this, please post it here!
@Paul - there's no workaround for using the Web Widget with a closed Zendesk at present and we do not have any firm plans for it.
@Joshua Unfortunately SSO is not currently available in the widget, we may look into it in the future. Although not ideal, as a workaround you could use the 'submitted from' URL that comes in at the bottom of all Web Widget tickets (if that helps identify the accounts that tickets have come from).
@Johnd/Dwight - I do hear customers ask about positioning the widget more freely. It's something we're thinking about for the future.
Thanks,
Aaron
Dear Zendesk-Team,
I got a question. I am using some tables to illustrate things in my Help Center. Everything works fine. The problem is when you want to see that Help Center entry via Zendesk Widget it shows no table and just the text which is in the table. So It is not possible to read it.. I got about 30 rows and 3 columns. Am i doing it wrong or is this a know issue?
Greeting Lukas
The Feedback tab has an option for entering a URL for company Privacy Policy. This is required for TRUSTe certification. Is there a comparable option for the widget?
Hi Rob, no, there isn't currently a comparable option in the widget at the moment - thanks for bringing it to my attention.
@Lukas, this is a known issue with some complex tables and rendering them in the Web Widget. We'll look into addressing this in the future.
First of all ...It would be a huge help if there is a way to search with in the 'Comments' of a page. I may not be raising this question/comment again.
Have a question/comment about web widget's compatibility. Why would Zendesk not make the compatibility consistent across it's products? Zendesk and help center are compatible from IE 9 and above, while web widget is supported for only the latest two versions of IE!!! We are having serious difficulties explaining to our customers why some features does not work in a particular version of browser and while others does work.
Hi RA Admin,
We do try to keep compatibility consistent where possible. With the Web Widget, we make use of a number of modern web technologies that are simply not supported by Internet Explorer 9 (hence the difference in browser compatibility).
I appreciate that not all organizations have the freedom to run the latest versions of web browsers but as the technologies we use are generally supported by most other browsers, this was the direction we chose to go.
On a related note, I believe Microsoft are dropping support for IE9 on all operating systems apart from Windows Vista and Server 2008 from January 12th, 2016 - see more info here: https://support.microsoft.com/en-us/gp/microsoft-internet-explorer
Thanks,
Aaron
I have noticed that the file the "Zendesk Widget script" loads the "https://assets.zendesk.com/embeddable_framework/main.js" file twice on every request. (even on this page)
Why is that needed? sounds like a lot of overhead to me
Of course it will be cached, but why is it needed twice
Hi, Is there any way to hide/remove the link to the Help Center's original article within the articles in the widget?
Hi Marius,
We will be more than happy to provide guidance with the Web Widget, but unfortunately, we are unable to determine what you are trying to do. Would you be able to elaborate more on what you are trying to accomplish?
@Rutger, The double-tapped main.js and update.html are part of the release-based cache-refresh mechanism we use to ensure that visitors' browsers re-request a copy of main.js only when a newer version is available. If the browser is behaving correctly, you should also find that the second main.js request is fulfilled entirely from the browser's cache.
Can you specify what Help Center content is displayed per specific widget? For example, if I had a Section dedicated to a particular product type, could I make a widget for the web pages related to that product type, and have the Help Center search on those pages display only that section?
Those of you who want the ability to change the text of the widget from "Help" to something else (like "Feedback") should go vote for this feature request: https://support.zendesk.com/hc/en-us/community/posts/204096076-widget-customization-please?page=1#community_comment_207655748. Thanks!
@Leah
Unfortunately, that's not a feature that we have right now.
If an account is using multibrand.
Can a web widget be created for each brand to control which help center knowledge base content is searched?
@Paul, You can make one widget per brand.
@James Peterson, Do you know where I can find the instruction on how to create a unique widget for each of my brands?
This article explains adding a widget to the default brand.
I would like to enter the subdomain in the widget just like I can in the Feedback Tab.
@paul You can create a widget for your second brand by going to Admin--> Channels -->Widget and clicking Add Widget. You can then repeat for any other brands so that you could set up 1 widget per brand.
I had a stab at the Widget feature and unfortunately for our use case it just lacks too many features.
To get an idea of the type of implementations we are using here is one - http://businesscatalyst.com/contact and here is another - http://www.businesscatalyst.com/report-abuse
To sum up the top features we miss:
1. CSS customization - alot of people are asking for this
2. running JS in the Widget. With the old feedback tab it was possible - pasting javascript code in the CSS customization window worked, I do realize this is a hack and officially unsupported
3. the ability to have different widget instances. With the Feedback tab one could insert different instances to various pages, have submitted tickets tagged and treated differently in ZD (routed to different queues, etc)
There might be a way to get this done with the Widget but that would imply adding a custom field named "Source", have that hidden from the user and pre filled using JS or have a query param passed in the Widget's iframe "src" (as we have done on http://www.businesscatalyst.com/report-abuse )
The Widget might be prettier (mobile friendly, better styled) but it lacks the flexibility and versatility of the Feedback tab.
Hope this feedback helps,
Mihai
Please sign in to leave a comment.