In this article, we’ll introduce you to Web Widget (Classic), Zendesk’s legacy embeddable customer support interface. Web Widget (Classic) allows you to add features from other Zendesk products – 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. including:
- 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 Web Widget (Classic)
Web Widget (Classic) 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 (Classic) 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 (Classic).
The first thing you need to do is configure the components you want in the widget (see Configuring the Components in your Web Widget (Classic)), and then you can add the widget code your website or help center (see Adding Web Widget (Classic) to your website or help center).
For a complete list of documentation about the Web Widget (Classic), see Web Widget (Classic) resources.
Browser requirements for Web Widget (Classic)
Web Widget (Classic) is supported on the following browsers.
Understanding the end user experience
In Web Widget (Classic), 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 (Classic), 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.
If the help center is enabled in the Web Widget (Classic), customers are presented with help center search first. When the Web Widget (Classic) 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 Web Widget (Classic).
If Contextual Help is enabled in Web Widget (Classic), 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 (Classic), or it is chosen by the administrator using advanced customizations (see About Contextual Help for the Web Widget (Classic)).
This is an overview about how live chat works in Web Widget (Classic) 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 live chat in Web Widget (Classic) depends on how it was configured by the administrator.
Visitors to your website can use live chat functions in Web Widget (Classic) 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 (Classic):
- Starting chats from Web Widget (Classic) 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 Web Widget (Classic) during chats
For more information, see Setting up Zendesk Chat in Web Widget (Classic).
Starting chats from Web Widget (Classic) launcher
When live chat is enabled in Web Widget (Classic), the appearance of the launcher to end users depends on which other contact options are enabled.
|Launcher appearance||Contact options and agent availability|
|If live chat is the only contact option enabled in Web Widget (Classic) and a Chat agent is online, the launcher includes the Chat icon and says Chat.|
|If live 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 (Classic) 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 (Classic), and a Chat agent is online, the chat badge appears on the page instead of the regular Web Widget (Classic) launcher.
|If Chat is the only contact option enabled and no agents are online, the launcher does not display.|
Once the customer opens Web Widget (Classic), 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 (Classic), authenticated visitors can see their past chats. For more information about visitor authentication, see Enabling authenticated visitors in the Web Widget (Classic) and Conversation history in Web Widget (Classic) 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.
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 Web Widget (Classic) during chats
WhenChat is enabled in the Web Widget (Classic), visitors can click the pop-out icon () to pop-out the Web Widget (Classic) to it's own browser window.
The Web Widget (Classic) 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 (Classic) popout in a range of marketing communications, inviting the user to engage directly with you without having to be on your website.
When Talk is enabled in Web Widget (Classic), 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 Web Widget (Classic) 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 Web Widget (Classic), and an agent is online, the button says Help.|
|If Talk, the help center, and Chat, or contact forms are enabled in Web Widget (Classic), and agents are online, the launcher includes a question icon and says Help.|
When Web Widget (Classic) opens, the exact appearance of Talk in Web Widget (Classic) depends on the how it's configured by the administrator and the status of agents (see Configuring Zendesk Talk settings for Web Widget (Classic)). 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 Web Widget (Classic) might appear, depending on your configuration.
If Talk is the only option enabled in Web Widget (Classic) 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.
Your customers can submit a ticket from Web Widget (Classic) to receive an email reply to their inquiry. The contact form is enabled in Web Widget (Classic) 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 Web Widget (Classic) (see Configuring the components in your Web Widget (Classic)), then the customer can choose from multiple ticket forms. If not, then only the default contact form appears.
Tickets submitted through Web Widget (Classic) contain the tag
I was just wondering if there is anyway to increase the height of the embedded iframe, the webwidget docs only mention offset, position, and z-index. No mention of width/height.
Thanks in advance,
Dirk de Klerk
At this time there is no way to change the size or shape of the web-widget. More information in this article: How do I change the shape and size of the Zendesk widget?
Let us know if you have any other questions!
Does the Help Center content need to be public in order to be viewable in the Web Widget? Or can signed-in users view the articles too?
Ideally, you need to make your Help Center content public in order for your customers to see your articles. But, you also have control over who can view your Help Center. You can set those only signed-in users who are able to view your Help Center.
To do this, you need to go to Guide Admin > Settings and go to Guide Settings, under Security you need to put a check-mark on the Require sign-in. You can refer to the screenshot I've attached for reference.
Thank you and have a wonderful day ahead!
DJ Buenavista Jr. |
Customer Advocacy Specialist |
My organization is interested in using the Web widget option on a internally developed application.
Is this widget available to be used on an application that will authenticate to ZenDesk Guide for my customers to locate self-service information?
Yes, that's possible. You can find more information here, https://support.zendesk.com/hc/en-us/articles/222874768-Using-restricted-Help-Center-content-with-the-Web-Widget.
Hi, @... @...!
Our web widget (Get Help in the bottom right) takes around 7 seconds to load up. Can you please let me know if this delay (7 seconds) is normal & if this will still be the case once Zendesk Messaging / Answer Bot is enabled on our side?
Would you mind sharing a link to your website where the Web Widget loads? There are a bunch of different factors which impact on performance. We're happy to take a look at your implementation and come back to you!
Currently, load times are roughly for the same for the Web Widget (Classic experience with Support & Live chat), as well as Messaging. In the future (roughly in the next couple of months), we are planning some optimisations to the Messaging experience to make load times even better. I would recommend migrating to the Messaging experience when you can as this will be faster in the future.
Thank you for following up @...,
Here is a link to the website where the "? Help" Web Widget loads.
I want to add a custom web ticket form to our web app via a modal popup window and not redirect them to the Help Center to create a more seamless UX. But I'm not sure if I should use the web widget, create an HTML form, or something else. For reference, I'd like the web form to look similar to Slack's (https://support.zoom.us/hc/en-us/requests/new) or even Zoom (https://support.zoom.us/hc/en-us/requests/new), except I want it within a modal window and not via the Help Center or a standalone webpage.
Would love some guidance! Thanks in advance!
Apologies for the short delay in my reply. We've had a look at your site and load times do match up with what we typically see.
I did want to confirm whether you've checked in on Web Widget performance recently? A few months ago, we rolled out some significant performance improvements where we were able to reduce Web Widget load times by roughly 30%.
Thanks for touching base & assessing the load time. Upon checking I can confirm there's a 2 second (or so) improvement. Are there further optimizations on the roadmap to bring down the load time even more (i.e. under 5 seconds)?
Very much appreciate your help.
We are embedding videos from Vidyard in some of our help center articles, but the video is blocked in the web widget. We've checked out settings and the video is available publicly. It will show in the actual article in the help center, but appears to be broken in the web widget. Are there any known bugs or work arounds we should try?
Oh excellent. Very glad to hear that!
We do have an ongoing program of work to further optimise the performance of the Web Widget but these would just be very minor improvements. The last update we rolled out was the most significant (where you saw a couple of seconds taken off). We'd expect these minor improvements to be rolled out in the coming months.
Beyond that, I would recommend migrating to the Messaging experience as this will be faster in the future.
Hi Ray Smale.
I know you posted your question 8 months ago, but I resolved this issue by doing this:
<button onclick="zE.activate();">LIVE CHAT</button>
Maybe can help!
Sorry! @... you're right!
I'm usually search with my personal Profile Maky
Thanks! And sorry again!
But when I inspect the page, I see that the web widget is loaded via iframe. So, how in the world do I stop this classic web widget from loading? (-_- |||)
I'm not seeing an obvious web widget, thought I do see a Whatsapp widget. Could you maybe provide some more details about what you're seeing? A screenshot of where the widget is residing and the section of relevant page source you're seeing?
A quick skim isn't showing me anything originating from Zendesk in the page source
Hey Dan, here's the screenshot from my Firefox in Private mode - widget on the bottom right overlapping Google recaptcha logo.
And here's the page source section..
P.S. I've tried to disable the website caching and this widget was still loading for some reason.
Hey Dan Ross any updates to the above?
can someone tell me how can I make coexist chat and form contact in the same web widget at the same time and allow the customer choose what to do? (or chat or contact form)
Maybe with two different custom launchers? or a link and custom launcher? Any advice will be welcome!
Hi Danny -
When I go to your web page and View Source (in Chrome), I was able to search for "Zendesk" and found a section that starts:
Most likely it was installed using the process here: Installing Zendesk Chat for WordPress.
Does that help?
Hey @... I found my answer earlier after further troubleshooting on the site.
Someone in the team decided to use Google Tag Manager to load the web widget. Sigh.
Thank you nonetheless for responding.
You can use the contactoptions API to determine which options to show to end users. You may want to customize your website so that some pages allow end users to make a choice and others don’t. The exact behavior depends on whether Chat or Talk is configured for the Web Widget (Classic), and whether a chat agent is online. You can customize the default text of contact options, if needed. More info here.
Hope this helps!
We would like to always show the concierge Avatar in chat even when an agent is chatting with the customer. Our agents get a lot of unwanted messages from customers who see their faces. Is this possible?
Thank you for reaching out to Zendesk Support.
In regards to your concern, unfortunately, this is not possible. However, there's a workaround that you can try. You can set the agent's avatar and name the same as the concierge if you wanted to prevent the agents from getting unwanted messages and to protect their identity as well.
Please sign in to leave a comment.