Advanced customization of Web Widget (Classic)

<body>
<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">
<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">After an administrator <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408838063258" target="_blank">configures the components in Web Widget (Classic)</a> and works with
their developer to <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408821673242" target="_blank">add Web Widget (Classic) to their website</a>, they can
work with their developer to further customize the Web Widget (Classic), if desired. </p>
<p class="p">This article is an overview for administrators about what advanced customizations are
possible with the Web Widget (Classic). This article is meant to answer the question, "What
else can I do with my Web Widget (Classic)?" It explains the customization process for
administrators, and also points to developer documentation that web developers need in order
to do the work.</p>
<p class="p">If you’re a web developer (or an administrator who is comfortable doing website development
on your own) and are looking for complete documentation about the API settings and commands
described in this article, or additional code samples, see <a class="xref" href="https://developer.zendesk.com/api-reference/widget/introduction" target="_blank">the developer documentation for the Web Widget (Classic) API</a>
instead. </p>
<p class="p">This article discusses these topics and widget customizations:</p>
<div class="p">
<ul class="ul" id="topic_izk_4jp_mx__ul_mdk_lzp_mx">
<li class="li"><a class="xref" href="#topic_w1g_yhw_sfb">Planning for Web Widget (Classic)
customizations</a></li>
<li class="li"><a class="xref" href="#topic_sty_j2r_gq">Displaying the widget in a different
language</a></li>
<li class="li"><a class="xref" href="#topic_mnz_pr2_tfb">Prefill forms with user contact
information</a></li>
<li class="li"><a class="xref" href="#topic_yms_d5t_gx">Disabling ticket attachments</a></li>
<li class="li"><a class="xref" href="#topic_nzd_cbq_mx">Re-positioning the launcher</a></li>
<li class="li"><a class="xref" href="#topic_ozd_cbq_mx">Offsetting the widget placement</a></li>
<li class="li"><a class="xref" href="#topic_pzd_cbq_mx">Customizing the color of the widget
elements</a></li>
<li class="li"><a class="xref" href="#topic_ahz_bbq_mx">Changing visible ordering in the
widget</a></li>
<li class="li"><a class="xref" href="#topic_bhz_bbq_mx">Suppressing features on specific
pages</a></li>
<li class="li"><a class="xref" href="#topic_chz_bbq_mx">Customizing widget text</a></li>
<li class="li"><a class="xref" href="#topic_gzp_1bq_mx">Adding a subject line to the contact
form</a></li>
<li class="li"><a class="xref" href="#topic_a3z_1bq_mx">Hiding the "View Original Article"
button</a></li>
<li class="li"><a class="xref" href="#topic_usl_bbq_mx">Limiting search results</a></li>
<li class="li"><a class="xref" href="#topic_txs_qf1_l1b">Customizing the help center search
placeholder text</a></li>
<li class="li"><a class="xref" href="#topic_ffj_xsy_hdb">Advanced configuration of voice in the Web Widget (Classic)</a></li>
<li class="li"><a class="xref" href="#topic_ejs_hcd_tfb">Advanced configuration of Chat in the Web
Widget (Classic)</a></li>
<li class="li"><a class="xref" href="#topic_spt_fb1_l1b">Offering end users multiple contact
options</a></li>
<li class="li"><a class="xref" href="#topic_y4x_fvz_mx">Formatting code for multiple Web Widget
(Classic) elements</a></li>
</ul>
</div>
<p class="p">For information about adding the Web Widget (Classic) to your site, see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408836216218" target="_blank">Using Web
Widget (Classic) to embed customer service in your website</a>.</p>
<p class="p">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>
</div>
<div aria-labelledby="ariaid-title2" class="topic nested1" id="topic_w1g_yhw_sfb">
<h2 class="title topictitle2" id="ariaid-title2">Planning for Web Widget (Classic) customizations</h2>
<div class="body">
<p class="p">Most Support administrators aren’t web developers and work with someone else to implement
customizations to the Web Widget (Classic). They don’t customize the Web Widget (Classic)
and websites on their own. They work with a web developer at their company, or an outside
developer that they use on a contract basis to implement the changes.</p>
<p class="p">The web developer is the person who does the customization work, and they do it by adding
some code (the Web Widget (Classic) API) to the HTML of the website. However, the
administrator still has a role to play in the work. They need to understand what
customizations are possible for the Web Widget (Classic), and tell the web developer what
they want. </p>
<p class="p">Some administrators have experience with HTML and choose to do the customization work
themselves, acting as their own developer, and that's fine. Either way, customizing the Web
Widget (Classic) is actually a process for the administrator that requires some planning and
involves these steps:</p>
<ol class="ol" id="topic_w1g_yhw_sfb__ol_qt4_b3w_sfb">
<li class="li">Review the information in this article to understand what advanced customizations are
possible. </li>
<li class="li">Meet with key stakeholders at your company to create a list of requirements for your Web
Widget (Classic). What colors do want to use? How do you want the Web Widget (Classic) to
behave? </li>
<li class="li">Prepare a list of the customizations you want. Be as specific as possible and include
links to API documentation that your web developer can reference. </li>
<li class="li">Give the list to your web developer, who will customize the Web Widget (Classic) by
modifying the HTML of your website. </li>
</ol>
</div>
</div>
<div aria-labelledby="ariaid-title3" class="topic nested1" id="topic_sty_j2r_gq">
<h2 class="title topictitle2" id="ariaid-title3">Displaying the widget in a different language </h2>
<div class="body">
<p class="p">By default, the Web Widget (Classic) embedded in a website displays text in the end user’s
language, based on the language of their browser. For example, if the end user's browser
language is set to <strong class="ph b">de</strong> for German, the widget will appear in German for that user. If
the widget is embedded in a help center, it displays text based on the help center language
setting.</p>
<p class="p">The Web Widget (Classic) supports a subset of <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408821324826" target="_blank">Zendesk's supported languages</a>. If the end user's browser language
is not supported by the Web Widget (Classic), the widget defaults to English. If the widget
is unable to obtain the language from the end user’s browser, the widget defaults to the
language specified in Zendesk Support.</p>
<p class="p">You can customize the widget so that it always appears in a specific language using the
<a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/core#setlocale" target="_blank"><strong class="ph b">setLocale</strong></a> command. This command sets the
language for only the widget and doesn't override your host page’s language.</p>
<p class="p">For more information, see the developer documentation for the <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/core#setlocale" target="_blank"><strong class="ph b">setLocale</strong></a> command. </p>
</div>
</div>
<div aria-labelledby="ariaid-title4" class="topic nested1" id="topic_mnz_pr2_tfb">
<h2 class="title topictitle2" id="ariaid-title4">Prefill forms with user contact information</h2>
<div class="body">
<p class="p">You can save visitors to your site a few seconds and some annoyance or frustration by
prefilling their name, email address, and phone number into contact forms. This includes
ticket forms, pre-chat forms, and chat offline forms. Use the <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/core#identify" target="_blank"><strong class="ph b">identify</strong></a> and <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/core#prefill" target="_blank"><strong class="ph b">prefill</strong></a> settings. </p>
<p class="p">You can also set user information to be read-only using the <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/core#prefill" target="_blank"><strong class="ph b">prefill</strong></a> setting, which is nice because you can avoid having
duplicate user accounts in Support for the same person. </p>
<p class="p">For more information, see the developer documentation for the <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/core#identify" target="_blank"><strong class="ph b">identify</strong></a> and <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/core#prefill" target="_blank"><strong class="ph b">prefill</strong></a> settings. </p>
</div>
</div>
<div aria-labelledby="ariaid-title5" class="topic nested1" id="topic_yms_d5t_gx">
<h2 class="title topictitle2" id="ariaid-title5">Disabling ticket attachments</h2>
<div class="body">
<p class="p">If you have enabled attachments for your tickets, users can attach files to tickets
submitted from the Web Widget (Classic), by default. However, you can disable this option,
if needed. </p>
<p class="p">For more information, see the developer documentation for the <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#attachments" target="_blank"><strong class="ph b">attachments</strong></a> setting of the <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/contact_form" target="_blank"><strong class="ph b">contactForm</strong></a> object.</p>
</div>
</div>
<div aria-labelledby="ariaid-title6" class="topic nested1" id="topic_nzd_cbq_mx">
<h2 class="title topictitle2" id="ariaid-title6">Re-positioning the launcher</h2>
<div class="body">
<p class="p">The default position for the Web Widget (Classic) is the bottom-right of the browser; when
a user clicks on the Web Widget (Classic) launcher, it opens by expanding upward. </p>
<p class="p">You can select a location for the Web Widget (Classic) that varies from page to page
(placing it on the left or right side of the page, or moving it to the top of the page where
it expands downward when clicked). Use the <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#position" target="_blank"><strong class="ph b">position</strong></a> setting to position the Web Widget
(Classic) in the top-left, top-right, bottom-left, or bottom-right of the page.</p>
<p class="p">For more information, see the developer documentation about the <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#position" target="_blank"><strong class="ph b">position</strong></a> setting.</p>
</div>
</div>
<div aria-labelledby="ariaid-title7" class="topic nested1" id="topic_ozd_cbq_mx">
<h2 class="title topictitle2" id="ariaid-title7">Offsetting widget placement</h2>
<div class="body">
<p class="p">You can use the <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#offset" target="_blank"><strong class="ph b">offset</strong></a> setting to reposition the Web Widget (Classic) on
your desktop or mobile devices. Use the initial <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#position" target="_blank"><strong class="ph b">position</strong></a> setting as the point of reference,
and then use the <strong class="ph b"><a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#offset" target="_blank">offset</a></strong> setting to move the Web Widget
(Classic) horizontally, vertically, or both from that position (in pixels).</p>
<p class="p">For more information, see the developer documentation for the <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#offset" target="_blank"><strong class="ph b">offset</strong></a> setting.</p>
</div>
</div>
<div aria-labelledby="ariaid-title8" class="topic nested1" id="topic_pzd_cbq_mx">
<h2 class="title topictitle2" id="ariaid-title8">Customizing the color of the widget elements</h2>
<div class="body">
<p class="p">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 (see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408838063258" target="_blank">Configuring components in Web Widget (Classic)</a>). </p>
<p class="p">However, if you want to customize specific elements, you need to use the <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#color" target="_blank"><strong class="ph b">color</strong></a> setting. You can choose a unique color for each of
these Web Widget (Classic) components: </p>
<ul class="ul" id="topic_pzd_cbq_mx__ul_llz_14d_ycb">
<li class="li">Launcher</li>
<li class="li">Button</li>
<li class="li">Button text</li>
<li class="li">Results list</li>
<li class="li">Header</li>
<li class="li">Article links</li>
</ul>
<p class="p"><img class="image img-screenshot" id="topic_pzd_cbq_mx__image_mqy_342_ycb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_elements_1.png" width="275">
<img class="image img-screenshot" id="topic_pzd_cbq_mx__image_rht_k42_ycb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_elements_2.png" width="275"></p>
<p class="p">For accessibility purposes, the Web Widget (Classic) automatically adjusts colors 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>
<p class="p">For more information about customizing the color of Web Widget (Classic) elements, see the
developer documentation for the <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#color" target="_blank"><strong class="ph b">color</strong></a> setting.</p>
</div>
</div>
<div aria-labelledby="ariaid-title9" class="topic nested1" id="topic_ahz_bbq_mx">
<h2 class="title topictitle2" id="ariaid-title9">Changing visible ordering in the widget</h2>
<div class="body">
<p class="p">You can use the <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#zindex" target="_blank"><strong class="ph b">zIndex</strong></a> 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. </p>
<p class="p">For more information, see the developer documentation for the <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#zindex" target="_blank"><strong class="ph b">zIndex</strong></a> setting. </p>
</div>
</div>
<div aria-labelledby="ariaid-title10" class="topic nested1" id="topic_bhz_bbq_mx">
<h2 class="title topictitle2" id="ariaid-title10">Suppressing widget features on specific pages</h2>
<div class="body">
<p class="p">You can enable the contact form, chat, voice, and help center in the Web Widget (Classic)
and then use the <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#suppress" target="_blank"><strong class="ph b">suppress</strong></a> setting to change the features
offered on particular pages of your site to suit your needs. </p>
<div class="p">For example, you can use <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#suppress" target="_blank"><strong class="ph b">suppress</strong></a> to: <ul class="ul" id="topic_bhz_bbq_mx__ul_xvc_5bx_sfb">
<li class="li">Have help center deflection on some pages</li>
<li class="li">Have chat or the contact form without deflection on other pages</li>
<li class="li">Offer tiered service levels to signed in and identified users</li>
</ul>
</div>
<p class="p">For more information, see the developer documentation for the <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#suppress" target="_blank"><strong class="ph b">suppress</strong></a> setting.</p>
</div>
</div>
<div aria-labelledby="ariaid-title11" class="topic nested1" id="topic_chz_bbq_mx">
<h2 class="title topictitle2" id="ariaid-title11">Customizing widget text</h2>
<div class="body">
<p class="p">You can change the text of the Web Widget (Classic) components in the table below, and you
can also customize the <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408832257562#topic_txs_qf1_l1b" target="_blank">help center search placeholder text</a>.</p>
<div class="tablenoborder">
<table border="1" cellpadding="4" cellspacing="0" class="table" frame="border" id="topic_chz_bbq_mx__table_j3g_g2x_sfb" rules="all" summary="">
<colgroup>
<col style="width:50%">
<col style="width:50%">
</colgroup>
<thead class="thead" style="text-align:left;">
<tr class="row">
<th class="entry nocellnorowborder" id="d1493e541">Component</th>
<th class="entry cell-norowborder" id="d1493e544">Details</th>
</tr>
</thead>
<tbody class="tbody">
<tr class="row">
<td class="entry nocellnorowborder" headers="d1493e541">
<br><img class="image img-screenshot" id="topic_chz_bbq_mx__image_u4y_fn3_jfb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_launcher_chat_v2.png" width="100"><br>
</td>
<td class="entry cell-norowborder" headers="d1493e544">
<p class="p"><strong class="ph b">Object:</strong>
<a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/core#launcher-settings" target="_blank">launcher</a>
</p>
<p class="p"><strong class="ph b">Setting:</strong>
<a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#chatlabel" target="_blank">chatLabel</a>
</p>
<strong class="ph b">Description:</strong> Text on the launcher button when chat is enabled and help
center is not on<p class="p"><strong class="ph b">Default text:</strong>
<strong class="ph b">Chat</strong></p>
</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" headers="d1493e541">
<br><img class="image img-screenshot" id="topic_chz_bbq_mx__image_rmg_cn3_jfb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_launcher_help_question_v3.png" width="100"><br>
</td>
<td class="entry cell-norowborder" headers="d1493e544">
<p class="p"><strong class="ph b">Object:</strong>
<a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/core#launcher-settings" target="_blank">launcher</a>
</p>
<p class="p"><strong class="ph b">Setting:</strong>
<a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#label" target="_blank">label</a></p>
<p class="p">
<strong class="ph b">Description:</strong> Text on the launcher button</p>
<p class="p"><strong class="ph b">Default text:</strong>
<strong class="ph b">Help</strong>, <strong class="ph b">Support</strong> or <strong class="ph b">Feedback</strong>, defined on the Web Widget
(Classic) Admin page</p>
</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" headers="d1493e541">
<br><img class="image img-screenshot" id="topic_chz_bbq_mx__image_gly_jty_mx" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_hc_title_v2.png" width="250"><br>
</td>
<td class="entry cell-norowborder" headers="d1493e544">
<p class="p"><strong class="ph b">Object:</strong>
<a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/help_center" target="_blank">helpCenter</a>
</p>
<p class="p"><strong class="ph b">Setting:</strong>
<a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#title" target="_blank">title</a></p>
<p class="p"><strong class="ph b">Description:</strong> The title of the help center page</p>
<p class="p"><strong class="ph b">Default text:</strong>
<strong class="ph b">Help</strong></p>
</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" headers="d1493e541">
<br><img class="image img-screenshot" id="topic_chz_bbq_mx__image_ync_25d_tfb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_contactForm_title_v3.png" width="250"><br>
</td>
<td class="entry cell-norowborder" headers="d1493e544">
<p class="p"><strong class="ph b">Object:</strong>
<a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/contact_form" target="_blank">contactForm</a></p>
<p class="p">
<strong class="ph b">Setting:</strong>
<a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#title" target="_blank">title</a></p>
<strong class="ph b">Description:</strong> Title of the contact form <p class="p"><strong class="ph b">Default text:</strong>
<strong class="ph b">Leave us a message</strong> or <strong class="ph b">Contact us</strong> defined on the Web Widget (Classic)
Admin page</p>
</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" headers="d1493e541">
<br><img class="image img-screenshot" id="topic_chz_bbq_mx__image_qlx_kty_mx" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_hc_messageButton_v2.png" width="250"><br>
</td>
<td class="entry cell-norowborder" headers="d1493e544">
<p class="p"><strong class="ph b">Object:</strong>
<a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/help_center" target="_blank">helpCenter</a></p>
<p class="p"><strong class="ph b">Setting:</strong>
<a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#messagebutton" target="_blank">messageButton</a></p>
<p class="p"><strong class="ph b">Description:</strong>
Text on the button in the help center form that loads the Contact form (~20
character limit)</p>
<strong class="ph b">Default text:</strong>
<strong class="ph b">Leave us a message</strong> or <strong class="ph b">Contact us</strong> defined on the Web Widget (Classic)
Admin page</td>
</tr>
<tr class="row">
<td class="entry row-nocellborder" headers="d1493e541">
<br><img class="image img-screenshot" id="topic_chz_bbq_mx__image_vqq_lty_mx" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_hc_chatButton_v2.png" width="250"><br>
</td>
<td class="entry cellrowborder" headers="d1493e544">
<p class="p"><strong class="ph b">Object:</strong>
<a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/help_center" target="_blank">helpCenter</a>
</p>
<p class="p"><strong class="ph b">Setting:</strong>
<a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#chatbutton" target="_blank">chatButton</a></p>
<strong class="ph b">Description:</strong> Text on the button shown in the help center form that loads the
chat (~20 character limit) <p class="p"><strong class="ph b">Default text:</strong>
<strong class="ph b">Help</strong>, <strong class="ph b">Support</strong>, or <strong class="ph b">Feedback</strong> defined on the Web Widget
(Classic) Admin page</p>
</td>
</tr>
</tbody>
</table>
</div>
<p class="p">You use the <strong class="ph b">translations</strong> object 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. </p>
<div class="p">
<div class="note note">
<span class="notetitle">Note:</span> If you specify the wildcard character (*) for the locale name, the string is applied
to all locales.</div>
</div>
<p class="p">You can explore a list of potential language codes in <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408821324826" target="_blank">Language
codes for Zendesk supported languages</a>. </p>
<p class="p">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, see <a class="xref" href="#topic_sty_j2r_gq">Displaying your widget in a different language</a>. </p>
</div>
</div>
<div aria-labelledby="ariaid-title12" class="topic nested1" id="topic_gzp_1bq_mx">
<h2 class="title topictitle2" id="ariaid-title12">Adding a subject line to the contact form</h2>
<div class="body">
<p class="p">With the <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#subject" target="_blank"><strong class="ph b">subject</strong></a> setting on the <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/contact_form" target="_blank"><strong class="ph b">contactForm</strong></a> object, you can set the Web Widget (Classic) to
include a subject field in the default contact form.</p>
<p class="p">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.</p>
<p class="p">For more information, see the developer documentation for the <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#subject" target="_blank"><strong class="ph b">subject</strong></a> setting on the <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/contact_form" target="_blank"><strong class="ph b">contactForm</strong></a> object. </p>
</div>
</div>
<div aria-labelledby="ariaid-title13" class="topic nested1" id="topic_a3z_1bq_mx">
<h2 class="title topictitle2" id="ariaid-title13">Hiding the "View Original Article" button</h2>
<div class="body">
<p class="p">The <strong class="ph b">View Original Article</strong> 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
<strong class="ph b">helpCenter</strong> object, and setting the <strong class="ph b">originalArticleButton</strong> property to
<strong class="ph b">false</strong>.</p>
<p class="p">For more information, see the developer documentation for the <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#originalarticlebutton" target="_blank"><strong class="ph b">originalArticleButton</strong></a> setting for the <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/help_center" target="_blank"><strong class="ph b">helpCenter</strong></a> object.</p>
</div>
</div>
<div aria-labelledby="ariaid-title14" class="topic nested1" id="topic_usl_bbq_mx">
<h2 class="title topictitle2" id="ariaid-title14">Limiting search results</h2>
<div class="body">
<p class="p">With the <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#filter" target="_blank"><strong class="ph b">filter</strong></a> setting on the <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/help_center" target="_blank"><strong class="ph b">helpCenter</strong></a> 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 <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#filter" target="_blank"><strong class="ph b">filter</strong></a> setting. </p>
<p class="p">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. </p>
<div class="note note">
<span class="notetitle">Note:</span> To specify multiple sections, categories, or labels, use a comma to separate the values
(spaces are not required before or after).</div>
<p class="p">To limit search to a specific section:</p>
<pre class="pre codeblock"><code>&lt;script type="text/JavaScript"&gt;
window.zESettings = {
webWidget: {
helpCenter: {
filter: {
section: '200154474-Announcements'
}
}
}
};
&lt;/script&gt;</code></pre>
<p class="p">To limit search to a specific category: </p>
<pre class="pre codeblock"><code>&lt;script type="text/JavaScript"&gt;
window.zESettings = {
webWidget: {
helpCenter: {
filter: {
category: '200053794-General'
}
}
}
};
&lt;/script&gt;</code></pre>
<p class="p">To limit search to content in multiple categories: </p>
<pre class="pre codeblock"><code>&lt;script type="text/JavaScript"&gt;
window.zESettings = {
webWidget: {
helpCenter: {
filter: {
category: '115000669485,201742209'
}
}
}
};
&lt;/script&gt;</code></pre>
<p class="p">To limit search to content with a specific label: </p>
<pre class="pre codeblock"><code>&lt;script type="text/JavaScript"&gt;
window.zESettings = {
webWidget: {
helpCenter: {
filter: {
label_names: 'orders'
}
}
}
};
&lt;/script&gt;</code></pre>
<p class="p">To limit search to content in a specific category and with specific labels: </p>
<pre class="pre codeblock"><code>&lt;script type="text/JavaScript"&gt;
window.zESettings = {
webWidget: {
helpCenter: {
filter: {
category: '200053794-General',
label_names: 'Label One,Label Two,Label Three'
}
}
}
};
&lt;/script&gt;</code></pre>
</div>
</div>
<div aria-labelledby="ariaid-title15" class="topic nested1" id="topic_txs_qf1_l1b">
<h2 class="title topictitle2" id="ariaid-title15">Customizing the help center search placeholder text</h2>
<div class="body">
<p class="p">The default placeholder text in the help center search box is <strong class="ph b">How can we help?</strong> 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
<a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#searchplaceholder" target="_blank"><strong class="ph b">searchPlaceholder</strong></a> setting.</p>
<br><img class="image img-screenshot" id="topic_txs_qf1_l1b__image_otx_hxd_tfb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/custom_search_placeholder.png" width="250"><br>
<p class="p">If <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408838063258" target="_blank">Contextual Help is enabled</a>, you can also configure the Web Widget
(Classic) to open to recommended articles, making it easier for your customers to <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408836216218" target="_blank">self-serve</a>. For more information, see the developer
documentation for the <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/help_center#helpcenter-setsuggestions" target="_blank"><strong class="ph b">setSuggestions</strong></a> command for the <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/help_center" target="_blank"><strong class="ph b">helpCenter</strong></a> object.</p>
</div>
</div>
<div aria-labelledby="ariaid-title16" class="topic nested1" id="topic_ffj_xsy_hdb">
<h2 class="title topictitle2" id="ariaid-title16">Advanced configuration of voice in the Web Widget (Classic)</h2>
<div class="body">
<p class="p">You can create multiple configurations that define how the voice channel behaves in the Web
Widget (Classic). With each configuration you can customize call routing and display options
in the Web Widget (Classic), based on your needs and preferences. </p>
<div class="p">The key attributes that you can customize in each configuration are:<ul class="ul" id="topic_ffj_xsy_hdb__ul_dfl_f5y_hdb">
<li class="li">
<p class="p">The agent group that you want Web Widget (Classic) callback requests to be routed
to</p>
</li>
<li class="li">
<p class="p">The priority of Web Widget (Classic) callback requests</p>
</li>
<li class="li">
<p class="p">Display Request a callback, Call us, or both of these options in the Web Widget
(Classic)</p>
</li>
<li class="li">
<p class="p">Display an estimated wait time in the Web Widget (Classic)</p>
</li>
</ul>
</div>
<p class="p">If you have only created a single configuration for voice in the Web Widget (Classic), this
will automatically be the default configuration that displays in the Web Widget (Classic)
whenever voice is available. </p>
<p class="p">If you have created multiple configurations for voice in the Web Widget (Classic), you can
use the nickname setting to target the desired configuration. </p>
<div class="note note">
<span class="notetitle">Note:</span> The nickname in the configuration settings API request must match the nickname of your
configuration exactly, including any spaces and capitalization.</div>
<p class="p">For more information, see the developer documentation for the <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/talk" target="_blank"><strong class="ph b">talk</strong></a> object, the <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#nickname" target="_blank"><strong class="ph b">nickname</strong></a> setting, and <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408824310426" target="_blank">Configuring voice options in Web Widget (Classic)</a>.</p>
</div>
</div>
<div aria-labelledby="ariaid-title17" class="topic nested1" id="topic_ejs_hcd_tfb">
<h2 class="title topictitle2" id="ariaid-title17">Advanced configuration of chat in the Web Widget (Classic)</h2>
<div class="body">
<p class="p">If you are using the <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408825767962" target="_blank">live chat in the Web Widget (Classic)</a>, you can offer 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. </p>
<p class="p">For more information, see the developer documentation for the <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/chat" target="_blank"><strong class="ph b">chat</strong></a> object.</p>
<div class="p">With the integrated web and chat widget experience, you can further customize the <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/chat" target="_blank"><strong class="ph b">chat</strong></a> object with these settings:<ul class="ul" id="topic_ejs_hcd_tfb__ul_n4f_kcd_tfb">
<li class="li" dir="ltr"><a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#title" target="_blank">title</a></li>
<li class="li" dir="ltr"><a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#concierge" target="_blank">concierge</a></li>
<li class="li" dir="ltr"><a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#departments" target="_blank">departments</a></li>
<li class="li" dir="ltr"><a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#prechatForm" target="_blank">prechatForm</a></li>
<li class="li" dir="ltr"><a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#offlineForm" target="_blank">offlineForm</a></li>
<li class="li" dir="ltr"><a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#notifications" target="_blank">notifications</a></li>
<li class="li" dir="ltr">
<a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/chat#chataddtags" target="_blank">tags</a>
</li>
<li class="li" dir="ltr"><a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#authenticate" target="_blank">authenticate</a></li>
</ul>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title18" class="topic nested1" id="topic_spt_fb1_l1b">
<h2 class="title topictitle2" id="ariaid-title18">Offering end users multiple contact options</h2>
<div class="body">
<p class="p">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 voice 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. </p>
<p class="p">Here's a list of the default text: </p>
<div class="tablenoborder">
<table border="1" cellpadding="4" cellspacing="0" class="table" frame="border" id="topic_spt_fb1_l1b__table_mkt_vcd_tfb" rules="all" summary="">
<colgroup>
<col style="width:38.46153846153847%">
<col style="width:61.53846153846154%">
</colgroup>
<thead class="thead" style="text-align:left;">
<tr class="row">
<th class="entry cellrowborder" id="d1493e1187">Contact option</th>
<th class="entry cellrowborder" id="d1493e1190">Default text</th>
</tr>
</thead>
<tbody class="tbody">
<tr class="row">
<td class="entry cellrowborder" headers="d1493e1187"><a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#contactbutton" target="_blank">Contact button</a></td>
<td class="entry cellrowborder" headers="d1493e1190">Contact us</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d1493e1187"><a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#chatlabelonline" target="_blank">Chat label (with agent online)</a></td>
<td class="entry cellrowborder" headers="d1493e1190">Live chat</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d1493e1187"><a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#chatlabeloffline" target="_blank">Chat label (with agent offline</a></td>
<td class="entry cellrowborder" headers="d1493e1190">Chat is unavailable</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d1493e1187"><a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/settings#contactformlabel" target="_blank">Contact form label</a></td>
<td class="entry cellrowborder" headers="d1493e1190">Leave us a message</td>
</tr>
</tbody>
</table>
</div>
<p class="p">For more information, see the developer documentation for the <a class="xref" href="https://developer.zendesk.com/embeddables/docs/widget/core#contact-options-settings" target="_blank"><strong class="ph b">contactOptions</strong></a> setting. </p>
<p class="p"><strong class="ph b">Offering contact options for chat </strong></p>
<p class="p">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. </p>
<p class="p">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. </p>
<p class="p"><strong class="ph b">Offering contact options for voice</strong></p>
<p class="p">If voice and other contact options are enabled in the Web Widget (Classic), and agents are
online, contact options are automatically enabled. </p>
</div>
</div>
<div aria-labelledby="ariaid-title19" class="topic nested1" id="topic_y4x_fvz_mx">
<h2 class="title topictitle2" id="ariaid-title19">Formatting code for multiple widget components</h2>
<div class="body">
<div class="note note">
<span class="notetitle">Note:</span> This section is provided for instructional purposes only. Zendesk does not support or
guarantee the code. Zendesk also can't provide support for third-party technologies such as
JavaScript, jQuery, or CSS. Please post any issues you have in the comments section or try
searching for a solution online.</div>
<p class="p">Items that are specific to the contact form, help center, and chat are nested under those
headings (contactForm, helpCenter and chat) in the HTML of your site, while global items are
included separately. </p>
<div class="p">For example, these customizations are defined below: <ul class="ul" id="topic_y4x_fvz_mx__ul_f25_xkx_sfb">
<li class="li">The position of the Web Widget (Classic) on the screen has been changed using the
offset setting. Offset is a global item, which is why it has its own entry. </li>
<li class="li">Help center search—doesn’t include the View Original Article button. The title “Search
for help” for English-language users, and “Have your say” for all other languages. </li>
<li class="li">Chat is disabled. </li>
<li class="li">The contact form title is “Message us” in English and “Contact us” in other languages. </li>
<li class="li">The launcher button text is “Make a request” in English and “Get help” in other
languages. </li>
</ul>
</div>
<pre class="pre codeblock"><code>&lt;script type="text/JavaScript"&gt;
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'
}
}
}
};
&lt;/script&gt;</code></pre>
</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>
</body>