The Web Widget allows you to customize the information displayed in your contact form in a number of ways. In this article, we'll discuss the following customizations:
- Adding custom ticket fields to the widget's default contact form
- Removing the name field in the default contact form and ticket forms
- Making the name field in the default contact form and ticket forms a required field
- Using different ticket forms with the widget (Enterprise and Professional with Productivity pack add-on)
This article includes the following topics:
- Adding custom ticket fields to the default contact form
- Enabling multiple ticket forms in the Web Widget (Professional with add-on or Enterprise)
- Customizing field descriptions in the Web Widget
- Advanced customization: Contextual ticket forms (Professional with add-on or Enterprise)
- Advanced customization: Pre-populating contact form text fields
- Advanced customization: Adding tags to tickets sent through the Web Widget from specific pages
Related article:
Adding custom ticket fields to the default contact form
Customers on any Support plan can choose to display one, two, or all visible, editable custom ticket fields to the Web Widget contact form. Enterprise customers, or those on the Professional plan with the Productivity pack add-on, can choose any number of their custom ticket fields to display in the default contact form. For information on custom ticket fields, see Adding custom fields to your tickets and support request forms.
System ticket fields, such as the Priority field, are not supported in the Web Widget. They appear in the default contact form (and any other ticket form), when accessed from the Help Center, but do not appear in the Web Widget. Reordering fields is supported in the Web Widget using the ticket forms, but not in the contact form.
Regular expression, Date, and multi-select custom fields cannot be used in the Web Widget.
To display custom ticket fields in the default contact form
- Click the Admin icon (
) in the sidebar, then select Channels > Widget.
- In the Customization tab under Custom ticket fields, click the Custom ticket fields drop-down.
- Select the custom ticket field options you want to display in the contact form:
- Essential, Team, and most Professional plan customers can select a single custom field, two custom fields, or All custom fields.
- Enterprise plan customers, or Professional plan customers with the Productivity Pack add-on, can select any number of custom fields to display, or can select All custom fields.
- Click Save.
Enabling multiple ticket forms in the Web Widget (Professional with add-on or Enterprise)
Customers on the Enterprise Support plan, or Professional plan with the Productivity Pack add-on, can use ticket forms in Web Widget.
Ticket forms allow you to customize the fields displayed in your contact form based on the type of request a customer makes. In order for this feature to work, you must have more than one ticket form created.
For general information on ticket forms and how they work, see Creating ticket forms to support multiple request types.
To enable ticket forms in your Web Widget
- Click the Admin icon (
) in the sidebar, then select Channels > Widget.
- In the Customization tab under Ticket forms, click the toggle to on.
- Click Save.
With ticket forms are toggled on, when a customer clicks the Leave us a message button, they're asked to select a form that matches their needs, from a list of all of your active ticket forms:
When they make a selection, the contact form displays fields specific to that ticket form.
Customizing field descriptions in the Web Widget
You can add custom ticket fields and their descriptions to the default contact form in the Web Widget. To make these appear, you must select the field from the Custom ticket fields option in the Web Widget admin settings.
However, keep in mind that system fields, such as the Priority field, are not supported in the Web Widget. This is regardless of plan type. They appear in the default contact form, and any other ticket form, when accessed from the Help Center, but do not appear in the Web Widget.
Ticket forms are only available on the Enterprise plan and Professional plan with Productivity Pack. If you have one of these plans, you can also include custom fields and their descriptions in ticket forms. To make custom ticket fields and their descriptions appear, you must enable the Ticket forms option in the Web Widget settings.
You can create and edit ticket field descriptions from the Ticket Fields admin page. For more information about ticket fields, see About ticket fields.
To add a field description
- Click the Admin icon (
) in the sidebar, then select Manage > Ticket Fields.
- Click the name of the field that needs a description.
- In the For end users section, click Editable.
- Enter a description for the field, then click Update field.
Advanced customization: Contextual ticket forms (Professional with add-on or Enterprise)
You can craft more customized experiences for your users by limiting the forms the end user sees based on the web page they're currently viewing, by modifying the zESettings object in the Web Widget JavaScript API. For information on working with the API, see Advanced customization of your Web Widget.
In the code for the web page you want to modify, update the zESettings object to include the ID number of the ticket form(s) you want to surface. Your Ticket Forms ID is listed in the URL in the Ticket Forms admin page.
To locate a ticket form ID number
- Click the Admin icon (
) in the sidebar, then select Manage > Ticket Forms.
- Click the name of the form you want to hide, or to use as your standalone form.
- Take note of the form ID in the address bar:
Use the following examples to modify your website code.
To display a single ticket form:
<script type="text/javascript">
window.zESettings = {
webWidget: {
contactForm: {
ticketForms: [
{ id: ###### }
]
}
}
};
</script>
To display two ticket forms:
<script type="text/javascript">
window.zESettings = {
webWidget: {
contactForm: {
ticketForms: [
{ id: ###### },
{ id: ###### }
]
}
}
};
</script>
Add additional IDs to the zESettings object as needed.
Advanced customization: Pre-populating text fields
You can use new settings to pre-fill certain fields. You can use different strings for different locales, or use one string for all locales by using an asterisk (*) for the locale. This is similar to other customizable text strings like Contact Form title.
To pre-fill a system field like 'subject' and/or 'description' , update the zESettings object as shown below.
Example: Prefilled description text
Use the following code:
<script type="text/javascript">
zESettings = {
webWidget: {
contactForm: {
fields: [
{ id: 'description', prefill: { '*': 'This is prefilled description text' } }
]
}
}
};
</script>
Example: Prefilled custom field:
Use the following code:
<script type="text/javascript">
zESettings = {
webWidget: {
contactForm: {
fields: [
{ id: #####, prefill: { '*': 'Desired text' } }
]
}
}
};
</script>
In this code block, id: #####
is the custom field identifier.
You can elect to always prefill a particular field in all of your forms, or prefill it separately in specific forms.
Code example: Different text for the same field in different forms:
<script type="text/javascript">
window.zESettings = {
webWidget: {
contactForm: {
ticketForms: [
{
id: ###TicketFormID###,
fields: [
{
id: 'description',
prefill: {
'*': description
}
}
]
},
{
id: ###TicketFormID###,
fields: [
{
id: 'description',
prefill: {
'*': 'different description'
}
}
]
}
]
}
}
};
</script>
Advanced customization: Adding tags to tickets sent through the Web Widget from specific pages
You can add contextual tags to the tickets sent via the Web Widget. Using the zE.setting for tags, you can set specific tags on particular pages of your site. Note that these tags are public and visible to those who might be viewing the console.
Code example:
<script type="text/javascript">
window.zESettings = {
webWidget: {
contactForm: {
tags: ['new_tag', 'next_new_tag']
}
}
};
</script>
51 Comments
Do you plan to support conditional fields in the web widget? We'd love to enable ticket forms in the web widget but would need to use conditional fields as well--otherwise each form would show a lengthy list of all possible fields. Thanks!
@mikayla Thanks for writing! Yes, we are looking to explore how we might be able to add support for conditional fields in the Web Widget in the future. I don't have any current timelines for when or if this might be available, but it is something that we would update on this article.
It looks like the web widget does not support dynamic content for the custom field names. Playing with this in a sandbox setting and we use some dynamic content for field names so it changes in other languages. Does this really not work with the widget or is there something we need to change?
Hi @ed. That shouldn't be happening so I'm converting your note into a Support ticket. Thanks for letting us know it's appearing this way for you!
I've had success customizing the web widget to show only the forms I want for a certain page, but I am also trying to get tags added to the web widget as well. Whenever I add the "tags:" line, all ticket forms return. Maybe my code is incorrect, but all attempts have failed.
How can I achieve this?
Here's the current code added below the standard widget script:
<script type="text/javascript">
window.zESettings = {
webWidget: {
contactForm: {
tags: ['new_tag', 'next_new_tag']
ticketForms: [
{ id: ###### },
{ id: ###### },
{ id: ###### }
]
}
}
};
</script>
Hi Will,
Almost perfect! Looks like you're just missing a comma to make this valid JSON. You would need to include a comma after the tags array, before the ticketForms array, to separate them properly. So including just the important bits it would be:
contactForm: {
tags: [...],
ticketForms: [...]
}
with the all important comma at the end of the second line.
Hope this helps!
Hey Niall,
Thanks for the response. Of course, I was missing that comma! It now works perfectly. Thanks for the quick help!!
Will
I'm on a Professional Plan and I don't have any option in Channel -> Widget to add Custom Ticket Fields to the Contact Form. Where can I activate this?
I'm also having trouble finding the place to add custom ticket fields in a contact form.
@nate
Have you checked if any of your custom fields are marked as visible to end-users and editable? That was my issue.
Thanks for sharing your solution, Joana!
Nate, let us know if that helps you out as well or if you have further questions.
Is it possible to prefill a Customer Custom Field? (ex: customer code or customer country). My customers are already loged in to an intranet, so i would like to capture customer code and counry automatically.
What would be the approach to do this?
Hi Mario, you can pre-fill a custom ticket field but if you are looking to pass in additional user information with zE.identify that is not currently possible.
Hi, is it possible to pass additional information via Widget Form using hidden custom fields?
We wanted to transfer additional information like Browser version etc. with the message, without presenting this data editable to the customers.
Hi Stephan, the browser version and useragent is automatically on the ticket if you look at the events view: https://support.zendesk.com/hc/en-us/articles/203691176-Viewing-all-events-of-a-ticket
Hi Daniel, thank you very much for your quick response, although it does not quite answer the question.
We do process some thousand tickets a day, so going into "Events" is not an option for us unfortunately. Browser Version was also just an example and most of the data, we wanted to transfer, are not visible in the events view.
Is there anybody in the community, who managed this task to transfer additional hidden details within the ticket form, without making the data visible or editable to customers in some way ?
Why can't the regular expression ticket field be used in the web widget?
Hi Amy -
It's not a request that comes up often, so it's simply not been something our product teams have prioritized implementing. That being said, I encourage you to post in the Product Feedback topic to voice your need for it.
Man I am really stumped. I am trying to prefill 2 custom fields and remove attachements in one fell swoop.
What am I doing wrong? Any one of ther work by themselves but when I combine them the widget acts like there is no customization at all.
<script type="text/javascript">
zESettings = {
webWidget: {
contactForm: {
fields: [
{ id: 80758268, prefill: { '*': '14056' } }
]
fields: [
{ id: 80758288, prefill: { '*': '56565' } }
]
attachments: false
}
}
};
</script>
Welcome to the Community, Paul!
Let me see if I can find one of our Community Moderators to help you!
Hi @Paul,
I think all you need is a proper formatting. Try this -
A
hello,
like Stephan we will need more infos and not in event, like the complete URL from where the client contact us.
Thanks in advance for the solution
Is it possible to pre-fill hidden ticket fields in the web widget? I want to pass some info about the page, where the web widget is, to the agent. But don't show it to the end-user as it will only confuse them.
Hey Gaëtan!
Can you tell me what information you need? Whether or not it's possible will depend on what you're looking for, most likely.
Hi Michael!
I'm not sure whether this is possible, but let me see what I can find out for you. :)
hi Jessie,
I'd like to have the URL where the user is when he contacts us through the widget. The widget is deployed on all my site which contains 1K+ pages. And I don't want to add a custom field and ask the end-user to paste the url in it. It should be automatic and in the background to avoid bothering end user and to help the investigation by support team who'll received the ticket.
regards
Hey Gaëtan!
As outlined in Adding custom tags to Web Widget tickets from specific pages "All tickets submitted through the Web Widget include the URL for the page the user was on when the ticket was sent." What you are requesting is already the default functionality for Web Widget behavior.
If you're looking for additional information about your customer's navigation I recommend the Pathfinder App (available with Support Enterprise or via the Productivity Pack Add-On).
If you wish to set custom field values without exposing that to the customer you will have the best results with drop-down (tagger) fields as you can use the Web Widget API tags function to add a tag to the ticket created via the Web Widget. Since drop-down field values correspond to their tag value, if you pass a tag that matches a field value this will in turn set the value of the field itself.
hello James.
my mistake. Indeed the link is at the bottom of the ticket so it works for us. I'll build dedicated automatism
best regards
Is there any way to add a custom field that is hidden or disabled for editing?
I am trying to send additional data such as user id, that is very useful for ticket solving, but i can only add a field that is open for editing, so it is nto that great for that kind of data.
Hello Stanislav,
Thanks for your question. Unfortunately, this would not be possible. You cannot hide or disable fields from within the widget the same way you could on a ticket form.
If any of the fields you're trying to set automatically have tags associated with them you can tag the user's profile in Zendesk with those tags that way whenever a ticket is created those fields will automatically get set through the tag. Then you can just make it so those fields are not customer facing.
However, it sounds like what you're looking to do is set a text field or something similar so while you can pre-fill those using the instructions above you would not be able to hide them unfortunately.
Please sign in to leave a comment.