English (US)
  1. Zendesk help
  2. Zendesk Suite
  3. Getting Started with Zendesk Suite

Providing omnichannel support using Web Widget (Classic) for Zendesk Suite

Aimee Spanier
  • Edited
Zendesk Documentation Team
Note:There is an updated version of the Web Widget that provides similar (but not identical) functionality using messaging, including automated conversation bots. For information seeEnabling a Web Widget to offer messaging on your website or help center.

The Zendesk Suite of products provides multiple ways for you to deliver support to and communicate with your customers.

Through the Web Widget (Classic), Zendesk’s embedded customer service experience, you can offer your customers any or all of the following Zendesk 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 use the Web Widget (Classic) 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:

  1. 决定你想要的小部件来执行,into consideration your Zendesk Suite options, your audience, your staff, and what website or help center pages would be enhanced by including the widget.
  2. Configure the basic widget settings.
  3. Configure the Zendesk Suite products you want to use, to best work with the widget.
  4. Add the widget to your website or help center code.
  5. Customize the widget by modifying the Web Widget API objects.
  6. 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:

For links to all of our documentation and support tips on the Web Widget (Classic), seeWeb Widget (Classic) resources.

Why Web Widget (Classic)?

Web Widget (Classic) 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 live 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 (Classic) 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.

你应该决定你想要哪个页面小部件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.

下面的列表包含一些你可能佤邦的事情nt 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:

  • 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?

    相关的基于“增大化现实”技术ticles:

  • 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?

    相关的基于“增大化现实”技术ticles:

Basic configuration for Web Widget (Classic)

A simple, out-of-the-box implementation of Web Widget (Classic) provides a quick way to embed customer service in your website or help center. From within the Web Widget (Classic) admin page, you can easily enable a number of features that extend the capability of your Web Widget (Classic).

This section is intended to be a quick-start guide to help you get a single instance of Web Widget (Classic) onto every page of your help center or website (mobile or desktop), with minimal configuration and customization.

Here, we’ll discussenabling the widget and its default configuration, and how to configure the following settings:

Enabling the default widget

To use the Web Widget (Classic), you need to enable it via the Zendesk Support Web Widget (Classic) admin page.

To access the Web Widget (Classic) admin page

  1. InAdmin Center, click theChannelsicon () in the sidebar, then selectClassic > Web Widget.
  2. Click theCustomizationtab, to view the default widget settings.

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. SeeManaging your ticket formsfor 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. SeeCustom ticket fields in 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. SeeContextual help, below.
  • Security settings,applies your current security access permissions to the widget. SeeSecurity settings, below.
  • Zendesk logo (enabled), displays the Zendesk logo at the bottom of the widget. SeeWidget appearance and location.
  • Theme color (defaults to green),颜色应用to most visual elements in the widget. SeeWidget appearance and location.
  • 位置(默认为正确的), the location of the widget at the bottom of the page. SeeWidget appearance and location.
  • Web Widget button text (defaults to "Help"), the text appearing in the widget launch button. SeeWidget appearance and location.
  • Contact form button text (defaults to "Leave us a message"), the text appearing in the contact form button. SeeWidget 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:

Button:

Contact form:

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. SeeAdding the Web Widget (Classic) to your support portalfor 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:

Button:

Search form:

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. SeeAdding the Web Widget to your support portalfor more information.

Widget appearance and location

You can customize the following appearance-related elements:

  • Zendesk logocan be displayed or, for some customers, turned off in the widget.
  • Theme colorfor widget buttons and links, using a color picker.
  • Button positionon 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 inConfiguring 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.

If you are already using the Web Widget, Zendesk Chat is available to customers as soon as you enable it in the Web Widget.

You can, however, configure Chat-specific elements if needed. This means you can toggle on Chat on the widget admin page, then visit your 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 theConfiguring Zendesk Talk settings for the Web Widget.

Note:Talk in the Web Widget is only available to customers that are participating in the Request a Callback from Web Widget limited availability release. If you want to join the waitlist, you can sign uphere.

Contextual help

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, seeAbout Contextual Help for the Web Widget.

Security settings

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 theConfigurebutton, 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:

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:

Guide

