Advanced customization of Web Widget (Classic)

You can use the offset setting to reposition the Web Widget (Classic) on your desktop or mobile devices. Use the initial position setting as the point of reference, and then use the offset setting to move the Web Widget (Classic) horizontally, vertically, or both from that position (in pixels).

For more information, see the developer documentation for the offset setting.

You can specify an overall color scheme for the Web Widget (Classic) (theme color) and a custom color for the text in the launcher, contact button, and header (theme text color) from the Web Widget (Classic) administration page (seeConfiguring components in Web Widget (Classic)).

However, if you want to customize specific elements, you need to use the color setting. You can choose a unique color for each of these Web Widget (Classic) components:

• Launcher
• Button
• Button text
• Results list
• Header
• Article links

For accessibility purposes, the Web Widget (Classic) automatically adjusts colors using an algorithm to guarantee a minimum contrast ratio as specified by the WCAG guidelines.

For more information about customizing the color of Web Widget (Classic) elements, see the developer documentation for the color setting.

You can use the zIndex setting, one of the core Web Widget (Classic) settings, to set a new value and change how the Web Widget (Classic) appears in comparison to other elements appearing in the same location on your site.

For more information, see the developer documentation for the zIndex setting.

You can enable the Contact Form, Chat, Talk, and help center in the Web Widget (Classic) and then use the suppress setting to change the features offered on particular pages of your site to suit your needs.

For more information, see the developer documentation for the suppress setting.

You can change the text of the Web Widget (Classic) components in the table below, and you can also customize thehelp center search placeholder text.

Component	Details
	Object:launcher Setting:chatLabel Description:Text on the launcher button when Chat is enabled and Help Center is not on Default text:Chat
	Object:launcher Setting:label Description:Text on the launcher button Default text:Help,SupportorFeedback, defined on the Web Widget (Classic) Admin page
	Object:helpCenter Setting:title Description:The title of the Help Center page Default text:Help
	Object:contactForm Setting:title Description:Title of the contact form Default text:Leave us a messageorContact usdefined on the Web Widget (Classic) Admin page
	Object:helpCenter Setting:messageButton Description:Text on the button in the help center form that loads the Contact form (~20 character limit) Default text:Leave us a messageorContact usdefined on the Web Widget (Classic) Admin page
	Object:helpCenter Setting:chatButton Description:Text on the button shown in the help center form that loads the Chat (~20 character limit) Default text:Help,Support, orFeedbackdefined on the Web Widget (Classic) Admin page

You use thetranslationsobject to change some of the default text displayed in the Web Widget (Classic). Translations are grouped by feature—for example, Launcher, help center, and Contact Form.

You can explore a list of potential language codes inLanguage codes for Zendesk supported languages.

The locale translations are triggered by the end user's browser language. You can also force the widget to always appear in a specific language and override the end user's browser language setting. For more information, seeDisplaying your widget in a different language.

With the subject setting on the contactForm object, you can set the Web Widget (Classic) to include a subject field in the default contact form.

The default contact form is designed to promote engagement and offer a streamlined user experience when completing the contact form. While the default contact form does not include a subject line, you may want to add one to enhance the support experience for some customers.

For more information, see the developer documentation for the subject setting on the contactForm object.

The View Original Article button bridges the article in the Web Widget (Classic) and the article in the help center itself. You can hide this button by using the helpCenter object, and setting the originalArticleButton property to false.

For more information, see the developer documentation for the originalArticleButton setting for the helpCenter object.

With the filter setting on the helpCenter object, you can limit the results of searches performed from the Web Widget (Classic) to articles based on category, section, and labels. For more information, see the developer documentation for the filter setting.

Scroll down for some additional examples that are not included in the developer docs that illustrate some of the ways you can limit search results.

To limit search to a specific section:

<script type="text/JavaScript">
window.zESettings = {
  webWidget: {
    helpCenter: {
      filter: {
        section: '200154474-Announcements'
      }
    }
  }
};
</script>

