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 Widget 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 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).
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.
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
- Popping out the Web Widget during 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 than the default Web Widget launcher button, making it more prominent on the page, and it doesn't include options for other forms of support, such as 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 section.
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
When both Chat and the Integrated Chat experience 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
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.
183 Comments
Hi Erica,
thank for your answer. Indeed, I missed the etags and 304 answer from the server. But still, there is at least 350ms delay (Chrome on MacBook pro) for parsing 1.4 MB of Javascript.
Yes, I would like to be informed in development of the library.
There does not appear to be an option to have the components Chat and Knowledge Base (Help Centre), without the Contact form. Will this be coming in? We do not want this to be a method of raising a ticket but a way for the end user to help themselves.
Hi @Heather. You can toggle off the contact form from the Web Widget admin page if you never want to surface it, or, if you want to suppress it just on certain pages you can use the Suppress setting.
Hi,
Is it possible to include the user information for the embedded widget? For example, if the widget is embedded in a platform that already required the user to log in.
Thanks,
Alon
@AlonW, Absolutely. Here is a reference.
I would like to hear more about the performance updates to the JS library. Right now I'm seeing the main.js file being downloaded from assets.zendesk.com at 1.88MB, and the widget_v2_207.js file being downloaded from v2.zopim.com at 1.01MB
My team is asking to implement this widget, but it's totally unreasonable for you to have a 2.89 MB script that is loaded on our site. Not every user is on a high-speed unlimited bandwidth connection, and many regular users will not even interact with or use the chat widget. Why are you forcing almost 3MB of data transfer on all of them?
Your immediate goal should be to reduce the size of the initial JS loads to be as small as possible, less than 50kb or smaller, to focus solely on performance for your users. The script should NOT download any extra unnecessary resources unless a user decides to interact with it, and then at that point you can load extra functionality and resources that are cached.
I've been catching up on the posts where you state that you're actively working on optimizing the script, however it keeps getting larger as time passes. Please keep us posted with some meaningful updates about the progress of offering real performance enhancements.
@Jon: Thanks for writing. You are right; we are working on some performance optimizations. Unfortunately, it's taking longer than we would have liked. The good news is that is in the works. I'll update this thread when we have more to report.
@Erica: I wrote a comment in February about the problem with enormous size of the zopim chat widget in February (on page 4) . Sadly, as Jon said, it only became worse, from 2.3MB in February to 2.89MB now. There were no updates on your side about performance enhancements or size reductions. When I take a look into your js file, it looks like you just compile it from a huge pile of open source libraries without any thought about end user performance.
The only reason we still use zopim chat is because of integration with Zendesk, otherwise we would change to an alternative product immediately.
Thanks so much for responding so quickly @erica!
I hear what you're saying, but unfortunately it's been the same message for about a year now.
What's the actual plan for performance optimization? Are you actively re-writing your code to make it unobtrusively small? The same message about optimizations is posted, but every few months the javascript files get bigger instead of smaller.
When you say "performance optimizations" does that mean the same thing as "reduced file size"? Or does that mean that you're just doing something else with your code but not concerned about file size?
@jon We are working on optimization projects at the same time as other enhancements, which accounts for some of the changes you mention. I think you'll be pleased to know that we are optimizing in different ways -- including file size. More to come. Thanks!
Hey there @erica, there might be a better thread for this, but it looks like the latest update pushed the size of the widget up another ~130kb or so. I'm seeing main.js at 2.12MB now and widget_v2.210.js at 1.01MB.
From my understanding of how the internet works, this is the opposite of optimization for performance. More features are added regularly, but this file size is unimaginably large and should not be forced on users this way.
It's a huge disappointment.
Hi Jon: Thanks for writing. You've caught us right at a pivotal time.The growth is the result of some Web Widget enhancements that we are developing, but I think you'll be happy to know that we are also actively working on some projects to reduce the package size and increase performance of the Web Widget. I don't have an ETA but it is under active development. I'll be happy to update this thread when we have more to report.
Any updates on the file size bloat? A company of Zendesks size should do better than this.
Hey Bjorn -
As Erica said, it's in development, but these things take several months, and there isn't currently an ETA. She'll update this thread once it's been rolled out. In the meantime, we appreciate everyone's patience and an effort to keep the conversation polite and respectful.
Hi Nicole,
as I understand it you have been working on it for over a year, so I find it very strange that you do not even have an estimated ETA if you are really working on it actively?
I would prefer if you were more transparent about this issue, so we as paying customers can make a decision about looking for alternatives or not.
You could at least have released different versions depending on features and languages used, instead the size just keeps growing for every release.
Hi Bjorn:
I've seen a couple of your recent posts regarding the package size of the Web Widget -- thanks for writing. I am pleased to say indeed we have been working on this and that a couple of weeks ago we released the first batch of work to reduce the package size of the Web Widget. I don't know if you have benchmarked recently but you should see a decrease.
We're not stopping there though and we have been continuing this work and will have more to release soon, assuming we don't hit more obstacles. I haven't given an ETA because we have found the work unpredictable and there will be many layers we'll be working through.
I don't envision this work as ever really done, though. We are committed to performance and even after we release all of the work we are currently doing we will continue to optimize the performance of the Web Widget in addition to adding great feature functionality.
Hi all, happy to announce the Web Widget Performance beta. This beta is great for anyone interested in staying informed about Web Widget performance improvements, getting early access to enhancements and providing feedback as we roll them out. You can find out more and sign up here.
Hi,
I deployed the widget to my web application, have put my web application under the whitelisted domains in zendesk widget security area.
But i still come across cross domain issue when trying to submit ticket from the widget.
Would you have any guidance on how to get around this please?
Thanks.
How do i add multiple settings for the contact form. I can add 'Subject' field and a 'title' separately but when both are specified, neither of them work.
Hello Eric,
Based on ticket you had with another agent it looks like you were able to resolve the issue you were experiencing with the web widget.
Should you experience any other issue please feel free to reach back out.
I read two comments early in this blog from 2015, I want to find out if they are still true.
Can you use the Web Wiget in a Closed Zendesk?
Does the Web widget create a new user every time someone puts in a Ticket? We have assigned users for each of our clients. That would mean that one user would have dozens of profiles set up. How do we avoid this.
Anyone have thoughts on the above issue?
Thanks for your questions. You can use the Web Widget in a Closed Zendesk if you have the 'anyone can submit tickets' option enabled. I'll reach out to you separately to discuss your other question further since it's particular to your workflow.
Thanks Travis, yes it was resolved in no time by the support team, thumbs up!
When chat is available, why not provide the option to either chat or send an email?
An chat conversation is usually more quickly resolved, but takes more than right away. For less pressing issues, some customers may click the Widget and prefer to send an email, and move on to other things until we respond.
I don't think that because Chat is available, the option to email should not be presented.
Hi Sam,
You can customize the widget's settings to allow contact options by appending a script after the snippet code. Users can then choose their channel, even when chat is available.
I found this topic to be a helpful guide for how to do this: https://support.zendesk.com/hc/en-us/articles/229167008-Advanced-customization-of-your-Web-Widget#topic_spt_fb1_l1b
Hi Sam,
Erik beat us to it! Thank you Erik for providing Sam with these details.
Sam, Erik is on the money here with his answer. You can use our Web Widget Javascript for customization of the widget to allow all channels to be available at the one time. i.e allow Chat and the option to leave a message at the same time.
If you have any issues setting this up please reach out again and we'll be happy to help. :)
Hi guys,
We really like the helpcenter, but had to move away from it to Intercom one (not so great) because we need Intercom chat widget to be visible on the helpdesk pages.
Is there any way to integrate a third-party chat (not zendesk one) widget into Zendesk helpcenter?
Hi Ana! Welcome to the Community!
As long as there's way to get the embed code from Intercom, you should be able to insert that code into your Help Center with no problems. Bear in mind that you would need to be on Guide Professional in order to have access to your Help Center code in order to be able to do this.
Hi you say in your article that “When the widget opens, it includes both self-service and the contact button. ” why my Widget do not display contact button when opening ?
https://wellasalonmarketing.zendesk.com/hc/en-us
Please sign in to leave a comment.