This section discusses some of the Guide configuration options that can affect widget functionality, including:

Article labels

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, seeUsing labels on your help center articles.

Content restriction

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 Web Widget (Classic). 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

Answer Bot uses machine learning to help answer your customers’ questions with content from your knowledge base. Answer Bot is included with all Suite plans, and is available as an add-on to Guide with Support professional plans.

When added to Web Widget (Classic), Answer Bot provides a chat-like interaction with your end users, Article Recommendations which suggest articles that may address their issue, and the option to select other contact channels for further assistance.

For information, see the following:

Support

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

On Zendesk Suite Growth plan and above, 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 fieldsallow 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 Web Widget (Classic) – 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 formsare available on Zendesk Suite Growth plan and above. 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 Web Widget (Classic) 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 Web Widget (Classic), 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

相关的基于“增大化现实”技术ticles:

Ticket tags

When a ticket is submitted through the Web Widget, it includes, as a tag, the URL for the page the user was viewing 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.

相关的基于“增大化现实”技术ticles:

Adding custom tags to Web Widget tickets from specific pages

Multiple brands

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.

Note:The number of help centers you’re allowed is determined by your current plan. SeeCreating a help center for one of your brandsfor information.

每个品牌可以定制一些元素出现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 inBasic configuration for Web Widget (Classic).

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:

Talk

If you are using theRequest a callback from Web Widget (Classic)feature, you can create multiple configurations that define how Talk behaves in Web Widget (Classic). With each configuration you can customize call routing and display options for Talk in Web Widget (Classic), 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 inConfiguring Zendesk Talk settings for Web Widget (Classic).

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 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 Web Widget (Classic) that sends the end user to the agent who can best address their specific issue, so you will want to consider the following:

Group routing

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.

相关的基于“增大化现实”技术ticles:

Talk nicknames

If you have created multiple configurations of Talk in Web Widget (Classic), 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, seeUpdating Talk settings for specific widget instances, below.

Priority

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.

相关的基于“增大化现实”技术ticles:

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.

相关的基于“增大化现实”技术ticles:

Chat

Zendesk Chat can be fully integrated with Web Widget (Classic). You can customize the appearance of the Chat visual elements, Chat forms, security settings, and other Chat-specific options. SeeConfiguring and deploying chat on your website or help centerfor a walkthrough of your customization options, as well as instructions for enabling Chat in the Web Widget (Classic). You can also find useful information in the Support TipWeb Widget (Classic) and chat advanced customization.

Adding Web Widget (Classic) to your support portal

When you have configured the widget elements discussed inBasic configuration for Web Widget (Classic)and (if needed)Configuring Zendesk Suite products for Web Widget (Classic), you can generate the code and add it to your website or help center.

For detailed instructions, seeAdding 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’veplanned your widget strategy, completed thebasic widget configuration, and anyproduct-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. SeeAbout the Web Widget APIfor 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 Web Widget (Classic), 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, seeSuppressing 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 Web Widget (Classic) 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:

Updating Talk settings for specific widget instances

If you’re usingTalk 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 describedabove,每个配置都有一个独特的昵称。你我们e 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":

相关的基于“增大化现实”技术ticles:

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 Web Widget (Classic), 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:

  1. Add the basic widget code to each page of your website where you want it to appear, or to your help center, as described inAdding Web Widget (Classic) to your support portal.
  2. 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 inFurther 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.

Sample workflow

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 Web Widget (Classic).

Configuration goal: Enable the Chat integration 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:

  1. In Zendesk Chat,create a schedule with operating hours.
  2. Create chat triggersfor specific pages, andenable skills routingto send chat requests from those pages to the right agent group.
  3. In Zendesk Support,create a viewfor sales-related tickets.
  4. Create a trigger to route Web Widget tickets from specific pages into the viewcreated in step 3. Use the URLs for the specific pages (the same URLs as used in step 2).
  5. Configure the components in your Web Widget (Classic), making sure to enable Chat.
  6. Add the widget to your website or help center.
  7. 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:

  8. Add this code to the pageson your website, or yourhelp center, where needed.
    Return to top

    0 Comments

      Pleasesign into leave a comment.

      相关的基于“增大化现实”技术ticles

      Powered by Zendesk