Using Web Widget (Classic) to embed customer service in your website

<body>
<p id="docs-hc-snippet" style="display: none;">In this article, we’ll introduce you to Web Widget (Classic), Zendesk’s legacy embeddable customer support interface. Web Widget (Classic) allows you to add contact options – help center, contact form, voice, and chat – to your website or help center, so that your customers can get immediate help from a single interface, in whatever form they like best. including:</p>
<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 attention">
<span class="attentiontitle"></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/4409103246874" target="_blank">Creating a messaging Web Widget</a>.</div>
<p class="p">In this article, we’ll introduce you to Web Widget (Classic), Zendesk’s legacy embeddable
customer support interface. Web Widget (Classic) allows you to add contact options – help
center, contact form, voice, and chat – to your website or help center, so that your customers
can get immediate help from a single interface, in whatever form they like best.
including:</p>
<ul class="ul" id="topic-1__ul_dht_fwp_dq">
<li class="li">Search help center articles for immediate self-service.</li>
<li class="li">Submit a support request using a contact form.</li>
<li class="li">Request a callback, or view a phone number that they can call instead. </li>
<li class="li">Start a live chat with an agent.</li>
</ul>
<div class="p">This article includes these sections:<ul class="ul" id="topic-1__ul_1dc_2l3_bq">
<li class="li"><a class="xref" href="#topic-1">About Web Widget (Classic)</a></li>
<li class="li">
<a class="xref" href="#topic_bkd_qgd_bq">Understanding the end-user
experience</a><ul class="ul" id="topic-1__ul_pww_drg_wfb">
<li class="li"><a class="xref" href="#topic_tyk_qv2_wfb">Self service</a></li>
<li class="li"><a class="xref" href="#topic_flv_qv2_wfb">Live chat</a></li>
<li class="li"><a class="xref" href="#topic_ojq_rv2_wfb">Phone calls</a></li>
<li class="li"><a class="xref" href="#topic_yj3_sv2_wfb">Contact forms</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div aria-labelledby="ariaid-title2" class="topic nested1" id="topic_wh3_xfj_my">
<h2 class="title topictitle2" id="ariaid-title2">About Web Widget (Classic)</h2>
<div class="body">
<p class="p">Web Widget (Classic) is a separate web application that you embed in a web page that gives
customers access your help center and the agents in your other Zendesk support channels. It
can encourage customers to self-serve, whenever possible, by using help center articles. It
can also make it easier to get help from an agent by reducing the number of steps required
to access a contact form, request a call back, and start a chat. </p>
<p class="p">All of these things can be done from a single interface. The customer doesn't need to go
from your home page to your help center, open their email application, or search your
website to find a email address to contact you.</p>
<p class="p">You can add the Web Widget (Classic) to your website or help center. It appears in the
bottom corner by default.</p>
<p class="p"><img class="image img-screenshot" id="topic_wh3_xfj_my__image_kcx_glg_wfb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/new_widget_cph_v3.png"></p>
<p class="p">You must be an administrator to set up and manage the Web Widget (Classic). </p>
<p class="p">The first thing you need to do is configure the components you want in the widget (see
<a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408838063258" target="_blank">Configuring the Components in your Web Widget (Classic)</a>), and then
you can add the widget code your website or help center (see <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>).</p>
<p class="p">For a complete list of documentation about the Web Widget (Classic), see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408833907354" target="_blank">Web Widget (Classic) resources</a>.</p>
</div>
</div>
<div aria-labelledby="ariaid-title3" class="topic nested1" id="topic_bkd_qgd_bq">
<h2 class="title topictitle2" id="ariaid-title3">Understanding the end-user experience</h2>
<div class="body">
<p class="p">In Web Widget (Classic), you can enable components to combine knowledge base search, live
chat, phone calls, and contact forms. The end user experience depends on what options are
enabled and whether agents are online.</p>
<p class="p">When multiple components are enabled in the Web Widget (Classic), components are presented
to end users in a specific sequence, at different times, rather than all at once. </p>
<p class="p">Components are presented in this order:</p>
<ol class="ol" id="topic_bkd_qgd_bq__ol_b2b_bx2_wfb">
<li class="li"><a class="xref" href="#topic_tyk_qv2_wfb">Self service</a></li>
<li class="li"><a class="xref" href="#topic_flv_qv2_wfb">Live chat</a></li>
<li class="li"><a class="xref" href="#topic_ojq_rv2_wfb">Phone calls</a></li>
<li class="li"><a class="xref" href="#topic_yj3_sv2_wfb">Contact forms</a></li>
</ol>
<p class="p">For more information about how visitors can use these components, keep reading.</p>
</div>
</div>
<div aria-labelledby="ariaid-title4" class="topic nested1" id="topic_tyk_qv2_wfb">
<h2 class="title topictitle2" id="ariaid-title4">Self service</h2>
<div class="body">
<p class="p">If the help center is enabled in the Web Widget (Classic), customers are presented with
help center search first. When the Web Widget (Classic) opens, it includes both self-service
and the contact button.</p>
<p class="p"><img class="image img-screenshot" id="topic_tyk_qv2_wfb__image_wlp_php_1w" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_contextual_help.png" width="200"></p>
<p class="p">When you search, up to nine results appear, if matches are found. The customer can click an
article in the list and it opens in Web Widget (Classic).</p>
<p class="p">If Contextual Help is enabled in Web Widget (Classic), up to three suggested articles
appear below the search box. The suggested articles are determined by the page URL from
which the customer accessed the Web Widget (Classic), or it is chosen by the administrator
using advanced customizations (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>
</div>
</div>
<div aria-labelledby="ariaid-title5" class="topic nested1" id="topic_flv_qv2_wfb">
<h2 class="title topictitle2" id="ariaid-title5">Live chat</h2>
<div class="body">
<p class="p">This is an overview about how live chat works in Web Widget (Classic) from a visitor’s
perspective. It’s meant to give administrators and agents a general idea about how it works,
but it doesn’t cover all scenarios—the exact appearance and behavior of live chat in Web
Widget (Classic) depends on how it was configured by the administrator. </p>
<p class="p">Visitors to your website can use live chat functions in Web Widget (Classic) from a desktop
or mobile browser (see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408834237338" target="_blank">Customizing the Chat widget for mobile devices</a>).</p>
<p class="p">Your visitors can perform these chat-related activities from the Web Widget (Classic):</p>
<ul class="ul" id="topic_flv_qv2_wfb__ul_oph_kdf_wfb">
<li class="li"><a class="xref" href="#topic_u2p_b2f_wfb">Starting chats from Web Widget (Classic) launcher</a></li>
<li class="li"><a class="xref" href="#topic_gjl_cpf_wfb">Receive proactive chats</a></li>
<li class="li"><a class="xref" href="#topic_st4_1pf_wfb">View conversation history</a></li>
<li class="li"><a class="xref" href="#topic_nnq_2pf_wfb">Customize the avatar, name, and byline of
the chat Concierge section</a></li>
<li class="li"><a class="xref" href="#topic_s11_b2f_wfb">Send and receive attachments with
chats</a></li>
<li class="li"><a class="xref" href="#topic_r3b_12f_wfb">Adjust sound, request transcripts, edit
contact details, and end chats</a></li>
<li class="li"><a class="xref" href="#topic_otg_zdf_wfb">Translate chats</a></li>
<li class="li"><a class="xref" href="#topic_yxm_pdf_wfb">End and rate chats</a></li>
<li class="li"><a class="xref" href="#topic_dwz_hn5_dgb">Popping out Web Widget (Classic) during chats</a></li>
</ul>
<p class="p">For more information, see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408825767962" target="_blank">Setting up Zendesk Chat in Web Widget (Classic)</a>.</p>
</div>
<div aria-labelledby="ariaid-title6" class="topic nested2" id="topic_u2p_b2f_wfb">
<h3 class="title topictitle3" id="ariaid-title6">Starting chats from Web Widget (Classic) launcher</h3>
<div class="body">
<p class="p">When live chat is enabled in Web Widget (Classic), the appearance of the launcher to end
users depends on which other contact options are enabled.</p>
<div class="p">
<div class="tablenoborder">
<table border="1" cellpadding="4" cellspacing="0" class="table" frame="border" id="topic_u2p_b2f_wfb__table_ktf_q1x_sjb" rules="all" summary="">
<colgroup>
<col style="width:31.446540880503143%">
<col style="width:68.55345911949686%">
</colgroup>
<tbody class="tbody">
<tr class="row">
<td class="entry cellrowborder"><strong class="ph b">Launcher appearance</strong></td>
<td class="entry cellrowborder"><strong class="ph b">Contact options and agent availability</strong></td>
</tr>
<tr class="row">
<td class="entry cellrowborder"><img class="image img-screenshot" id="topic_u2p_b2f_wfb__image_atw_nwh_jdb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_launcher_chat.png" width="100"></td>
<td class="entry cellrowborder">If live chat is the only contact option enabled in Web Widget (Classic) and
a Chat agent is online, the launcher includes the Chat icon and says
<strong class="ph b">Chat</strong>.</td>
</tr>
<tr class="row">
<td class="entry cellrowborder"><img class="image img-screenshot" id="topic_u2p_b2f_wfb__image_r1b_swh_jdb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_launcher_help.png" width="100"></td>
<td class="entry cellrowborder">If live chat and the help center are enabled, when a chat agent is online,
the launcher includes the Chat icon and says <strong class="ph b">Help</strong>. </td>
</tr>
<tr class="row">
<td class="entry cellrowborder"><img class="image img-screenshot" id="topic_u2p_b2f_wfb__image_sfv_fcx_sjb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/chat_badge-ex.png" width="200"></td>
<td class="entry cellrowborder">
<p class="p">The chat badge is a special launcher that allows a customer to get support
from a chat agent immediately.</p>
<p class="p">If the chat badge is enabled, chat is the only contact option enabled in the
Web Widget (Classic), and a Chat agent is online, the chat badge appears on
the page instead of the regular Web Widget (Classic) launcher.</p>
</td>
</tr>
<tr class="row">
<td class="entry cellrowborder"> </td>
<td class="entry cellrowborder">If Chat is the only contact option enabled and no agents are online, the
launcher does not display. </td>
</tr>
</tbody>
</table>
</div>
</div>
<p class="p" dir="ltr">Once the customer opens Web Widget (Classic), they see this: </p>
<p class="p"><img class="image img-screenshot" id="topic_u2p_b2f_wfb__image_lxm_j5z_f2b" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_hc_chat_v2.png" width="250"></p>
<p class="p">When the customer clicks <strong class="ph b">Live chat</strong>, what they see next depends on whether the
pre-chat form is enabled.</p>
<div class="p">
<div class="tablenoborder">
<table border="1" cellpadding="4" cellspacing="0" class="table" frame="border" id="topic_u2p_b2f_wfb__table_itm_cbx_sjb" rules="all" summary="">
<colgroup>
<col style="width:50%">
<col style="width:50%">
</colgroup>
<tbody class="tbody">
<tr class="row">
<td class="entry cellrowborder">
<img class="image img-screenshot" id="topic_u2p_b2f_wfb__image_ops_25z_f2b" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_prechat_v2.png" width="250"><p class="p">If the pre-chat form is enabled, the
customer fills in the form, then clicks <strong class="ph b">Start Chat</strong></p>
</td>
<td class="entry cellrowborder">
<img class="image img-screenshot" id="topic_u2p_b2f_wfb__image_tp3_c5z_f2b" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_chat_started_v2.png" width="250"><p class="p">If the pre-chat form is <em class="ph i">not</em>
enabled, the customer can start the chat right away.</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p class="p">
</p>
<p class="p">If an agent is available when the customer clicks the launcher, but the then agent signs
off before the chat begin, the customer sees a message indicating that the Chat agent is
not available.</p>
<p class="p">
</p>
</div>
</div>
<div aria-labelledby="ariaid-title7" class="topic nested2" id="topic_gjl_cpf_wfb">
<h3 class="title topictitle3" id="ariaid-title7">Receiving proactive chats</h3>
<div class="body">
<p class="p">Agents can see who is the currently on your site and decide whether to proactively
contact a visitor before they request a chat. For example, you might want to reach out to
visitors who have items their shopping cart, but are taking too long to complete their
purchases. For more information, see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408821265178" target="_blank">Browsing your site's visitors</a>, <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408824240026-Using-Zendesk-Chat" target="_blank">Using Zendesk Chat</a>, and <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408883473178" target="_blank">Targeting key visitors with proactive chat</a>.</p>
</div>
</div>
<div aria-labelledby="ariaid-title8" class="topic nested2" id="topic_st4_1pf_wfb">
<h3 class="title topictitle3" id="ariaid-title8">Viewing conversation history</h3>
<div class="body">
<p class="p">If visitor authentication is enabled in the Web Widget (Classic), authenticated visitors
can see their past chats. For more information about visitor authentication, see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408838925082" target="_blank">Enabling authenticated visitors in the Web Widget (Classic)</a> and
<a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408821977114" target="_blank">Conversation history in Web Widget (Classic) for authenticated
visitors</a>.</p>
<p class="p"><img class="image img-screenshot" id="topic_st4_1pf_wfb__image_k55_tfg_wfb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/chat_history_ex.png"></p>
</div>
</div>
<div aria-labelledby="ariaid-title9" class="topic nested2" id="topic_nnq_2pf_wfb">
<h3 class="title topictitle3" id="ariaid-title9">Customize the avatar, name, and byline of the chat Concierge section</h3>
<div class="body">
<p class="p">Before visitors connect with a support agent, they see the avatar, name, and byline of
the chat Concierge. For more information, see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408828059546#topic_zxl_qll_4fb" target="_blank">Customizing the Chat widget concierge</a>.</p>
</div>
</div>
<div aria-labelledby="ariaid-title10" class="topic nested2" id="topic_s11_b2f_wfb">
<h3 class="title topictitle3" id="ariaid-title10">Sending and receiving attachments with chats</h3>
<div class="body">
<p class="p">Visitors can send and receive attachments. Clicking the attachments icon (<img class="image" id="topic_s11_b2f_wfb__image_py3_ybf_wfb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_chat_attach_file.png">) opens a standard file selection dialog box, but you can also drag and drop files into
the Web Widget too. For more information about attachments, see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408886202394" target="_blank">Managing file sending options</a>. </p>
</div>
</div>
<div aria-labelledby="ariaid-title11" class="topic nested2" id="topic_r3b_12f_wfb">
<h3 class="title topictitle3" id="ariaid-title11">Adjusting sound, requesting transcripts, editing contact details, and ending chats</h3>
<div class="body">
<p class="p">Visitors can use the expandable menu at the bottom (<img class="image" id="topic_r3b_12f_wfb__image_fpt_kbf_wfb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_chat_expand_menu.png">) to turn sounds on and off, request a transcript of the chat,
edit their contact details, or end the chat. For more information about transcripts, see
<a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408883226650" target="_blank">Automatically send chat transcripts with email piping</a>. For more
information about editing contact details, see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408887640730" target="_blank">Editing Visitor Profile settings</a>. </p>
<p class="p"><img class="image img-screenshot" id="topic_r3b_12f_wfb__image_irz_jbf_wfb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_chat_expand_menu_open.png" width="250"></p>
</div>
</div>
<div aria-labelledby="ariaid-title12" class="topic nested2" id="topic_otg_zdf_wfb">
<h3 class="title topictitle3" id="ariaid-title12">Translating chats</h3>
<div class="body">
<p class="p">If Chat detects that the agent and visitor are using different languages, the <strong class="ph b">Show
translated</strong> link appears in the conversation. Visitors can click this link to
translate the agent’s replies into their language. The translation is performed by <a class="xref" href="https://translate.google.com/" target="_blank">Google
Translate</a>. </p>
<p class="p"><img class="image img-screenshot" id="topic_otg_zdf_wfb__image_qkr_w1f_wfb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_chat_translate.png" width="250"></p>
</div>
</div>
<div aria-labelledby="ariaid-title13" class="topic nested2" id="topic_yxm_pdf_wfb">
<h3 class="title topictitle3" id="ariaid-title13">Ending and rating chats</h3>
<div class="body">
<p class="p">When the visitor is ready, they can end the chat by clicking the end chat (<img class="image" id="topic_yxm_pdf_wfb__image_lzc_2z2_wfb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_chat_end.png">) icon. They can also end the chat from the expandable menu
(<img class="image" id="topic_yxm_pdf_wfb__image_oqp_rz2_wfb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_chat_expand_menu.png">). </p>
<p class="p">Visitors can rate a chat as good or bad using the thumbs up (<img class="image" id="topic_yxm_pdf_wfb__image_tvw_lz2_wfb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_chat_rate_good.png">) and thumbs down (<img class="image" id="topic_yxm_pdf_wfb__image_ubv_mz2_wfb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_chat_rate_good.png">) icons at any time during the chat. After they rate the chat, the <strong class="ph b">Leave a comment
button</strong> appears, so they can add a comment, if desired. </p>
<p class="p"><img class="image img-screenshot" id="topic_yxm_pdf_wfb__image_smt_nz2_wfb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_chat_rate_v3.png" width="250"></p>
<p class="p">If the visitor doesn’t rate the chat after a little while, the agent can prompt the
visitor to rate the chat by making the <strong class="ph b">Rate this chat button</strong> appear. </p>
<p class="p">For more information about chat ratings, see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408883190682" target="_blank">Measuring visitor satisfaction with chat rating</a>. </p>
</div>
</div>
<div aria-labelledby="ariaid-title14" class="topic nested2" id="topic_dwz_hn5_dgb">
<h3 class="title topictitle3" id="ariaid-title14">Popping out Web Widget (Classic) during chats</h3>
<div class="body">
<p class="p">WhenChat is enabled in the Web Widget (Classic), visitors can click the pop-out icon
(<img class="image" id="topic_dwz_hn5_dgb__image_anf_1cv_dgb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_popout_icon_v2.png" width="15">) to pop-out the Web Widget (Classic) to it's own
browser window.</p>
<img class="image img-screenshot" id="topic_dwz_hn5_dgb__image_xrh_zcv_dgb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_popout_window.png" width="250">
<p class="p">The Web Widget (Classic) becomes separate from the website and receives a unique URL. It
can be moved around and is no longer anchored to the website.</p>
<p class="p">You can share the URL to the Web Widget (Classic) popout in a range of marketing
communications, inviting the user to engage directly with you without having to be on your
website. </p>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title15" class="topic nested1" id="topic_ojq_rv2_wfb">
<h2 class="title topictitle2" id="ariaid-title15">Phone calls</h2>
<div class="body">
<p class="p">When call options are enabled in Web Widget (Classic), the appearance of the launcher to
end users depends on which other contact options are enabled.</p>
<div class="p">
<div class="tablenoborder">
<table border="1" cellpadding="4" cellspacing="0" class="table" frame="border" id="topic_ojq_rv2_wfb__table_lkf_3xw_sjb" rules="all" summary="">
<colgroup>
<col style="width:31.446540880503143%">
<col style="width:68.55345911949686%">
</colgroup>
<tbody class="tbody">
<tr class="row">
<td class="entry cellrowborder"><strong class="ph b">Launcher appearance</strong></td>
<td class="entry cellrowborder"><strong class="ph b">Contact options and agent availability</strong></td>
</tr>
<tr class="row">
<td class="entry cellrowborder">
<img class="image img-screenshot" id="topic_ojq_rv2_wfb__image_idq_kyh_jdb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_launcher_talk_only.png" width="165">
<img class="image img-screenshot" id="topic_ojq_rv2_wfb__image_xnh_4yh_jdb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_launcher_talk.png" width="100">
</td>
<td class="entry cellrowborder">If voice is the only contact option enabled in Web Widget (Classic)
<em class="ph i">and</em> an agent is online, the launcher includes the call icon and says
either <strong class="ph b">Request a callback</strong> or <strong class="ph b">Call us</strong>, depending on your
configuration. </td>
</tr>
<tr class="row">
<td class="entry cellrowborder"><img class="image img-screenshot" id="topic_ojq_rv2_wfb__image_shp_yyh_jdb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_launcher_talk_and_hc.png" width="100"></td>
<td class="entry cellrowborder">If voice and the help center are enabled in Web Widget (Classic), and an
agent is online, the button says <strong class="ph b">Help</strong>.</td>
</tr>
<tr class="row">
<td class="entry cellrowborder"><img class="image img-screenshot" id="topic_ojq_rv2_wfb__image_hvc_nzh_jdb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_launcher_help_question.png" width="100"></td>
<td class="entry cellrowborder">If voice, the help center, and chat, or contact forms are enabled in Web
Widget (Classic), and agents are online, the launcher includes a question icon and
says <strong class="ph b">Help</strong>. </td>
</tr>
</tbody>
</table>
</div>
</div>
<p class="p">When Web Widget (Classic) opens, the exact of call options in Web Widget (Classic) depends
on the how it's configured by the administrator and the status of agents (see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408824310426" target="_blank">Configuring voice options in Web Widget (Classic)</a>). Depending on
your configuration, customers can: </p>
<ul class="ul" id="topic_ojq_rv2_wfb__ul_b5p_l4g_3db">
<li class="li">View a phone number that they can call </li>
<li class="li">Request a callback </li>
<li class="li">View the average wait time for a callback </li>
</ul>
<p class="p">The following examples show how call options might appear, depending on your
configuration.</p>
<div class="p">
<div class="tablenoborder">
<table border="1" cellpadding="4" cellspacing="0" class="table" frame="border" id="topic_ojq_rv2_wfb__table_bfq_3yw_sjb" rules="all" summary="">
<colgroup>
<col style="width:50%">
<col style="width:50%">
</colgroup>
<tbody class="tbody">
<tr class="row">
<td class="entry cellrowborder"> </td>
<td class="entry cellrowborder"> </td>
</tr>
<tr class="row">
<td class="entry cellrowborder">
<p class="p"><img class="image img-screenshot" id="topic_ojq_rv2_wfb__image_npw_jyw_sjb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_talk_callback%2520form.png" width="250"></p>
<p class="p">If voice is the only option enabled in Web Widget (Classic) and it is
configured to allow callback requests, and then you click the launcher, the
callback form displays.</p>
</td>
<td class="entry cellrowborder">
<p class="p"><img class="image img-screenshot" id="topic_ojq_rv2_wfb__image_f3m_kyw_sjb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_talk_phone_number.png" width="250"></p>
<p class="p">If voice is the only contact option enabled and it is configured for <strong class="ph b">Call
Us</strong> only, your phone number displays.</p>
</td>
</tr>
<tr class="row">
<td class="entry cellrowborder">
<p class="p">
<img class="image img-screenshot" id="topic_ojq_rv2_wfb__image_o3y_kyw_sjb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_contact_options_all.png" width="250"></p>
<p class="p">If voice and the help center are enabled, and other contact options are enabled
(for example, chat or contact form), after a help center search the customer can
access Talk from the <strong class="ph b">Contact us</strong> button.</p>
</td>
<td class="entry cellrowborder">
<p class="p"><img class="image img-screenshot" id="topic_ojq_rv2_wfb__image_kpj_myw_sjb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_hc_search_talk.png" width="250"></p>
<p class="p">If voice and the help center are enabled, and chat and contact form are
disabled, after a help center search the <strong class="ph b">Contact us</strong> button says
<strong class="ph b">Request a callback</strong> (or <strong class="ph b">Call us</strong>) instead.
</p>
</td>
</tr>
<tr class="row">
<td class="entry cellrowborder"> </td>
<td class="entry cellrowborder"> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title16" class="topic nested1" id="topic_yj3_sv2_wfb">
<h2 class="title topictitle2" id="ariaid-title16">Contact forms</h2>
<div class="body">
<p class="p">Your customers can submit a ticket from Web Widget (Classic) to receive an email reply to
their inquiry. The contact form is enabled in Web Widget (Classic) by default. </p>
<p class="p"><img class="image img-screenshot" id="topic_yj3_sv2_wfb__image_cdv_4bz_2q" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/widget_enduser_leavemsgattatchment_selected.png" width="250"></p>
<p class="p">By default, the contact form includes fields for the customer's name, email address, and a
description of the problem. If the administrator enabled multiple ticket forms in Web Widget
(Classic) (see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408838063258" target="_blank">Configuring the components in your Web Widget
(Classic)</a>), then the customer can choose from multiple ticket forms. If not, then
only the default contact form appears.</p>
<p class="p">Tickets submitted through Web Widget (Classic) contain the tag
<code class="ph codeph">web_widget</code>.</p>
</div>
</div>
<script id="docs-schema-markup" type="application/ld+json">{
"@context": "https://schema.org",
"@type": "TechArticle",
"@id": "https://support.zendesk.com/hc/en-us/articles/4408836216218",
"url": "https://support.zendesk.com/hc/en-us/articles/4408836216218",
"headline": "Using Web Widget (Classic) to embed customer service in your website",
"description": "You can embed a customer support interface on your website that integrates help center search, live chat, phone calls, and contact forms to provide multiple contact options from a single widget.",
"articleSection": "Web Widget (Classic) documentation",
"datePublished": "2021-10-16T04:07:12+00:00",
"dateModified": "2026-04-20T17:38:46.449806+00:00",
"inLanguage": "en-US",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://support.zendesk.com/hc/en-us/articles/4408836216218"
},
"author": {
"@type": "Organization",
"name": "Zendesk",
"@id": "https://www.zendesk.com"
},
"publisher": {
"@type": "Organization",
"name": "Zendesk",
"@id": "https://www.zendesk.com"
},
"isPartOf": {
"@type": "WebSite",
"name": "Zendesk Help",
"@id": "https://support.zendesk.com/hc/"
},
"about": {
"@type": "SoftwareApplication",
"name": "Zendesk",
"@id": "https://www.zendesk.com"
}
}</script><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>