The Zendesk Suite of products provides multiple ways for you to deliver support to and communicate with your customers.
Through the Web Widget, Zendesk’s embedded customer service experience, you can offer your customers any or all of the following Suite products:
- Guide: Suggest Help Center articles for immediate self-service support.
- Support: Display ticket forms for support requests.
- Talk: Let customers request a callback from an agent, or view a contact number.
- Chat: Launch a chat with an agent.
Additionally, you can choose which contact options to make available to your end-users, based on the web page they’re viewing when they request support via the widget, agent availability, and more.
This article walks you through the tasks required to the use the Web Widget with Zendesk Suite products to provide focused, customized support for your customers, along with links to relevant documentation so you can get up and running in no time.
The basic workflow is as follows:
- Decide how you want the widget to perform, taking into consideration your Zendesk Suite options, your audience, your staff, and what website or Help Center pages would be enhanced by including the widget.
- Configure the basic widget settings.
- Configure the Zendesk Suite products you want to use, to best work with the widget.
- Add the widget to your website or Help Center code.
- Customize the widget by modifying the Web Widget API objects.
- Add the customized objects to your website pages, or to your branded Help Centers.
The steps in this workflow are described in more detail in this article, which includes the following topics:
- Why Web Widget?
- Planning your Web Widget strategy for Zendesk Suite
- Basic configuration for the Web Widget
- Configuring Zendesk Suite products for the Web Widget
- Adding the Web Widget to your support portal
- Further customization of your widget configuration(s) by modifying the API
- Adding the modified code to your widget instances
- Sample workflow
For links to all of our documentation and support tips on the Web Widget, see Web Widget resources.
Why Web Widget?
The Web Widget is an extremely flexible tool for embedding customer service features in your website or Help Center, allowing your end-users to get help without leaving the page they’re on. It’s also simple to configure and enable, so you can get up and running quickly. You can add different configurations of the widget to any page of your website, or create different widgets for multiple Help Center brands, which makes it the perfect medium for offering support options.
Your widget organizations options include:
- A single configuration of the widget on every website or Help Center page
- Different widget configurations on specific web pages
- Different widget configurations for each branded Help Center
The widget is easily customizable. No matter which Zendesk Suite products you use, you can configure the widget in a number of ways, including:
- Displaying custom ticket fields and ticket forms, based on the type of request being made
- Controlling the appearance of Widget elements to reflect your brand(s)
- Restricting access to signed-in users, or making it available to every visitor to your site or Help Center
- Establishing contextual help
You can update these, and other, settings as needed, without redeploying the code every time you make a change.
Offering multiple contact options gives your end-users a better experience as well. They can self-serve by searching the Help Center, and they can choose to reach out to an agent in the way that best fits their situation - via Chat for real-time help, Talk if they prefer to be reached by phone, or by filing a ticket if they don’t need immediate assistance.
Planning your Web Widget strategy for Zendesk Suite
Make a broad, holistic assessment of your business requirements and restrictions, customer needs, website and Help Center offerings, and multibrand options - among other things - to determine how you can best combine the Widget with Zendesk Suite products.
You should decide which pages you want your widget to appear on. If you’re adding the widget to a website, you can add a customized API to the standard widget code on each page, displaying different options to your end-users. If you have a multi-branded Help Center, you can have different configurations of the widget for each brand’s Help Center.
The following list includes some things you may want to consider when determining how to use the Widget in conjunction with Zendesk Suite. Use the links to learn more about each of these elements:
- Business hours: When do you offer live support (via Chat or Talk)? How do you want to respond to customer service requests outside of business hours?
- Setting your schedule with business hours and holidays (Zendesk Support)
- Creating a schedule with operating hours (Zendesk Chat)
- Routing calls based on business hours (Zendesk Talk)
- Customer service channels: Which channels do you prefer for customer contact? Do you want to encourage self-service, or would you rather take a more hands-on approach to helping your customers?
- Service Level Agreements: Do your customers require a response or resolution within a set time?
- Staffing and demand: When do you tend to have the most staff on hand to respond to customer requests? When does demand spike, and when does it dip?
- Customer location: Does it make sense to offer different types of service, or route requests to different departments, based on where the customer is on your website or Help Center when they launch the Web Widget?
- Customer info: Do you break your customers down into different support levels, based on their account type or other criteria? Do your VIP customers need a different kind of service than your standard customers? Are your customers identified in some way that can be leveraged to route them to the right kind of support?
Basic configuration for the Web Widget
A simple, out-of-the-box implementation of the Web Widget provides a quick way to embed customer service in your website or Help Center. From within the Web Widget admin page, you can easily enable a number of features that extend the capability of your Web Widget.
This section is intended to be a quick-start guide to help you get a single instance of the Web Widget on to every page of your Help Center or website (mobile or desktop), with minimal configuration and customization.
Here, we’ll discuss enabling the widget and its default cofiguration, and how to configure the following settings:
Enabling the default widget
To use the Web Widget, you need to enable it via the Zendesk Support Widget admin page, which you can access by clicking Channels > Widget. You can view the default widget settings by clicking the Customization tab.
The default settings include:
- Contact form (enabled), a support request form.
- Ticket form(s) (disabled), a set of predefined ticket fields for a specific support request. When toggled on, your default ticket form is applied to the contact form. See Managing your ticket forms for more information.
- Custom ticket fields (disabled), custom fields added to your support request form(s). You can add any available custom ticket fields to the contact form using the drop-down menu. See Custom ticket fields in the Web Widget.
- Chat (enabled for Chat users; unavailable for customers not using Chat), adds a chat launcher button to the widget search results screen.
- Help Center (enabled for Help Center users), adds a Help Center article search to the widget.
- Contextual Help (enabled), displays suggested articles upon initial launch of the widget, based on the page the end-user is viewing. See Contextual help, below.
- Security settings, applies your current security access permissions to the widget. See Security settings, below.
- Zendesk logo (enabled), displays the Zendesk logo at the bottom of the widget. See Widget appearance and location.
- Theme color (defaults to green), the color applied to most visual elements in the widget. See Widget appearance and location.
- Position (defaults to right), the location of the widget at the bottom of the page. See Widget appearance and location.
- Web Widget button text (defaults to "Help"), the text appearing in the widget launch button. See Widget appearance and location.
- Contact form button text (defaults to "Leave us a message"), the text appearing in the contact form button. See Widget appearance and location.
On a website, by default, and without any further configuration, the widget will include a simple Help button, which launches a basic contact form, when you add it to your website:
When a customer clicks the Help button, the contact form appears, asking for some basic support information. When the customer clicks Send, a Support ticket is created and sent to your ticket queue.
If you’re satisfied with the widget as is, you can add it to your website. See Adding the Web Widget to your support portal for more information.
On a Help Center, when enabling the widget the steps, and end result, are slightly different than described above.
The default configuration for a Help Center widget includes suggested articles for your customers, based on keywords included in their query, so you must have a Help Center set up, with articles that cover at least the common support questions.
As with the website setup, you’re guided through an initial setup process by a wizard. To enable the widget for the Help Center, make sure you toggle on the Help Center option.
By default, and without any further configuration, the Widget will include a simple Help button, which launches a basic search form, when added to your Help Center:
Suggested articles & ticket submit option:
When a customer enters a search query, a list of potentially relevant Help Center articles is displayed, along with the option to submit a ticket if they need further assistance.
If you’re satisfied with the widget as is, you can embed the Web Widget in your Help Center. See Adding the Web Widget to your support portal for more information.
Widget appearance and location
You can customize the following appearance-related elements:
- Zendesk logo can be displayed or, for some customers, turned off in the widget.
- Theme color for widget buttons and links, using a color picker.
- Button position on the left or right of the page, using a drop-down menu.
- Widget button text, using the drop-down menu to select Help (default), Support, or Feedback.
- Contact form button text, using the drop-down menu to select Leave us a message (default) or Contact us.
More information and instructions, as well as links to related articles, can be found in Configuring the components in your Web Widget.
Chat and Talk
If you are using Zendesk Chat or Zendesk Talk, you can enable them from the Web Widget admin page, and perform a basic configuration to get them up and running.
Zendesk Chat is available by default in a pared-down form in the Web Widget. This means you can toggle on Chat on the widget admin page, then visit the Chat admin page to configure the basic appearance, forms, settings, and security options.
Chat is only presented as a contact option to the end-user if Chat agents are online; if no agents are online, the end-user is given the option to leave a message.
Zendesk Talk functionality is also available in the widget. By default, Talk in the widget uses your default settings to determine the groups widget calls are routed to, the available contact options, and the like; with minimal configuration effort, you can customize these settings. More information can be found in the Configuring Zendesk Talk settings for the Web Widget.
If you’re using the basic widget functionality that first asks your end-users to enter a question or keywords, and encourages them to self-service by suggesting Help Center articles, you can refine these article suggestions by enabling Contextual help. Contextual help uses the web page your visitor is currently on, along with your Help Center content, to suggest articles that are relevant to their questions.
For more information, see About Contextual Help for the Web Widget.
You can configure your Web Widget to display content from a restricted Help Center (one that requires users to sign in for access), or restricted knowledge base content (a public Help Center with certain articles or sections restricted to signed-in users only).
Clicking the Configure button, shown above, opens the widget security settings page, where you can specify whitelisted domains and generate a shared secret to enable access to restricted content.
When you configure the Web Widget to include restricted content:
- Visitors to your website who are logged in can read the restricted Help Center articles via the Web Widget. Note that the customer site in which the Widget is embedded is responsible for authentication of a user's email.
- Visitors who are not logged in, however, see only public articles. If there are no public articles, the Help Center features do not appear in the Web Widget.
For more information, see the following articles:
- Using restricted Help Center content with the Web Widget
- Permitting only added users to submit tickets
- Configuring widget security settings (Zendesk Chat-specific)
Configuring Zendesk Suite products for the Web Widget
Each Zendesk Suite product has settings, permissions, and other configuration options that can impact how they function when paired with the Web Widget. This section describes some of those options, and how they might affect widget functionality, for:
This section discusses some of the Guide configuration options that can affect widget functionality, including:
By adding labels to your Guide knowledge base articles, you can improve your end-users’ search results. Using labels properly can increase the level of self-service your end-users achieve. If a search through the widget doesn’t result in an answer for your end-user, they’re presented with additional contact options. If they don’t find the information they needed, do they need to file a ticket, chat with an agent, or request a callback?
When adding labels to articles, keep in mind that they are indexed for search with a little less weight than the article title; however, multiple labels with similar words can outweigh the title and body of the article.
For more information, see Using labels on your Help Center articles.
You can restrict access to specific articles, or entire sections, in your Help Center. Access can be granted based on user authentication, or by creating groups of end-users, called user segments.
Restricting access to articles impacts the search results displayed when an end-user enters a question or search term into the Web Widget. If an end-user does not have permission to view certain articles, their search results may be less-than-helpful. As with labels, this can affect whether they can solve their own support issue, or need further assistance from your support team.
For more information, see the following articles:
Answer Bot (Web Widget Early Access Program)
Answer Bot uses machine learning to help answer your customers’ questions with content from your knowledge base. Answer Bot is an add-on to guide, and is available as a subscription.
When added to the Web Widget through the EAP, Answer Bot provides a chat-like interaction with your end-users, where they can view articles that may address their issue, and if needed, select other contact channels for further assistance.
You can use Answer Bot with your Web Widget by joining the Early Access Program (EAP).
For information, see the following:
Your Zendesk Support configuration choices affect the appearance of the widget, and ticket routing and creation.
This section discusses some of the Support options that impact how the widget handles Support-related tasks. These options include:
- Custom ticket fields and ticket forms
- Custom user fields
- Ticket tags
- Multiple brands
Custom ticket fields and ticket forms
If you are on the Enterprise plan, or the Professional plan with an add-on, you have the option of presenting your end-users with a single default ticket form, or with a selection list of active forms. You can customize the information displayed in your default contact form using custom ticket fields, or you can present your end-users with multiple custom ticket forms to choose from.
Custom ticket fields allow you to gather more information about the end-user’s support issue, by customizing the information you request from your end-users in your ticket forms. However, every instance of the Web Widget - even widgets for different brands - will use the same default ticket form, so you might find it more useful to create multiple ticket forms that allow your end-users to choose the topic that addresses their issue best.
Multiple ticket forms are available if you are on the Enterprise plan, or the Professional plan with an add-on. They allow you to display all active ticket forms to the end-user. When ticket forms are toggled on, the end-user clicks the Leave us a message button, and they can select the form that matches their needs. You can assign different custom forms to different brands (and therefore display different forms in the widget associated with each brand), but the default form is always displayed, no matter the current brand.
Learn more about custom ticket fields, ticket forms, and using them in the Web Widget in the following articles:
Custom user fields
Custom user fields are added to user profiles to store additional customer details. Any custom user fields you create apply to all users. If you require your users to sign in before interacting with the Web Widget, you can use these fields in your business rules (triggers, automations, and macros) to route the tickets generated by the user to the best agent or group to handle
When a ticket is submitted through the Web Widget, it includes the URL for the page the user was viewing as a tag when the ticket is sent. In Zendesk Support, you can create triggers based on these URLs to add custom tags to the ticket, then use these tags to route tickets into specific ticket views.
If you support multiple brands, you can create and customize a separate widget for each brand. Each brand’s widget can be configured based on that brand’s needs and style, and then linked to the brand’s Help Center.
Each brand can customize some elements that appear in the widget, such as security settings, ticket forms, theme color, and the like. Customizable elements are different for Help Center and website widgets. Information on these elements is available in Basic configuration for the Web Widget .
Although you can customize each brand’s widget, keep in mind that all brands, and all widgets, on your account share some elements, such as your Talk and Chat accounts. You can use the brands to tag users when they launch a Chat or Talk session from the widget, then use those tags to route them to the right agent or agent group (See Chat and Talk below for more information).
For more information, see the following articles:
If you are part of the Request a callback from Web Widget Limited Availability release, you can create multiple configurations that define how Talk behaves in the Web Widget. With each configuration you can customize call routing and display options for Talk in the Web Widget, based on your needs and preferences. These configurations can use separate numbers, so you can route them to the agents best suited to address the end-users’ issues. Instructions for creating Talk configurations can be found in Configuring Zendesk Talk settings for the Web Widget.
Let’s use the following scenario to give the Talk settings discussed below some context:
An end-user ordered the wrong size shirt, and wants to exchange it. They are currently on a website page describing the product return process. When that end-user clicks the Web Widget launcher button, they choose to request a callback from an agent, for assistance in exchanging the shirt.
You’ll want to have a Talk configuration for the Web Widget that sends the end-user to the right agent to address their specific issue, so you will want to consider the following:
In the scenario above, you’ll want to make sure the agent receiving the callback request knows how to handle sales-related issues. To do this, you need to create a specific group, populated by agents familiar with sales support. Any group you create can be selected in the Group routing setting.
If you have created multiple configurations of Talk in the Web Widget, each one has a unique nickname. You can then refer to that nickname in the Web Widget API, to display a specific configuration on a specific page.
For information on using nicknames to specify widget configurations, see Updating Talk settings for specific widget instances, below.
Next you can select the priority this call should be given. The configuration allows you to choose Normal or High priority for calls coming from this page. This is an important setting if you have other configurations sending calls to the Sales Support group - High priority calls are pushed to the top of the queue, ahead of any Normal priority calls, regardless of their wait time.
Displaying time estimates
If you like, you can display the average waiting time until an agent is available. This is simply a courtesy to your end-user, who can decide whether to wait for agent assistance, or request a callback when someone is available.
You can include pared-down chat functionality immediately in your widget, as described in Chat and Talk. Or, you can use expanded Chat features in the Web Widget, explore how you might best configure Chat when it is fully integrated with the widget, and give feedback that might impact the direction the integration takes.
For information on joining the EAP, see Start Here: Web Widget Integrated Chat Experience (EAP).
Adding the Web Widget to your support portal
When you have configured the widget elements discussed in Basic configuration for the Web Widget and (if needed) Configuring Zendesk Suite products for the Web Widget, you can generate the code and add it to your website or Help Center.
For detailed instructions, see Adding the widget to your website or Help Center.
You can now work on more complex customization of the widget.
Further customization of your widget configuration(s) by modifying the API
After you’ve planned your widget strategy, completed the basic widget configuration, and any product-specific setup, you’re ready to customize the widget code and update the configuration - or configurations - you’ve added to your website or Help Center site.
You can add these custom widget configurations to your website or Help Center in each spot where you want that configuration to appear, by adding customizing the widget API object zESettings, to each page where the widget appears. See About the Web Widget API for more information.
Most configuration-specific customizations are made by modifying the zESettings object, and can include:
Controlling which channels are displayed in the widget
You can choose to display or suppress support channels in the Web Widget, based on the website or Help Center page the widget is launched from. You can suppress any of the support channels offered through the widget. This allows you to direct your end-users to (or away from) specific contact options.
In the following example, your widget is configured to offer search, ticket filing, Talk, and Chat as support options, but when an end-user launches the widget from a payment page, you only want to offer them the option to start a chat with an agent, with the option to leave a message if no agent is available.
To do this, you need to modify the widget API code included in the payment page’s HTML, to suppress the channels you do not want your end-user to access. On the payment page of your website, you would add the following to the widget API:
This displays only the Chat channel option to your end-user (as the Talk and Help Center channels are suppressed). Remember, the Chat option is only available if Chat agents are on duty; otherwise, end-users will be instructed to leave a message.
For more information on how to make similar modifications, see Suppressing features on specific pages.
Positioning the widget on your page
By default, the widget is placed at the bottom-right of the browser, and it opens by expanding upward. Widget placement can vary from page to page, by adding different modified zESettings objects to different pages.
You can change the placement of the Web Widget in two ways:
Customizing the look and language of the widget
You can change the color of widget elements, or the text that appears on them, rather than using the default settings.
Elements you can change include:
The color of the widget buttons, text, and the like, can be altered by adding a color theme applied to all elements, or by assigning different colors to each element. See Customizing the color of the widget elements.
The widget language, which by default appears in the end-user’s selected language. You can force the widget to display in the language of your choice, despite the end-user’s selection. See Displaying your widget in a different language.
The text on most widget elements, such as the Chat and Support launcher buttons, and the title of the widget contact form or Help Center page. See Customizing widget text.
The subject line on the widget contact form, which by default is empty, can say whatever you want. See Adding a subject line to the contact form.
The search placeholder text, which is also empty by default. See Customizing the Help Center search placeholder text.
Updating Talk settings for specific widget instances
If you’re using Talk in the Web Widget, you may want to create multiple configurations that define how Talk behaves on different pages. In each configuration, you can customize the following:
- The agent group that you want Web Widget callback requests to be routed to
- The priority of Web Widget callback requests
- Display Request a callback, Call us, or both of these options in the Web Widget
- Display an estimated wait time in the Web Widget
When you create multiple configurations for Talk in the widget, as described above, each configuration has a unique nickname. You use these nicknames in the modified API code to determine which configuration appears on each page of your website or Help Center.
For example, if you’re creating a configuration to handle Sales questions, you can enter the nickname “Sales Support”. Then, you modify the API to refer to that configuration.
The following API block would target a configuration with nickname “Sales Support":
Adding the modified code to your widget instances
As discussed above, you can modify the Web Widget API to customize any number of elements in the Web Widget, and in many cases you can add multiple configurations, with different customization choices, throughout a single website or Help Center.
To get the customizations onto your website or Help Center, you need to add the modified API objects, along with the basic widget code, to your website or Help Center,
The basic steps to adding multiple instances of the widget to different places on your website or Help Center are as follows:
- Add the basic widget code to each page of your website where you want it to appear, or to your Help Center, as described in Adding the Web Widget to your support portal.
- On each page where you want to offer a customized version of your widget, add the Web Widget API, with the modifications made as described above in Further customization of your widget configuration(s).
- For a website, go to each web page where you want to add that version of the widget, then paste the code before the Web Widget snippet.
- For a Help Center, go to the Guide Admin for each brand you want to customize, and add the modified API to the header code before the Web Widget snippet.
In this example, both Chat and Talk are offered in the widget to end-users only when those channels have agents available.
A potential customer is viewing a marketing page for Product A on your website during regular business hours. They have a question about the product, and click Support to launch the Web Widget.
Configuration goal: Enable the Chat integration EAP to provide real-time support and complement Help Center and Contact Form.
Customize the configuration to address the following:
- Chat, for immediate response - you’ll want to talk to this person ASAP, to capture the sale.
- Product - Sales experts on Product A will be the best fit.
- Availability - If it is after business hours, and no Chat agents are available, offer the option to submit a support ticket that is routed to Sales agents.
The basic steps to address this scenario are as follows:
- In Zendesk Chat, create a schedule with operating hours.
- Create chat triggers for specific pages, and enable skills routing to send chat requests from those pages to the right agent group.
- In Zendesk Support, create a view for sales-related tickets.
- Create a trigger to route Web Widget tickets from specific pages into the view created in step 3. Use the URLs for the specific pages (the same URLs as used in step 2).
- Configure the components in your Web Widget, making sure to enable Chat.
- Add the widget to your website or Help Center.
- Customize the zESettings object in the API code to:
- Suppress the Help Center search option
- Display different messages based on agent availability
- Offer the Sales contact form if needed
- Route the ticket generated by the contact form to the Sales ticket view.
That API customization might look like the following:
- Add this code to the pages on your website, or your Help Center, where needed.