To limit search to a specific category:

<script type="text/JavaScript">
window.zESettings = {
  webWidget: {
    helpCenter: {
      filter: {
        category: '200053794-General'
      }
    }
  }
};
</script>

To limit search to content in multiple categories:

<script type="text/JavaScript">
window.zESettings = {
  webWidget: {
    helpCenter: {
      filter: {
        category: '115000669485,201742209' 
      }
    }
  }
};
</script>

To limit search to content with a specific label:

<script type="text/JavaScript">
window.zESettings = {
  webWidget: {
    helpCenter: {
      filter: {
        label_names: 'orders'
      }
    }
  }
};
</script>

To limit search to content in a specific category and with specific labels:

<script type="text/JavaScript">
window.zESettings = {
  webWidget: {
    helpCenter: {
      filter: {
        category: '200053794-General',
        label_names: 'Label One,Label Two,Label Three'
      }
    }
  }
};
</script>

The default placeholder text in the help center search box isHow can we help? You can customize this text so that it matches the user’s language, or so that specific text appears in certain languages. For more information, see the developer documentation for the searchPlaceholder setting.

If Contextual Help is enabled, you can also configure the Web Widget (Classic) to open to recommended articles, making it easier for your customers to self-serve. For more information, see the developer documentation for the setSuggestions command for the helpCenter object.

You can create multiple configurations that define how Talk behaves in the Web Widget (Classic). With each configuration you can customize call routing and display options for Talk in the Web Widget (Classic), based on your needs and preferences.

If you have only created a single configuration of Talk in the Web Widget (Classic), this will automatically be the default configuration that displays in the Web Widget (Classic) whenever Talk is available.

If you have created multiple configurations of Talk in the Web Widget (Classic), you can use the Talk nickname setting to target the desired configuration.

For more information, see the developer documentation for the talk object, the nickname setting, and Configuring Zendesk Talk settings for the Web Widget (Classic).

If you are using the live chat in the Web Widget (Classic), you can offer Zendesk Chat functions in the Web Widget (Classic) so that visitors to your website can chat with agents, and send and receive files that might help with their problem. Agents can also send proactive messages to visitors, to see if they want or need any help.

For more information, see the developer documentation for the chat object.

For information about how the old Chat (Zopim) APIs map to the Web Widget (Classic) APIs, see Migrating from the Chat widget syntax to the unified Web Widget syntax.

You can allow end users to choose a contact option. 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.

Here's a list of the default text:

For more information, see the developer documentation for the contactOptions setting.

Offering contact options with Chat

If Chat is configured for the Web Widget (Classic), end users are automatically routed to a chat, if a chat agent is available. However, you can allow end users to choose between chatting with an agent or completing a contact form, even if a chat agent is available. If a chat agent is available when the user clicks the launcher, but the agent signs off before the chat begins, the end users may see a message indicating that the agent is not available.

It's a known issue that when end users choose to chat, they cannot use the back button to return to the other contact options. To do so, they need to completely end the chat or refresh the page.

Offering contact options with Talk

If Talk and other contact options are enabled in the Web Widget (Classic), and agents are online, contact options are automatically enabled.

Items that are specific to the Contact Form, Help Center, and Zendesk Chat are nested under those headings (contactForm, helpCenter and chat) in the HTML of your site, while global items are included separately.

<script type="text/JavaScript">
window.zESettings = {
  webWidget: {
    offset: { horizontal: '400px', vertical: '400px' },
    helpCenter: {
      originalArticleButton: false,
      title: {
        'en-US': 'Search for help',
        '*': 'Have your say'
      }
    },
    chat: {
      suppress: true
    },
    contactForm: {
      title: {
        'en-US': 'SMessage us',
        '*': 'Contact us'
      }
    },
    launcher: {
      label: {
        'en-US': 'Make a request',
        '*': 'Get help'
      }
    }
  }
};
</script>