How to Add the Zendesk Web Widget to Your Website (Step by Step)

This is the hands-on companion to our concepts guide, the Zendesk Web Widget explained. If you want the background — Web Widget (Classic) vs. the newer messaging widget, what each can do, how it differs from live chat — start there. If you're ready to install, you're in the right place. Every step below is verified against Zendesk's own documentation; Zendesk revises its UI periodically, so confirm labels in your own account.

Before you start: messaging is the on switch

Here's the single most confusing thing about the modern Web Widget, so let's clear it up first. On Zendesk accounts today, the Web Widget is the front end of messaging. There's no separate "create a Web Widget" button — when you turn messaging on, Zendesk creates a default Web Widget for you, and that's the thing you'll configure and embed.

So the prerequisite is simply: turn on messaging.

1. Open the Admin Center (click the Zendesk Products grid icon → Admin Center).
2. In the sidebar, click Channels.
3. Choose Messaging and social → Messaging.
4. Click Manage settings, then click Turn on messaging for your account.

That's it for the prerequisite. Turning on messaging includes a Web Widget, and you'll now see it listed on this same Messaging page — ready to configure.

Already using live chat or the Web Widget (Classic)? You can still adopt messaging, but the transition has a few extra considerations. The good news is the two use the same embed concept, so converting later rarely means re-touching your site's code. We cover the distinction in Zendesk messaging vs. live chat. For this guide we'll assume the modern messaging Web Widget, since that's what Zendesk now provisions by default.

Step 1 — Open your Web Widget to configure it

Back on the Messaging page (Admin Center → Channels → Messaging and social → Messaging), you'll see your Web Widget listed. Click its name to open the configuration screen. This one screen is where you'll do everything else in this guide — style it, set up responses, and grab the install snippet — so keep it open.

You don't have to perfect the configuration before installing. The snippet you'll copy in Step 3 is a pointer to your widget; any setting you change in Zendesk afterward updates the live widget automatically, no re-paste required. Still, it's worth setting the basics now so the first visitors who see it get a sensible experience.

Step 2 — Configure the widget (Basics, Style, Responses)

The widget configuration is grouped into a few sections. The three that matter most up front:

