English (US)
  1. Zendesk help
  2. Support
  3. Using Support
  4. Channels

Configuring components in the Web Widget

Jennifer Rowe
  • Edited
Zendesk Documentation Team

all plans

Fastpath: Admin > Channels > Widget

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.

You can configure the Web Widget to include any combination of these components:
  • 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. If you have an Enterprise account, you can remove the Zendesk logo.

For detailed information about the components you can configure, see Configurable Web Widget components (below).

To configure the Web Widget

  1. 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.

  2. From the Customization tab, configure your Web Widget components (see Configurable Web Widget components).
  3. 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.

  • Show name field—Causes the name field to appear in the forms in the Web Widget. To remove the name field from forms in the Web Widget, clear this check box. By default, this option is on when the Contact form toggle is turned on.

  • Required—Makes the name field a required field that users must complete before they can submit the default contact form through the Web Widget. To make the name field a required field, select this check box. Otherwise, the name field is labeled as optional. By default, this option is off when the Contact form toggle is turned on.

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 available on the Support Enterprise plan, or as a Professional add-on feature.

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

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. 

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 effect.

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 (Professional and Enterprise) and Analyzing Help Center community and knowledge base activity (Professional and Enterprise)

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
Note: You must have Talk Team, Professional, or Enterprise to add Talk functions to the Web Widget. If you have Talk Lite, this option is not available.

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
Note: This option appears only on Enterprise accounts.

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 a Guide Professional and Enterprise add-on feature.
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.
Return to top
Have more questions? Submit a request

