Before you add the Web Widget to your website or Help Center, you need to decide which components you want to include in the Web Widget and then turn them on. For some components, you might need to go a step further and configure additional settings. You must be an administrator to configure components in Web Widget.
- Help Center search and suggested articles
- Zendesk Chat for live chat with an agent
- Zendesk Talk for requesting a callback from an agent or viewing a phone number to call
- Contact forms for filing a ticket
For information about how components are presented to end users, see the section about Understanding the end user experience. For a complete list of Web Widget documentation, see Web Widget resources.
This article includes these sections:
Configuring the Web Widget
The Web Widget includes multiple components that you can turn on or off, or customize. For example, you can add help, talk, and chat features, and contact forms. You can configure security settings, change the color of buttons and text, edit user interface text, and reposition Web Widget.
For detailed information about the components you can configure, see Configurable Web Widget components (below).
To configure the Web Widget
- Click the Admin icon (
) in the sidebar and then navigate to Channels > Widget.
If you are setting up the Web Widget for the first time, a wizard guides you through the process. Follow the on-screen prompts. After you complete the wizard, you can view and change your options, if you want, by proceeding to the next step.
If this isn't your first time setting up the Web Widget, skip this step. The wizard doesn't appear for you.
- From the Customization tab, configure your Web Widget components (see Configurable Web Widget components).
- When you're done configuring components, click Save.
Note: Allow 10 minutes for changes to the Web Widget to propagate and appear in the Web Widget.
Once you're done with this procedure, you're ready to complete the steps described in Adding the Web Widget to your website or Help Center, if you haven't already.
Configurable Web Widget components
This table lists the Web Widget components that you can configure from Support.
If you want to customize the Web Widget further, it's possible to do that using the Web Widget API, but you might need the help of a website developer. For more information, see Advanced customization of the Web Widget.
| Setting | Description |
|---|---|
|
Contact form |
To allow customers to submit tickets from the Web Widget, leave the toggle on. This option is on by default. If you don't want customers to be able to submit tickets from the Web Widget, turn the toggle off. Tickets submitted through the Web Widget contain the tag “web_widget.” You can use these options to control the name field in the default contact form and ticket forms that appear in the Web Widget.
Keep in mind that if the Ticket forms toggle is on, ticket forms replace the default contact form in the Web Widget. |
|
Ticket forms |
Note: Multiple ticket forms are not available on all Support plans.
To include multiple ticket forms in the Web Widget, turn the toggle on. This option only appears if the Contact form toggle is turned on. This option enables the end user to select any of your active ticket forms, instead of seeing only the default ticket form, and allows you to customize which ticket forms are available based on the page the user's on. If you need to set up ticket forms, click the Settings link. For more information, see Using custom ticket fields and ticket forms with the Web Widget. |
|
Custom ticket fields |
Note: Regular expression, Date, and Multi-select custom fields cannot be used in the Web Widget.
To select custom ticket fields that you want to include in the Web Widget contact form, use the drop-down list. This option only appears when you have enabled the contact form, and have at least one custom ticket field that is editable by end users. See Adding a custom ticket field. If you need to set up custom ticket fields, click the Settings link. For more information, see Using custom ticket fields and ticket forms with the Web Widget. |
|
Chat |
Note: You must have a Chat account to add Chat functions to the Web Widget. If you don't have a Chat account, turning this toggle on has no effect.
To include Chat features in the Web Widget, turn the Chat toggle on. You can click the Settings link to open the Chat dashboard (the Zendesk Chat product interface), or open Chat from a browser. From there, you will configure specific Chat features for use with the Web Widget (see Setting up Zendesk Chat in the Web Widget). If you have multiple brands, it doesn’t matter which Chat > Settings link you use. They all open Chat in exactly the same manner. If you have multiple brands, the brand name is added as a chat tag. For more information, see Step 2, add the Web Widget to your brands in Zendesk in the Multibrand setup article. You cannot add third-party chat applications to the Web Widget. |
|
Help Center |
Note: You must have a Guide account to add Help Center search to the Web Widget. If you don't have a Guide account, turning on this toggle has no affect.
To add Help Center search to the Web Widget, turn the toggle on. To configure Help Center search settings, click the Settings link. Guide will open and you'll configure settings from there. If Help Center search is enabled in the Web Widget, you can filter metrics for article views and searches that originate from the Web Widget. For more information, see Analyzing Help Center search results and Analyzing Help Center community and knowledge base activity Including restricted articles in Help Center search results If you want to include restricted Help Center content in your Web Widget results, you need to configure some other settings as well. For more information about using Help Center search with the Web Widget, see Using restricted Help Center content with the Web Widget. |
|
Contextual Help |
To include Contextual Help in the Web Widget, turn the toggle on. This option only appears when the Help Center toggle is turned on. Contextual Help suggests articles to the end-user that may be relevant to them, based on the page from which they accessed the Web Widget. For more information, see About contextual help for the Web Widget. |
|
Security settings |
To restrict Help Center search results in the Web Widget to authenticated users on your website, click the Configure button and then follow the on-screen instructions. |
|
Talk |
To include Talk in the Web Widget, turn the toggle on. To configure Talk settings, click the Settings link. For more information, see Configuring Zendesk Talk settings for the Web Widget. |
|
Zendesk logo |
To remove the Zendesk logo in the Web Widget, turn the toggle off. |
|
Theme color |
To specify a custom color for the Web Widget, use the color picker. After you choose the color, you can close the color picker by clicking away, on any other part of the interface. |
|
Theme text color |
To specify a custom color for the text in the launcher, contact button, and header, use the color picker. After you choose the color, you can close the color picker by clicking away, on any other part of the interface.
If you select the Use default color based on theme check box, the Web Widget automatically chooses the text color for you based on the theme color and using an algorithm to guarantee a minimum contrast ratio as specified by the WCAG guidelines. |
|
Position |
To choose a position for the Web Widget, select a position from the drop-down list. If you want the Web Widget to appear in the bottom-right corner of the page, choose Right. If you want it to appear in the lower-left corner, choose Left instead. |
|
Web Widget button text |
To specify the text on the Web Widget button, choose one of the options from the drop-down list. |
|
Contact form button text |
To specify the text on the button that launches the contact form, choose one of the options from the drop-down list.  |
| Answer Bot |
Note: Answer Bot is available on all Zendesk Suite plans, and as an add-on to Zendesk Support.
To add Answer Bot to your Web Widget, turn the toggle on.
This option only appears when the Help Center toggle is turned on. For more information, see Enabling and using Answer Bot in the Web Widget. |
54 Comments
What are the fields that are included in the Contact form by default, if no custom fields are added?
Hey Joana, here's what the default ticket form settings look like:
Thanks @Nicole.
So if I understand correctly, when the end-user sees the web widget window in our website, the default fields they'd have to fill in would be just subject and description?
that's correct, unless you make other fields required.
Why I cannot see the option "Ticket forms" ?
I have a Legacy plus version
Thanks
Sonia
Hi Sonia,
The Ticket Form option is only available to customers on the Enterprise plan, or the Professional plan with Productivity pack.
Hey there can you advice please, we would like to have same help button as Zendesk has. I mean hanging on a side.
I have been looking for some code lines and rules, but no success regarding that.
please advise, if this is sharable info :)
Hi Julija!
Can you be more specific about where you're seeing this tab? That'll help me give you the right information. :)
Hi, We are trying use the prefill option of zendesk settings but it not work, we did use the following code:
and this another form
Any doesn't work only zE.identify but only fill name and email
Hi John,
At first glance, it looks like there are three things that is causing the prefill not to work:
1. Fields array is an object of ticketForms. The way you have it displayed there are separate objects. I would recommend checking out the following documentation to help you format correctly:
https://developer.zendesk.com/embeddables/docs/widget/zesettings#ticketforms
2. Note: The API doesn't support pre-populating drop-down fields. However, you can set default values for custom drop-down fields in the Support admin interface (Manage > Ticket Fields). Did you set a default value for the custom field as recommended in the documentation below under fields:
https://developer.zendesk.com/embeddables/docs/widget/zesettings#ticketforms
If not, I would recommend that you do so.
3. Ensure you have the correct field ID for each field. You may do so by navigating to Admin>Manage>Ticket Fields or by using the end-point /api/v2/ticket_fields.json to locate the field ID.
Checking all these should fix the issue, however, if you are still having trouble, I would recommend that you send us an email at Support@zendesk.com
Hi ... we're looking at including a knowledge-base search bot style experience on a new application. As much as possible we want to avoid users leaving a message requiring us to get back to them but don't want to make it impossible to do so.
With Zendesk is it possible to make the "Or you can get in touch ... Leave a message" only after the user has spent a bit of time searching the knowledge base first?
Thanks
Gary
Hey Gary!
Yes, absolutely. If you turn on the Help Center toggle, that forces users to search your Help Center prior to being able to submitting a ticket. This article actually walks you through the customer experience: Using Web Widget to embed customer service in your website
We are thinking of implementing web widget. However, our portal is open to anyone. We would like to do the following:
if a customer goes to type into the web widget, that it asks the user to login with their portal account. This way if the user creates a ticket, that they are not just any user. They must be a registered customer to do this.
Is there a way to do this? And how?
Hi Mary,
Using the Widget API and Help Center Helpers, you can display the widget exclusively for users logged into the Help Center. For the complete instructions, kindly refer to this link.
Hello
We want to change the icon “cloud” on the Zendesk Widget, below
I was looking for an articles in Zendesk but cant find anything related.
The one we are proposing looks like below
Is there a way to of doing it?
thank you
Krzysztof
Hey Krzysztof,
You should be able to do that with the web widget API, specifically the badge.image setting.
Here's a link to the documentation that would describe how to make these changes.
Hope that helps!
Hi Ross
We’ve reviewed the article provided, but failed to find the solution for this particular icon. What are we missing?
Can you show us the exact class/code in the doc for this particular icon?
Best
Krzysztof
Hi Krzysztof,
I'm not sure what you're missing. Are you having errors in your console? Do you have a sample of code you can share with the community? The more information you can provide about what you've tried increases the chances that someone in the Community can help you.
You'll want to invoke something like this in your page right after you load the widget, with the url to the image attribute pointing to a URL with your desired icon file.
Hi Dan,
A couple of questions:
1. We would like to change the text "Leave us a message" on the widget to something different as well as customize the text "How can we help you?" - how can I do that, I don't see it in the standard customization section.
2. Is there a way to make the "Email address" field optional?
Thanks!
Carlo
Hi Carlo,
I think you're looking for this setting in the API to change the text.
As for the emails, I don't think it can be made optional, since email is the core method Zendesk communicates to users with.
Hi Dan,
I want to hide this button. Can you help me?
Hi Dan Ross
Sorry for not coming back. Is all sorted on our side. Thanks for all your help.
Best
KRis
Hi Dan,
We tried accessing the link you sent us https://developer.zendesk.com/embeddables/docs/widget/settings#chatlabel to change some of the labels of the widget. We followed the instructions, but we are unable to change the text;
We would like to change the text "Leave us a message" on the widget to something different as well as customize the text "How can we help you?"
This is the config we are using:
<script type="text/javascript">
window.zESettings = {
webWidget: {
launcher: {
chatLabel: {
'*': 'Leave us your feedback'
},
label: {
'*': 'Leave us your feedback'
}
}
}
};
</script>
Let me know if anything is wrong here.
Thanks,
Carlo
Hi Dan,
So some additional info.
So with the changes we did we were able to change the label of the widget when minimized, see below:
The problem is on the expanded widget, on the contact form we still see "Leave us a message" and we would also want to change the label "How can we help you?"
Thanks!
@Carlo,
I don't have my testing environment for this setup anymore, but I think this is where you need to adjust that label.
@涛 孟
Sorry, I am not sure which screen that is, is that on the ticket contact form, or on the screen for the start of a chat? It looks like the prechat form to me, but I don't see that on my side, nor do I see an attribute that looks like it would adjust this. What options are in the menu when you select it?
Hi Dan,
My partner has solved this problem.
This is a mobile screen. At first, the button in the upper left corner did not respond. I wanted to hide it. Now my partner has solved this problem. Thank you for your response
I want to update the custom fields of the contact form via:
zE('webWidget', 'updateSettings', {
webWidget: {
contactForm: {
fields: [
{ id: 360006028592, prefill: { '*': 'Some value' } },
{ id: 360018777631, prefill: { '*': 'Some other value' } },
]
}
}
});
But this only works if I set the window.zESettings = {...} before loading the widget. I need to be able to update those custom fields during runtime.
Is it possible to configure the target of the highlighted link? I'd like it to navigate to "our" Zendesk page, rather than the Zendesk Embeddables page.
Please sign in to leave a comment.