• Basics — the widget's name and core identity. The name is internal (how you'll recognize it in Admin Center), so make it clear if you'll run more than one.
• Style — the look: the launcher color and shape, the widget's position, and the company name/logo shown in the header. Match it to your brand so it doesn't look bolted on. Keep contrast high enough that the launcher is actually visible against your site's footer area.
• Responses — the behavior. This is where you set the greeting message visitors see, turn on the AI agent (Zendesk's bot that can answer questions and deflect common tickets), and apply business hours so the widget sets the right expectation about response time when your team is offline. The AI agent in particular pairs well with a self-service setup — it answers from the same knowledge.

You don't need to use every option. A name, on-brand styling, a greeting, and business hours are enough for a solid first launch — you can refine the AI agent and routing later.

Step 3 — Get the installation snippet

Now grab the code. On the same widget configuration screen:

1. Scroll down to the Installation section and click to expand it.
2. You'll see a block of JavaScript — this is your install snippet.
3. Click the Copy icon at the bottom of the code frame to copy the whole thing.

The snippet is short and looks roughly like this (your key will differ):

<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=YOUR-WIDGET-KEY"></script>

That key is what ties the script to your widget and your configuration. Don't edit it. If you ever need to hand installation to a developer, this expanded Installation section is also where Zendesk lets you email the snippet along.

Step 4 — Paste the snippet before </body>

This is the actual "add it to your website" step, and the rule is simple: paste the snippet just before the closing </body> tag of every page where you want the widget to appear.

Two parts of that sentence matter:

• Before </body> (not in the <head>). The widget loads asynchronously, but placing it at the end of the body means it doesn't block your page's main content from rendering — better perceived performance for visitors.
• Every page. The widget only appears on pages that contain the snippet. The most common install mistake by far is pasting it on the homepage and assuming it's site-wide. To get it everywhere, add it to a shared template/footer that every page includes, rather than page by page.

Once saved and deployed, reload your site and the launcher should appear in the corner.

Step 5 — Platform-specific placement

Most platforms give you one shared place to drop the snippet so it loads on every page. The three most common:

• WordPress — paste the snippet into your theme's footer (Appearance → Theme File Editor → footer.php, just before </body>), or, more safely, use a code-injection / header-footer plugin and add it to the "before </body> / footer scripts" box. The plugin route survives theme updates, which editing footer.php directly does not.
• Shopify — open Online Store → Themes → Edit code and add the snippet to theme.liquid immediately before the closing </body> tag. Because theme.liquid wraps every storefront page, this gives you site-wide coverage in one edit.
• Google Tag Manager — create a new Custom HTML tag, paste the snippet, and set the trigger to All Pages. One caveat: don't strip the script's attributes (like its id) when GTM offers to — Zendesk relies on them. GTM is the cleanest option if you can't edit site code directly or want to manage the tag without a developer.

If your platform isn't here, the principle is identical: find the global template or "custom code / footer scripts" setting and paste the snippet before </body>.

Step 6 — Auto-embed it in your Zendesk Help Center

If you run a Zendesk Help Center (Guide), you don't need to touch its code at all — Zendesk can embed the widget for you:

1. In the widget's Installation section, check Automatically embed Web Widget in your Help Center.
2. Click Save.

The widget then appears on every Help Center page automatically. The one prerequisite: your Help Center must already be created and activated. This is a nice combo with a self-service portal — the widget surfaces answers right alongside your knowledge base.

Step 7 — Test that it loads

Don't trust "I pasted it" — verify:

1. Open your site in a fresh/incognito window (to avoid cache) and confirm the launcher appears in the corner.
2. Click it open, check your greeting and styling look right, and send a test message.
3. Confirm the conversation lands where you expect in Zendesk (Agent Workspace / messaging).
4. Spot-check a few different pages — not just the homepage — to confirm the snippet really is on the shared template.

If it doesn't show, the usual culprits are: snippet only on one page, it was pasted in the <head> of a builder that ignored it, an aggressive cache/CDN, or an ad/script blocker in your test browser.

A note on the Classic Web Widget

If you're on an older account, you may have the Web Widget (Classic) instead — the legacy, component-based widget (Chat, Talk, Help Center contact form). Classic is available only on accounts created before June 5, 2023, and Zendesk now steers everyone toward the messaging Web Widget. The install concept is the same: configure it in Admin Center, then paste an embed snippet before </body> (or auto-embed in the Help Center). If you're choosing today, go with messaging — the deeper Classic-vs-messaging breakdown is in the Web Widget explained.

Best practices and common mistakes

A few habits make the difference between a widget that quietly works everywhere and one that's half-installed:

• Put it on a shared template, once. The #1 mistake is the snippet missing from most pages. Use the global footer/template so coverage is automatic.
• Keep it before </body>. Don't move it into the <head> chasing "load it sooner" — that risks blocking content render for no real benefit, since the script loads async anyway.
• Style it before you launch, behavior after. Get the launcher visible and on-brand and a greeting in place; you can tune the AI agent, routing, and business hours once real conversations are flowing.
• Set business hours honestly. A widget that implies instant replies when nobody's online frustrates visitors. Let it set expectations when you're closed.
• Re-test after theme updates. Editing footer.php/theme.liquid directly means a theme update can wipe the snippet. A code-injection plugin or GTM avoids that.
• Mind performance. The widget adds JavaScript to every page. Loading it before </body> and leaning on Zendesk's async load keeps the impact modest, but it's worth a quick before/after page-speed check on a busy landing page.

Where AI takes the widget further

Out of the box, the Web Widget is a great front door: visitors can self-serve from your Help Center or start a conversation. Turn on Zendesk's AI agent in the Responses section and it can answer common questions right in the widget. That's real deflection — and for a lot of teams it's enough.

Where it gets interesting is when you want the widget to do more than answer from one knowledge base. An AI agent layer like Macha runs on top of your existing Zendesk — it's not a help desk and not a Zendesk replacement. It can power the answers behind the same widget by reading the visitor's actual question, pulling from your knowledge base and past tickets, and drafting a context-aware reply — then handle the follow-on work (tagging, routing, looking something up in another system) or hand off to a human with full context when it's not confident.

The honest framing: it's another integration to configure, and it's only as good as the knowledge you connect to it. On cost, Macha bills per AI action — any automated step it takes, drafting, tagging, routing, or resolving — not per closed conversation, because most automation isn't a clean "resolution," it's work done along the way. If your bottleneck is the volume of repetitive questions hitting the widget, that's the line where a built-in bot's single-source answers stop scaling. You can try it free — 7-day free trial, no credit card required.

Frequently asked questions

How do I turn on the Zendesk Web Widget? On modern accounts you turn on messaging, which includes a Web Widget. Go to Admin Center → Channels → Messaging and social → Messaging → Manage settings, then click Turn on messaging for your account. Your Web Widget then appears on the Messaging page, ready to configure and install.

Where do I find the Web Widget installation code? Open your widget on the Messaging page (Admin Center → Channels → Messaging and social → Messaging → click the widget name), scroll to the Installation section, expand it, and click the Copy icon on the JavaScript snippet.

Where do I paste the Zendesk widget snippet? Just before the closing </body> tag on every page where you want the widget. The easiest way to cover the whole site is to add it to a shared template or footer — WordPress theme footer, Shopify's theme.liquid, or a Google Tag Manager Custom HTML tag set to All Pages.

Why isn't my Zendesk Web Widget showing up? Most often the snippet is only on one page instead of a shared template, it was pasted in the <head> and ignored, a cache/CDN is serving an old page, or a browser ad/script blocker is hiding it. Test in a fresh incognito window and check several pages.

Do I need to add code to my Zendesk Help Center? No. In the widget's Installation section, check Automatically embed Web Widget in your Help Center and click Save. The widget appears on all Help Center pages — provided your Help Center is already created and activated.

What's the difference between this and the Web Widget (Classic)? The messaging Web Widget is the modern, conversational widget Zendesk provisions today; Classic is the older component-based one, available only on accounts created before June 5, 2023. Both install via an embed snippet, but Zendesk recommends messaging. See the Web Widget explained for the full comparison.

The bottom line

Adding the Zendesk Web Widget is two jobs. First, in Zendesk: turn on messaging (Admin Center → Channels → Messaging and social → Messaging → Manage settings → Turn on messaging), open the widget, and configure its Basics, Style, and Responses. Second, on your site: expand the Installation section, copy the JavaScript snippet, and paste it just before </body> on every page — via your WordPress footer, Shopify theme.liquid, or a GTM Custom HTML tag — or let Zendesk auto-embed it in your Help Center. Then test in an incognito window across a few pages. For the concepts behind all of this — Classic vs. messaging and what the widget can do — see the Zendesk Web Widget explained.

Installation steps verified against Zendesk's official documentation, June 2026. Zendesk updates its product periodically — confirm labels in your own account before relying on them.