Configuring components in Web Widget (Classic)

<div class="article-banners">
<div id="docs-wmp-link"><a href="https://support.zendesk.com/hc/en-us/articles/5411234991258-plan" rel="noopener" target="_blank">What's my plan?</a></div>
<div class="article-banner" id="suite_all">
<table>
<tbody>
<tr>
<td>
<strong>All Suites</strong>
</td>
<td>Team, Growth, Professional, Enterprise, or Enterprise Plus</td>
</tr>
</tbody>
</table>
</div>
<div class="article-banner" id="support_all">
<table>
<tbody>
<tr>
<td>
<strong>Support</strong>
</td>
<td>Team, Professional, or Enterprise</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="body">
<div class="note fastpath" style="margin-right: 0px;">
<span class="fastpathtitle">Location: </span> <span class="ph">Admin Center &gt; Channels &gt; Classic &gt; Web Widget</span>
</div>
<div class="note note">
<span class="notetitle">Note:</span> This article applies to accounts using Web Widget (Classic). If you're using the messaging
Web Widget, see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408828655514" target="_blank">Configuring the Web Widget for messaging</a>.</div>
<p class="p">Before you <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408821673242" target="_blank">add the Web Widget (Classic) to your website or help
center</a>, you need to decide which components you want to include in Web Widget
(Classic) 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 (Classic).</p>
<div class="p">You can configure the Web Widget (Classic) to include any combination of these components:<ul class="ul" id="topic_vcf_rv3_vz__ul_wnr_5v3_vz">
<li class="li">Help center search and suggested articles</li>
<li class="li">Zendesk Chat for live chat with an agent</li>
<li class="li">Zendesk Talk for requesting a callback from an agent or viewing a phone number to
call<div class="note note">
<span class="notetitle">Note:</span> The <a class="xref" href="https://developer.zendesk.com/api-reference/widget/core/?_ga=2.178599972.1856115937.1636986507-440428362.1635269746#prefill" target="_blank">prefill API</a> doesn't work with the Talk callback
form.</div>
</li>
<li class="li">Contact forms for filing a ticket</li>
</ul>
</div>
<p class="p">For information about how components are presented to end users, see the section about <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408836216218#topic_bkd_qgd_bq" target="_blank">Understanding the end user experience</a>. For a complete
list of Web Widget (Classic) documentation, see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408833907354" target="_blank">Web Widget (Classic) resources</a>.</p>
<p class="p">This article includes these sections:</p>
<ul class="ul" id="topic_vcf_rv3_vz__ul_zdb_zbd_vfb">
<li class="li"><a class="xref" href="#topic_vzf_bmc_vfb">Configuring the Web Widget (Classic)</a></li>
<li class="li"><a class="xref" href="#topic_ldx_wlc_vfb">Configurable Web Widget (Classic)
components</a></li>
</ul>
</div>
<div aria-labelledby="ariaid-title2" class="topic nested1" id="topic_vzf_bmc_vfb">
<h2 class="title topictitle2" id="ariaid-title2">Configuring the Web Widget (Classic)</h2>
<div class="body">
<p class="p">The Web Widget (Classic) 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 (Classic).</p>
<p class="p">For detailed information about the components you can configure, see <a class="xref" href="#topic_ldx_wlc_vfb">Configurable Web Widget (Classic) components</a> (below).</p>
<p class="p"><strong class="ph b">To configure the Web Widget (Classic)</strong></p>
<div class="p">
<ol class="ol" id="topic_vzf_bmc_vfb__ol_ynr_5v3_vz">
<li class="li">
<span class="ph">In <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4581766374554#topic_hfg_dyz_1hb" target="_blank">Admin Center</a>, click
<img class="image" id="topic_vzf_bmc_vfb__d8e836" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/ac_channels_icon.png">
<strong class="ph b">Channels</strong> in the sidebar, then select <strong class="ph b">Classic &gt; Web Widget</strong>.</span><p class="p">If you are setting up the Web Widget (Classic) 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.</p>
<p class="p">If this isn't your first time setting up the Web Widget (Classic) skip
this step. The wizard doesn't appear for you.</p>
</li>
<li class="li">From the <strong class="ph b">Customization</strong> tab, configure your Web Widget (Classic) components (see
<a class="xref" href="#topic_ldx_wlc_vfb">Configurable Web Widget (Classic)
components</a>).</li>
<li class="li">When you're done configuring components, click <strong class="ph b">Save</strong>.<div class="note note">
<span class="notetitle">Note:</span> Allow 10 minutes for
changes to the Web Widget (Classic) to propagate and appear in the Web Widget
(Classic).</div>
<p class="p">Once you're done with this procedure, you're ready to complete the
steps described in <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408821673242" target="_blank">Adding Web Widget (Classic) to your website or help center</a>,
if you haven't already.</p>
</li>
</ol>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title3" class="topic nested1" id="topic_ldx_wlc_vfb">
<h2 class="title topictitle2" id="ariaid-title3">Configurable Web Widget (Classic) components</h2>
<div class="body">
<p class="p">This table lists the Web Widget (Classic) components that you can configure from
Support.</p>
<p class="p">If you want to customize the Web Widget (Classic) further, it's possible to do that using
the Web Widget (Classic) API, but you might need the help of a website developer. For more
information, see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408832257562" target="_blank">Advanced customization of Web Widget (Classic)</a>.</p>
<div class="tablenoborder">
<table border="1" cellpadding="4" cellspacing="0" class="table" frame="border" id="topic_ldx_wlc_vfb__table_bwm_2km_kfb" rules="all" summary="">
<colgroup>
<col style="width:25%">
<col style="width:75%">
</colgroup>
<thead class="thead" style="text-align:left;">
<tr class="row">
<th class="entry cellrowborder" id="d51e207" style="vertical-align:top;">Setting</th>
<th class="entry cellrowborder" id="d51e210" style="vertical-align:top;">Description</th>
</tr>
</thead>
<tbody class="tbody">
<tr class="row">
<td class="entry cellrowborder" headers="d51e207" style="vertical-align:top;">
<p class="p">Contact form</p>
</td>
<td class="entry cellrowborder" headers="d51e210" style="vertical-align:top;">
<p class="p">To allow customers to submit tickets from the Web Widget (Classic) 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 (Classic), turn the toggle off. Tickets
submitted through the Web Widget (Classic) contain the tag “web_widget.” </p>
<p class="p">You can use these options to control the name field in the default contact form
and ticket forms that appear in the Web Widget (Classic).</p>
<ul class="ul" id="topic_ldx_wlc_vfb__ul_ogh_kyl_dhb">
<li class="li">
<p class="p"><strong class="ph b">Show name field—</strong>Causes the name field to appear in the forms in the
Web Widget (Classic). To remove the name field from forms in the Web Widget
(Classic), clear this check box. By default, this option is on when the
<strong class="ph b">Contact form</strong> toggle is turned on.</p>
</li>
<li class="li">
<p class="p"><strong class="ph b">Required—</strong>Makes the name field a required field that users must
complete before they can submit the default contact form through the Web
Widget (Classic). To make the name field a required field, select this check
box. Otherwise, the name field is labeled as <strong class="ph b">optional</strong>. By default, this
option is off when the <strong class="ph b">Contact form</strong> toggle is turned on.</p>
<p class="p"><img class="image img-screenshot" id="topic_ldx_wlc_vfb__image_irx_fdm_dhb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_ContactForm_NameOptional.png" width="200"></p>
</li>
</ul>
<p class="p">Keep in mind that if the <strong class="ph b">Ticket forms</strong> toggle is on, ticket forms replace
the default contact form in the Web Widget (Classic). Also note that the
<strong class="ph b">Contact form</strong> component isn't available when <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408883052442" target="_blank">authentication is required for the Requests and Uploads API
endpoints</a>.</p>
</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d51e207" style="vertical-align:top;">
<p class="p">Ticket forms</p>
</td>
<td class="entry cellrowborder" headers="d51e210" style="vertical-align:top;">
<div class="p">
<div class="note note">
<span class="notetitle">Note:</span> Multiple ticket forms are not available on all Support plans.</div>
</div>
<p class="p">To include multiple ticket forms in the Web Widget (Classic), turn the toggle on.
This option only appears if the Contact form toggle is turned on. </p>
<p class="p">This option enables the end user to select any of your active ticket forms,
instead of seeing only the default Web Widget Contact form, and allows you to
customize which ticket forms are available based on the page the user is on.</p>
<p class="p">If you need to set up ticket forms, click the <strong class="ph b">Settings</strong> link. For more
information, see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408834218522#topic_qxn_ppp_jz" target="_blank">Using custom ticket fields and ticket forms with
the Web Widget (Classic)</a>. </p>
</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d51e207" style="vertical-align:top;">
<p class="p">Custom ticket fields</p>
</td>
<td class="entry cellrowborder" headers="d51e210" style="vertical-align:top;">
<div class="p">
<div class="note note">
<span class="notetitle">Note:</span> Regular expression, Date, and Multi-select custom fields cannot be used in
the Web Widget (Classic).</div>
To select custom ticket fields that you want to
include in the Web Widget (Classic) contact form, use the drop-down list.</div>
<p class="p">This option only appears when you have enabled the contact form, <em class="ph i">and</em> have
at least one custom ticket field that is editable by end users. See <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408883152794#topic_ubz_ynk_xj" target="_blank">Adding a custom ticket field</a>.</p>
<p class="p">If you need to set up custom ticket fields, click the <strong class="ph b">Settings</strong> link. For
more information, see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408834218522" target="_blank">Using custom ticket fields and ticket forms with the Web
Widget</a>.</p>
</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d51e207" style="vertical-align:top;">
<p class="p" id="topic_ldx_wlc_vfb__enable_chat">Chat</p>
</td>
<td class="entry cellrowborder" headers="d51e210" style="vertical-align:top;">
<div class="note note">
<span class="notetitle">Note:</span> You must have a Chat account to add Chat functions to the Web Widget
(Classic). If you don't have a Chat account, turning this toggle on has no
effect.</div>
<p class="p">To include Chat features in the Web Widget (Classic), turn the <strong class="ph b">Chat</strong> toggle
on.</p>
<p class="p">You can click the <strong class="ph b">Settings</strong> 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 (Classic) (see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408825767962" target="_blank">Setting up Zendesk Chat in the Web Widget
(Classic)</a>).</p>
<p class="p">You cannot add third-party chat applications to the Web Widget (Classic).</p>
</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d51e207" style="vertical-align:top;">
<p class="p">Help Center</p>
</td>
<td class="entry cellrowborder" headers="d51e210" style="vertical-align:top;">
<div class="note note">
<span class="notetitle">Note:</span> You must have a Guide account to add help center search to the Web Widget
(Classic). If you don't have a Guide account, turning on this toggle has no
affect.</div>
<p class="p">To add help center search to the Web Widget (Classic), turn the toggle on. </p>
<p class="p">To configure help center search settings, click the <strong class="ph b">Settings</strong> link. Guide
will open and you'll configure settings from there.</p>
<p class="p">If help center search is enabled in the Web Widget (Classic), you can filter
metrics for article views and searches that originate from the Web Widget
(Classic). For more information, see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408818465562" target="_blank">Analyzing help center search results with Explore</a> and
<a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408830631962" target="_blank">Analyzing knowledge base activity with Explore</a>.</p>
<p class="p"><strong class="ph b">Including restricted articles in help center search results</strong></p>
<p class="p">If you want to include restricted help center content in your Web Widget
(Classic) results, you need to configure some other settings as well. For more
information about using help center search with the Web Widget (Classic), see
<a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408843923610" target="_blank">Using restricted help center content with the Web Widget (Classic)</a>.</p>
</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d51e207" style="vertical-align:top;">
<p class="p">Contextual Help</p>
</td>
<td class="entry cellrowborder" headers="d51e210" style="vertical-align:top;">
<p class="p">To include Contextual Help in the Web Widget (Classic), turn the toggle on. </p>
<p class="p">This option only appears when the Help Center toggle is turned on. </p>
<p class="p">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 (Classic). For more
information, see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408824357402" target="_blank">About contextual help for the Web Widget (Classic)</a>.</p>
</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d51e207" style="vertical-align:top;">
<p class="p">Security settings</p>
</td>
<td class="entry cellrowborder" headers="d51e210" style="vertical-align:top;">
<p class="p">To restrict help center search results in the Web Widget (Classic) to
authenticated users on your website, click the <strong class="ph b">Configure</strong> button and then
follow the on-screen instructions.</p>
</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d51e207" style="vertical-align:top;">
<p class="p">Talk</p>
</td>
<td class="entry cellrowborder" headers="d51e210" style="vertical-align:top;">
<p class="p">To include Talk in the Web Widget (Classic), turn the toggle on. </p>
<p class="p">To configure Talk settings, click the <strong class="ph b">Settings</strong> link. For more information,
see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408824310426" target="_blank">Configuring Zendesk Talk settings for the Web
Widget (Classic)</a>. </p>
</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d51e207" style="vertical-align:top;">
<p class="p">Zendesk logo</p>
</td>
<td class="entry cellrowborder" headers="d51e210" style="vertical-align:top;">
<p class="p">To remove the Zendesk logo in the Web Widget (Classic), turn the toggle off. </p>
</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d51e207" style="vertical-align:top;">
<p class="p">Theme color</p>
</td>
<td class="entry cellrowborder" headers="d51e210" style="vertical-align:top;">
<p class="p">To specify a custom color for the Web Widget (Classic), 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.</p>
</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d51e207" style="vertical-align:top;">
<p class="p">Theme text color</p>
</td>
<td class="entry cellrowborder" headers="d51e210" style="vertical-align:top;">
<p class="p">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.</p>
<p class="p"><img class="image img-screenshot" id="topic_ldx_wlc_vfb__image_rfq_nkm_kfb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_elements_1.png" width="275"></p>
<p class="p">If you select the <strong class="ph b">Use default color based on theme</strong> check box, the Web
Widget (Classic) 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 <a class="xref" href="https://www.w3.org/TR/WCAG20-TECHS/G18.html" target="_blank">WCAG guidelines</a>.</p>
</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d51e207" style="vertical-align:top;">
<p class="p">Position</p>
</td>
<td class="entry cellrowborder" headers="d51e210" style="vertical-align:top;">
<p class="p">To choose a position for the Web Widget (Classic), select a position from the
drop-down list. If you want the Web Widget (Classic) to appear in the bottom-right
corner of the page, choose <strong class="ph b">Right</strong>. If you want it to appear in the
lower-left corner, choose <strong class="ph b">Left</strong> instead.</p>
</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d51e207" style="vertical-align:top;">
<p class="p">Web Widget button text</p>
</td>
<td class="entry cellrowborder" headers="d51e210" style="vertical-align:top;">
<p class="p">To specify the text on the Web Widget (Classic) launcher, choose one of the
options from the drop-down list.</p>
</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d51e207" style="vertical-align:top;">
<p class="p">Contact form button text</p>
</td>
<td class="entry cellrowborder" headers="d51e210" style="vertical-align:top;">
<p class="p">To specify the text on the button that launches the contact form, choose one of
the options from the drop-down list.</p>
<br><img class="image img-screenshot" id="topic_ldx_wlc_vfb__image_dfh_dfd_vfb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_hc_messageButton_v2.png" width="250"><br>
</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d51e207" style="vertical-align:top;">Article Recommendations</td>
<td class="entry cellrowborder" headers="d51e210" style="vertical-align:top;">
<div class="note note">
<span class="notetitle">Note:</span> Article Recommendations is available on Zendesk Suite plans.</div>
To add
Article Recommendations to your Web Widget (Classic), turn the toggle on.<p class="p">This
option only appears when the Help Center toggle is turned on.</p>
<p class="p">For more
information, see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408843471642" target="_blank">Enabling Article Recommendations in the Web Widget
(Classic)</a>.</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script id="fast-path-script">
//<![CDATA[
const fast_path_style = document.createElement('style');
fast_path_style.innerHTML = `#article-body .fastpath{font-size:.9em;background-color:#f3f3f3;border:1px solid #d3d3d3;padding:10px 10px 8px;margin-bottom:16px}#article-body .fastpath::before{content:none!important}`;
document.head.appendChild(fast_path_style);
//]]>
</script>