Setting up Web Widget to add messaging to your website or help center

<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>
<div class="body">
<div class="p">
<div class="note attention">
<span class="attentiontitle"></span> This article is for customers who want to use messaging in an
account that has not used live chat <em class="ph i">and</em> was created after November 2,
2021.<ul class="ul" id="topic_or2_yj2_3rb__ul_qcq_2bx_2bc">
<li class="li">If you currently use live chat, see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408832031898" target="_blank">Creating a messaging Web Widget when
using live chat and Web Widget (Classic)</a>.</li>
<li class="li">If you don't use live chat and your account was created <em class="ph i">before</em>
November 2, 2021, see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408828655514" target="_blank">Creating a Web Widget in accounts prior
to November 2021</a>.</li>
</ul>
</div>
</div>
<p class="p">You use a Web Widget to offer messaging functionality to your customers through a website
or help center. A default Web Widget already exists for you to set up and install. You
must be an admin to set up a Web Widget.</p>
<p class="p">The table below shows the browser requirements for using the messaging Web Widget.</p>
<div class="p">
<div class="tablenoborder">
<table border="1" cellpadding="4" cellspacing="0" class="table" frame="border" id="topic_or2_yj2_3rb__table_cjt_llg_wfb" rules="all" summary="">
<colgroup>
<col style="width:33.33333333333333%">
<col style="width:66.66666666666666%">
</colgroup>
<thead class="thead" style="text-align:left;">
<tr class="row">
<th class="entry cellrowborder" id="d51e70" style="vertical-align:top;">Device type</th>
<th class="entry cellrowborder" id="d51e73" style="vertical-align:top;">Browsers</th>
</tr>
</thead>
<tbody class="tbody">
<tr class="row">
<td class="entry cellrowborder" headers="d51e70" style="vertical-align:top;">
<p class="p">Desktop computers</p>
</td>
<td class="entry cellrowborder" headers="d51e73" style="vertical-align:top;">
<ul class="ul" id="topic_or2_yj2_3rb__ul_ons_z1h_w4">
<li class="li">Google Chrome: Latest two versions</li>
<li class="li">Microsoft Edge</li>
<li class="li">Mozilla Firefox: Latest two versions</li>
<li class="li">Apple Safari: Latest version</li>
</ul>
</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d51e70" style="vertical-align:top;">
<p class="p">Mobile devices</p>
</td>
<td class="entry cellrowborder" headers="d51e73" style="vertical-align:top;">
<ul class="ul" id="topic_or2_yj2_3rb__ul_vns_z1h_w4">
<li class="li">iOS Safari: Latest two versions</li>
<li class="li">Android browser: Latest version</li>
<li class="li">Chrome Mobile for Android and iOS: Latest version</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p class="p">If you support multiple brands and want to create a Web Widget for a brand, see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/7178423364762" target="_blank">Adding Web Widgets to multiple brands</a>.</p>
<p class="p"><strong class="ph b">To set up the Web Widget for messaging</strong></p>
<ol class="ol" id="topic_or2_yj2_3rb__ol_hlt_3sz_fbc">
<li class="li" dir="ltr">
<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_or2_yj2_3rb__d8e841" 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">Messaging and social &gt;
Messaging</strong>.</span><p class="p">A basic Web Widget named <code class="ph codeph">Zendesk</code> is
created by default and appears in the Channels list.</p>
</li>
<li class="li">Click the default widget in the Channels list.</li>
<li class="li">Under <strong class="ph b">Start with the basics</strong>, configure the following settings, then click
<strong class="ph b">Next</strong>:<div class="p">
<ul class="ul" id="topic_or2_yj2_3rb__ul_ftt_g2n_k2c">
<li class="li">Confirm or change the <strong class="ph b">Channel name</strong>.</li>
<li class="li">If you have multiple brands, select the <strong class="ph b">Brand</strong> where you'll be
using the widget. </li>
<li class="li">Select <strong class="ph b">Add a privacy notice</strong> to include a <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/5018479936922#topic_jxp_tbn_k2c" target="_blank">recording notice</a> in the
widget, and add a link to your own notice, if available.</li>
</ul>
</div>
</li>
<li class="li">Under <strong class="ph b">Install on your site</strong>, take an action or skip this step if you plan to
install later, then click <strong class="ph b">Next</strong>.<ul class="ul" id="topic_or2_yj2_3rb__ul_ilt_3sz_fbc">
<li class="li">For your website, copy the code snippet to paste in your website now or
click <strong class="ph b">Email code to team member</strong> to send the code<span class="ph"> to yourself or a team member</span>.</li>
<li class="li">For your help center, select <strong class="ph b">Automatically embed Web Widget in your help
center</strong>. You won't see this option if you haven't <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/5702269234330" target="_blank">activated your help center</a>.</li>
</ul>
<p class="p">If you're not ready to install the widget now, you can
always do it later.</p>
</li>
<li class="li">Under <strong class="ph b">Make it your own</strong>, configure the settings, then click <strong class="ph b">Next</strong>.<ul class="ul" id="topic_or2_yj2_3rb__ul_jlt_3sz_fbc">
<li class="li">Select a <strong class="ph b">Primary color</strong> for the launcher and header by using the color
picker or by entering a hexadecimal number.</li>
<li class="li">Enter a <strong class="ph b">Title</strong> that will appear in the header of the Web Widget. </li>
<li class="li">Upload an optional <strong class="ph b">Logo</strong>.</li>
</ul>
<p class="p">The Web Widget updates in the Preview panel as you make changes. <span class="ph">You can also click <strong class="ph b">Test it now</strong> to see how the Web
Widget will look to your end users.</span></p>
</li>
<li class="li" dir="ltr">If the <strong class="ph b">See what you’ve done so far</strong> window
appears, click <strong class="ph b">Done</strong>.</li>
</ol>
<p class="p">In the Web Widget page, you can <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/7178617945498" target="_blank">configure the widget settings</a> or leave
it as-is for now. </p>
<p class="p">If you installed the widget, it's immediately available on your website or help center.
Otherwise, you can <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4500748175258" target="_blank">install the widget on your website or in a help center</a> at a
later date.</p>
</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/4409103246874",
"url": "https://support.zendesk.com/hc/en-us/articles/4409103246874-Setting-up-Web-Widget-to-add-messaging-to-your-website-or-help-center",
"headline": "Setting up Web Widget to add messaging to your website or help center",
"description": "You can set up a Web Widget to add messaging functionality to your website or help center by configuring settings, customizing appearance, and installing the widget code as an admin.",
"articleSection": "Zendesk messaging",
"datePublished": "2021-10-20T20:32:23+00:00",
"dateModified": "2025-09-05T23:17:40+00:00",
"inLanguage": "en-US",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://support.zendesk.com/hc/en-us/articles/4409103246874"
},
"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",
"softwareAddOn": {
"@type": "SoftwareApplication",
"name": "Messaging",
"@id": "https://support.zendesk.com/hc/en-us/sections/4405298882330"
}
}
}</script>