52 Comments

  • Thomas D'Hoe
    • Edited
    Community Moderator

    For all of you having trouble writing code, or if you want a quick and easy way to test out what all the customisation options do:

    My colleague (@tverschoren) built a web tool that generates the necessary custom code for the available changes you can make.

    https://widget.verschoren.com

    Hope this helps someone!

    1
  • Carl Moore

    Is there a way to add a CC to the web widget so that a user can enter people that he'd like to copy on the ticket?    

    Carl

    2
  • Thomas Verschoren
    Community Moderator

    CC is currently not exposed as a feature for the Zendesk widget. 
    That’s only possible for forms on Guide or email.

    You can make a feature request in this community section, which may or not be picked up by Zendesk.

    Would be a cool feature though 😎 

    1
  • Juan Espinosa

    Question, is there a way to edit the widget's "Contact Us" action? 

     

    We'd like to have it redirect to our site page where users can submit tickets vs having forms available on the widget. 

     

     

    Thanks! 

    1
  • Brett Bowser
    Zendesk Community Team

    Hey Juan,

    I wasn't able to track down a way to accomplish this within the Web Widget. To see a full list of customization options with the web widget, take a look at this article: Advanced customization of the Web Widget

    Otherwise, you'll need to create your own widget that links to this external form you've set up.

    Let me know if you have any other questions for me.

    Cheers!

    1
  • Dennis Beltran
    • Edited

    We currently have Chat, Help Center, and Contextual Help toggled ON in our Web Widget.

    We decided that Contextual Help isn't giving the best providing the experience we were hoping for so we want to toggled it OFF. However, one issue when we discovered is the Web Widget hides the Live Chat button up clicking on the launcher when Contextual Help is toggled OFF. It only displays the search bar. Not until AFTER a search is perform and search results are displayed that the Live Chat button appears.

    My question is: Is there a way to display both the search bar AND the Live Chat button at the same time upon opening the launcher? 

    1
  • Dan Ross
    Community Moderator

    Hey Dennis Beltran

    Sorry for the delay in answering your post! I don't think there's a way to accomplish what you're describing with the web widget natively. The point of the Help Centre search function in the widget is to attempt to deflect tickets away from the chat and contact form channels, by trying to serve useful content to customers. I think the rationale behind this is that providing users the ability to interact with an agent before trying to self serve doesn't help businesses deflect unnecessary tickets.

    However, if you're set on this idea, you could likely do so using the Zendesk Web SDK to create a widget that you could customize the look, feel and behaviour of. This would be a decent investment of developer resources however.

    1
  • Dennis Beltran

    Dan Ross if that is the case, then why is the Live Chat button displayed when Contextual Help is toggled ON?

    As you can see from the screenshot, customers doesn't have to perform a search before the Live Chat button appears. Once the launcher is opened, a customer had direct access to Live Chat button. The rationale changes depending on whether Contextual Help is enabled/disabled. Very inconsistent.

    1
  • Dan Ross
    Community Moderator

    Hey Dennis Beltran,

    I don't work for Zendesk, so I can't really provide insight into the rationale. If you're asking my opinion though, i think they did this because contextual help attempts to provide suggested answers to the user, it's basically already doing the 'search' part of the process automatically based on what the it thinks a user might find relevant. This puts the widget into the 'display results and offer contact' mode that you're seeing here.

    Without the contextual help on, the automatic search isn't done, so to get to the contact/results page, one needs to be done. Personally, I want to attempt to deflect users and have them attempt to self serve before we allocate human resources to a chat, but that need can vary from business to business.

    1
  • Alejandro Colon
    • Edited

    Stuart Hallows

    I saw your post. 

    https://github.com/Ajhad1/Zendesk-Web-Widget-Modifications

    It should allow you to remove the thing you wanted to be removed.

    1
  • Alejandro Colon

    Carlo Soresina

    https://github.com/Ajhad1/Zendesk-Web-Widget-Modifications

    That link will help you remove the thing you want to change. 

    Sadly, it is the best I can do.

    1
  • Alejandro Colon
    • Edited

    Active Feature Request (please vote):

    Feature Request: Add the ability to edit the Zendesk link on the Web Widget

    Stuart Hallows

    I just posted a Feature Request for this at the link below. If you would like to see this feature please head over there and show your support. Please make sure to add an upvote and comment even if it is simply a "+1"

    Also, you may consider adding it to your post to get the feature request more visible.

    https://support.zendesk.com/hc/en-us/community/posts/360046768314-Feature-Request-Add-the-ability-to-edit-the-Zendesk-link-on-the-Web-Widget

    1
  • Alejandro Colon
    • Edited

    Active Feature Request (please vote):

    Feature Request: Add CC field to Web Widget

    Carl Moore

    I just posted a Feature Request for this at the link below. If you would like to see this feature please head over there and show your support. Please make sure to add an upvote and comment even if it is simply a "+1"

    Also, you may consider adding it to your post to get the feature request more visible.

    https://support.zendesk.com/hc/en-us/community/posts/360046753654-Feature-Request-Add-CC-field-to-Web-Widget

     

    0
  • Thomas D'Hoe
    Community Moderator

    Regarding this comment, we completely redesigned our web widget configurator and added extra functionalities. Our widget configurator is now available in the Zendesk market place (with a 1-day free trial) or via widget.guide. 

    Check out our Youtube video for more info. 

    0
  • bo_zhang

    Hi,

    I want to configure the component of the contact form, but it seems it is not available to me. Please see the screenshot below, there is no option to see the name field or ticket field, or a preview of the contact form. My account level is Support Professional.

    Thanks.

    Amos

    0
  • Kay
    Community Moderator

    bo_zhang

    Could you share a screenshot of the custom fields you have configured?

    0
  • bo_zhang

    Kay 

    Hi Kay,

    The issue is I cannot find such custom fields you mentioned, all that I can see is the screenshot I sent before.

    Thanks.

    0
  • bo_zhang

    Kay Any update, Kay?

    Thanks.

    0
  • Heather Rommel
    Community Moderator

    Hi bo_zhang,

    Does this article help?

    https://support.zendesk.com/hc/en-us/articles/115004884827

     

    0
  • Kay
    Community Moderator

    Hi bo_zhang, sorry for not responding earlier.

    I believe the issue might be that you don't have any custom fields configured in your account that could actually render in the Widget. Only certain type of fields are allowed in the widget, currently.

    Could you share a screenshot of the page under Settings > Manage > Ticket Fields?

    0
  • Vinayak Godse

    is it possible to configure the name and email text field by default in the contact form if it possible then what I have to do for it?

    Thanks!

    0
  • Karen Snyder
    Community Moderator

    Vinayak Godse according to this comment, you can use the following code to populate the name and email:

    <script>
    zE(function() {
     zE.identify({
       name: HelpCenter.user.name, 
       email: HelpCenter.user.email 
     });
    }); 
    </script>
    0

Please sign in to leave a comment.

Related articles

Powered by Zendesk