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
Thanks for the reply Brett,
Even if an organization is already registered with Zendesk it seems like the "organization" parameter of zE.identify() does nothing. The email the user needs to be registered in Zendesk in order to connect the dots.
Am I supposed to be passing the Zendesk organization ID or the name?
Thanks
Hi Marc,
I did some additional digging and it looks like the organization can only be set using zE.identify if that user does not already exist within Zendesk. Here's the conversation which I've linked for you: Setting organization without name or email
Apologies for any confusion this has caused!
Hi there
I would like the customer to click on the 'help' button and be presented with the option to fill in a contact form or search the help center (currently they have to search the help center first, then they are presented with the contact us option. Is there a way to do that?
Thanks!
Hello Fiona,
As our base program stands this would not be possible. You can disable the HC search widget entirely, but you are not able to change the order of appearance.
Best regards.
Hi there,
I'm trialling Zendesk and wanted to know if there was any way to host the javascript for the widget within our own environment. We do not currently use any third party code on our site for security.
Many thanks,
Hey Sarah,
The widget itself is hosted on Zendesk's servers, you can call it via a simple Javascript snippet. you can also specify specific domains you want whitelisted, so that the widget can't be installed on sites you don't own.
If you were going to use Zendesk Chat, you could look at their Web SDK, which will let you host the widget code wherever you like.
To use the SDK, you will need to know web development skills or have access to developers that can help you build and maintain your custom widget.
Hope that helps.
Can someone help me. I have enable all the components in the widget customisation setting. The help widget button is there, but, it only shows as attached image. Can anyone help what should I do to enable?
Thanks!
Hey Aifa,
Make sure your articles aren't restricted to logged in users (or if they are, make sure you're logged in when you search) Articles only show when you start typing in a search query.
We want to integrate the Zendesk widget into our browser, using JWT token. We are using Json web token and we are following these instructions seen in this URL:
https://support.zendesk.com/hc/en-us/articles/222874768-Using-restricted-Help-Center-content-with-the-Web-Widget
But when we try and build the application the error we receive is:
TypeError: j.createHmac is not a function
Please can you get in touch should you need any further clarification.
Thank you
Hey Niraj,
It looks like you have a ticket open with our Customer Advocacy team related to this issue. Your ticket has been escalated to our Technical Support team and they will continue troubleshooting the issue with you.
Cheers!
Can the work order system support customization?
Does/Can the widget send us the page the user is on when they raise a request?
Hi Chris,
The ticket will inform you the URL that the ticket was submitted from:
I hope this is helpful!
Playing around with the configuration, I've noticed that when you have contact form + chat + help center + contextual help enabled the widget opens with the contact us button along with the search and "top suggestions" from contextual help. However, if you disable contextual help you just see a search box.
Is there a way to NOT immediately show the Contact Us button when the widget is opened if you have contextual help enabled? We're interested in encouraging a search or at least clicking on the "top suggestions" from contextual help before showing the contact option.
Hi Lila,
Thanks for getting in touch!
Unfortunately, there isn't currently a way to hide the 'Contact us' button with contextual help enabled within the Web Widget. It's definitely a valid use case though so appreciate you flagging it with us. I've logged your request and contact details. We'll reach out if there's any updates on this in the future.
Thanks again,
- Miranda.
Hello, I need a Ticket System for my website Sprintally to host on my own sub-domain. What should I do for that?
Regards
Azahar Ahmed
(Team Sprintally)
Hey Azahar,
If you have Zendesk Support and you'd like user to be able to create tickets from your own website, I would recommend embedding the web-widget as mentioned above.
Otherwise you can build a custom ticket form on your website using the Zendesk API. More information here: Building a custom ticket form with the Zendesk API
I hope this helps!
Is there a way to change the order in which enabled Widget components are displayed to a user?
I have the Help Center and the Contact Form enabled. At the very least, I would like to be able to make the Contact Us button more prominent and accessible; as is, users have to search for something in the Help Center in order to be presented with the “Contact Us” button.
Hi Will Brown,
Thanks for contacting us.
>At the very least, I would like to be able to make the Contact Us button more prominent and accessible; as >is, users have to search for something in the Help Center in order to be presented with the “Contact Us” button.
Unfortunately, there isn't a way to make the 'Contact Us' button visible prior to searching within the Web Widget (when contextual help is enabled). I'll log this as a feature request as it's something that customers have raised with us previously. We'll reach out if there's any news.
In terms of accessibility, we're planning to dedicate some time to improving it within the Web Widget later in the year. I'll add the 'Contact Us' button to the list. Thanks for flagging this with us!
If you have any further questions, please don't hesitate to get in touch.
Thanks again,
- Miranda.
Thanks for the note, Miranda. I'd be very interested that kind of control; staying subscribed to this thread in hopes we might see some changes soon. The existing option to enable certain components is a lot less attractive when the Help Desk is given priority over the Contact Form; that design presumes your customers are more interested in directing their users to a Help Center than a contact form. I can see scenarios where that might be true, but for high-touch companies with little Help Center content (like mine), it's adding friction and making it harder for our users to reach us.
Thanks for the additional context, Will Brown. That's helpful to know!
- Miranda.
Hi Zendesk Team,
I see some articles are coming by default in the 'Help' widget. How this appear, is it coming from the articles that have been added ?
Regards,
Waseem Khan
Hi Waseem Khan,
It sounds like you've turned on the Contextual help feature. This does make use of your existing articles within your Help Center. You can find more information about this feature here, https://support.zendesk.com/hc/en-us/articles/219796887.
Hope this helps!
- Miranda.
Hi team. I'm getting a 400 error when attempting to load the Content Widget: https://ekr.zdassets.com/compose/xxxxxx 400
Has anyone encountered this issue?
Miranda Burford, can you assist us with this implementation of the Content Widget? It feels like an easy fix, but I'm not sure why we're getting a 400. Here's my message from above:
I'm getting a 400 error when attempting to load the Content Widget: https://ekr.zdassets.com/compose/xxxxxx 400
Has anyone encountered this issue?
Hi Dan,
The URL you provided seems to have the key in an incorrect format. The key should contain dashes so just wanted to make sure you're following that format. Can you please take a look in your Web Widget admin (Channels > Widget) at your snippet code and check that the ID was copied over correctly (with dashes included)?
Thanks,
- Miranda.
Hi Miranda Burford! Thanks for the quick response. I've trying to use the widget to access restricted content. I've used the shared secret in place of the key. But obviously that doesn't work. Where do I include the Shared Secret in the snippet?
Hi Dan,
No problem. There are some some step by step instructions in the article below which walks you through how to generate a shared secret and use that with your snippet.
https://support.zendesk.com/hc/en-us/articles/222874768-Using-restricted-Help-Center-content-with-the-Web-Widget
Hope this helps! Let me know how you go.
- Miranda.
Hi. How I can get this window
Hi @.... Use the Pre-chat form feature found in the Zendesk Chat administration area:
In the example you showed, the user logged in through a social media option (for example, Google):
Please sign in to leave a comment.