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.
196 Comments
Thanks Benjamin.
Seems to occur when the calling page is in an iframe, and the parent iframe is a different domain from the calling one. Saajan has escalated this to the web widget team, hopefully get an answer soon, or at least a work-around in the interim.
Hi Benjamin, im checking the code and for both the widget and zopim chat is the same one, so i don't think that will work, im i wrong?
Hi Gonzalo,
If the code is the exact same, then it sounds like you're already using the Web Widget for chat. Since that is the case, then I'm afraid you wouldn't be able to use the same Web Widget on all of your pages, but only have chat available on some and not others, since the setting for 'chat' is turned on/off as a whole for the Web Widget.
However, if you created a standalone Zopim account outside of Zendesk, then that would allow you to manage your Zopim chat widget and the Zendesk Web Widget separately, which may allow you to do what you're describing. That would give you the ability to use the Zopim chat widget to offer chat and then you could use the Web Widget if you're just trying to provide a way for customers to look through your Help Center content and create a ticket, but not chat.
Cheers,
Ben Goff
Hi Bejamin, we manage to do it with the use of the API. If someone else is interested in this we just put this code on pages other than our checkout:
zE(function(){
$zopim(function(){
$zopim.livechat.setStatus("offline");
});
});
Thanks for the help!
Hi Gonzalo,
Very awesome workaround, going through the Web Widget API and then into the Zopim API here. Thanks for sharing this with the community! Definitely handy knowledge to have.
Cheers,
Ben Goff
Hi all: We have just released a new beta for Web Widget customizations. It will be a rolling beta with 4 capabilities at launch. With the beta you can suppress certain features per page, offset the location of the launcher & widget, customize some of the text and hide the View Original Article button. If you are interested in these or additional customizations that will follow please visit https://support.zendesk.com/hc/en-us/community/posts/218033707-Start-here-Web-Widget-customizations-beta
Still scratching my head around customizing the widget CSS wise. Then it struck me - if I had a method of populating the widget's "description" field (the "How can we help you" multiline field) - something like how zE.identify() method works for the name and email address - I could work around the styling issues altogether:
1. I would create a custom "dumb" form style it as I need
2. when this is submitted I would invoke a js that transfers the info captured by my form to the hidden widget and submits it
To make this work I would need a way of populating the description field and a way of submitting the widget. Ideally I would also have a callback so I know for sure the widget was submitted.
I realize this is kind of convoluted but for people with very specific 'look and feel" requirements this would be the most flexible way to go.
A few questions:
We are in the final days of previewing the help center and plan to migrate soon. I tried embedding the web widget code into the copenhagen theme, and when I went to preview it it didn't show up. Does the widget not work when in preview mode?
Also - we were trying to avoid customizing the theme so that the theme would be automatically updated, but once you put the web widget code into the header you are in a 'custom theme". Does that mean that the theme won't automatically update when updates are available and we'd have to manually update the theme on a regular basis?
Hi Larry,
The web widget code should work within the Copenhagen theme. I'm going to reach out to you within a ticket to investigate this further.
We can also discuss the idea of a theme "automatically updating" as I'm not certain I understand what you're describing.
I'll see you in that ticket shortly!
Is there a method to show information in an article in the widget but hide when viewing the same article in the help center?
We have embedded videos that display in the help center but are stripped out in the web widget. I can add a link to the video as well but only want the link to show when the article is accessed in the widget.
Thanks!
Hi Mike:
Videos embedded in Help Center articles are able to be viewed in the Web Widget itself. I am going to convert your question into a ticket so that we can track your specific setup and see if we can get them going for you.
Hi all: I wanted to let you know that we have released the ticket attachments feature. If your account is set to allow attachments, end users can now attach files to tickets they create via the Web Widget. Please take a look at the announcement for more information.
The latest updates got us trying the widget, again, but the CSS issues are a problem. I also just discovered that if a user clicks a link in a "widgeted" article to another article, it opens a new tab instead of displaying the content in the widget. :(
Let me start by saying, our customer service team really loves having this tool available. It is serving them well. As a UI developer, placing a floating element above our content with little control over the appearance, is, well...frustrating. We are exploring some of the javascript workarounds to customize the look and feel of the Help button to better fit our site as a page element, and I think this will be a great improvement. I would still like to request a way to modify CSS of the widget itself to make changes to font-faces and other minor tweaks to make it feel better integrated into our brand. I see others have been asking for this as well, hope it makes it into your improvements soon. Keep up the good work!
Is there a method to track web widget article views? Thanks.
Thanks for writing.
@tony Thanks for letting me know about your desire to navigate articles within the Widget. That's great feedback. Could you please create a separate post with that request. That way we could get additional use cases for it and it would allow others to upvote it as well. It will also allow me to target any potential research or activity to those specifically interested in that feature.
@patrick We don't have any current plans to grant CSS modifications to the Widget but I am interested in exploring specific needs or desires related to the look, feel and functionality of the Web Widget. We have a beta for customizations requests. I encourage you upvote any posts there that are relevant, or create a new one with your use case.
@mike Help Center searches and article views that are performed in the Web Widget are included in the Reporting area.
@Erica Thanks, Erica. Done.
Remember everyone, your vote counts! ;)
Zendesk,
This question may have been asked but I just can't search through hundreds of posts to find it.
1: Can we put an option to submit a request for support and live chat at the bottom of the widget? Like the old one had...
2: Can I separate sections of our HC to what is searched via the web widget? Example: different products, etc.
Thank you!
@chris Thanks for writing.
1) There is not currently a way to offer choice to the user to pick between submitting a ticket and chatting when a chat agent is available, but it's something we are working on. It will be included in the Web Widget Customizations beta when the time comes.
2) You can limit the search to particular sections/categories/labels with the Help Center filters JS API.
Hi,
Is there a way to include a screenshot when submitting a request through the widget?
Cheers
Hi Paul,
You can add attachments to request submissions. You could add a screenshot via this method. Scroll up in this guide to read more about attachments and how to use them. :)
Thanks; I was thinking about something more in-built - so the user doesn't have to take the screenshot, save it as an attachment and then attach it to the widget. Something JavaScript-based that takes the shot and then attaches the data automatically.
@Paul - We appreciate the feedback you have there on this. We are considering including such functionality in the future but don’t have an ETA on when it will be available. We are curious to hear more specifically about why this would be valuable for your audience etc. Feel free to let us know and I can pass it onto the team for you. :)
We have multiple products, and have different forms for our customers to populate based on the product they have. Is there a way to customize which form is displayed if no one is available to chat? Or is there a way to just redirect them to the Submit your ticket page so they can choose their product from the drop down menu?
Hi Ketan,
Have you had a look at the Advanced customization article yet?
I think it has bits about what you're asking.
Hi all: We have added "View more" search results to the customizations beta. You can learn more and sign up here.
Hi all: We have released the View more search results feature in the Web Widget. Here is the announcement.
Please point me to document on how to open the contact us/leave us a message form directly from our application.
Hi.
I am wondering, why is no one noticing the problems with Javascript in Zendesk/zopim chat. The script for chat (https://assets.zendesk.com/embeddable_framework/main.js) is 1.45 MB in size (357 KB gzipped)! It is 7 times more than all the scripts we use on our website! Additionally this script is served with cache headers which allows caching for only 1 minute! So every minute the user has to download this huge script again and again!
And you know, how big is the second script Zendesk chat loads? (https://v2.zopim.com/bin/v/widget_v2.186.js) 992 KB (233 KB gzipped)!
So, together, for Zendesk chat, your users load 2.3 MB Javascript!
When I profile the page in Chrome Dev Console, I see, that the parsing of Zendesk huge script takes 370 ms! And parsing of your widget script 90 ms!
You are saying, that your script is loaded with async and do not slows down the page. But this is only a theory, in reality, on slow mobile internet, browser takes 12 seconds to download your script, and in this time other, useful downloads are slowed down. And do not forget, you have to download the script again every minute, because of really bad caching settings!
I hope you are aware about this problems and work on fixing it. No online business, which takes client side performance seriously, will use such unacceptably bad designed solution.
Again: 1.45 MB is downloaded and parsed almost every time, the user opens a page, where Zendesk widget is installed!
Best,
Hennadiy
Hi Hennadiy:
Thanks for writing. You'll be pleased to know that your comments do not fall on deaf ears. We have been and continue to be enhancing the Web Widget both in terms of feature functionality and performance. Regarding performance specifically, we are working on a couple of specific projects that tackle size and browser parse time. Also, I wanted to note that, despite the cache expiry being 60 seconds, we're taking advantage of an extended request mechanism (etags) where the browser continues to use the cached version unless a newer version is available. I would be happy to keep you informed as we continue to make these performance enhancements, if you are interested.
Please sign in to leave a comment.