How to Add Zendesk Chat (Web Widget) to Your Website

Admin Center holds the code: go to Channels, Messaging and social, Messaging, open your widget and expand Installation. Copy the snippet and paste it just before the closing body tag on each page. On We.Inc, turn on the Zendesk Messaging add-on instead. Zendesk messaging is part of its paid Suite plans.

Zendesk widget at a glance
Item	Detail
Where the code lives	Admin Center > Channels > Messaging and social > Messaging > your widget > Installation
Where to paste it	Before </body> on every page that should show the widget
Plans listed	Suite Team, Growth, Professional, Enterprise, Enterprise Plus
Help center	A checkbox embeds it automatically once the help center is active
Inline mode	Render inside your own container instead of the floating button

Updated October 28, 2026

Zendesk has two generations of widget. Current accounts use the Web Widget for messaging; older accounts may still run Web Widget (Classic), which has different settings and a different snippet. Check which one your Admin Center shows before following any tutorial.

Add Zendesk chat on We.Inc, WordPress, Wix, Squarespace or plain HTML

We.Inc

Choose Add-ons from the builder's "..." menu.
Open Zendesk Messaging and paste the key or snippet value it asks for.
Switch it on and wait for the saved message.
Publish so the widget reaches the live site.

WordPress

Copy the snippet from Zendesk's Installation section.
Add it before </body> with a footer-scripts plugin or your child theme's footer.
Clear any page cache and load the site logged out.

On WordPress.com, scripts are only allowed on a plugin-enabled plan with hosting features activated.

Wix

Go to Settings, then Custom Code.
Click + Add Custom Code, paste the snippet and name it Zendesk.
Set it to load on all pages in Body - end.
Apply, then publish the site.

Needs a connected domain, which requires a Wix premium plan.

Squarespace

Open Code Injection.
Paste the snippet into the Footer field, which Squarespace places before </body>.
Save and check the live site.

Code Injection needs the Core, Plus or Advanced plan.

Plain HTML

Paste the snippet immediately above </body> in each page or your shared footer.
Upload and test in a private window.

Embedded mode

Render into your own container

Shown in Zendesk's installation article. Add an element with the id messaging-container where the panel should sit.

window.zEMessenger = { autorender: false };
// after the snippet loads:
zE('messenger', 'render', {
  mode: 'embedded',
  widget: { targetElement: '#messaging-container' }
});

Sources

Zendesk: Installing the Web Widget for messaging, https://support.zendesk.com/hc/en-us/articles/4500748175258-Installing-the-Web-Widget-for-messaging, checked October 28, 2026, for the Zendesk steps
Wix: Embedding custom code on your site, https://support.wix.com/en/article/embedding-custom-code-on-your-site, checked October 28, 2026, for the Zendesk steps
Squarespace: Using code injection, https://support.squarespace.com/hc/en-us/articles/205815908-Using-code-injection, checked October 28, 2026, for the Zendesk steps
WordPress.com: Code, https://wordpress.com/support/code/, checked October 28, 2026, for the Zendesk steps

Floating button or embedded panel

By default the widget is a launcher in the corner. Zendesk also supports an embedded mode, where you stop it rendering on its own and tell it which page element to draw into. That suits a dedicated Support page where the conversation should be part of the layout.

If your team works in shifts, set business hours and an away message in Zendesk before launch, so visitors after hours are told when to expect an answer rather than waiting on a silent window.

How it works

Create or open the messaging widget in Zendesk Admin Center.
Copy the snippet from its Installation section, or email it to whoever edits the site.
Add it before the closing body tag on every page, or switch on a platform setting.
Check that a firewall or content security policy is not blocking Zendesk.
Start a conversation from the live site and answer it in the Agent Workspace.

Tips

Use the "Email code to a team member" option in Installation if a developer handles your site; it avoids copy errors in chat apps.
If the help center is on Zendesk too, tick the automatic embed box there rather than pasting the code twice.
Test on a phone: the messaging panel takes the full screen on small displays, so check it does not hide a sticky checkout button.

Frequently asked questions

Is the Zendesk Web Widget free?

Zendesk does not list a free plan for messaging. Its installation article names the Suite Team, Growth, Professional, Enterprise and Enterprise Plus plans.

Why does my Zendesk widget not appear?

The usual causes are pasting the code on some pages only, a content security policy or firewall that blocks Zendesk's domains, or using Classic widget instructions on a messaging account.

Can I show the widget inside a page instead of a bubble?

Yes. Zendesk's embedded mode turns off automatic rendering and draws the messenger into an element you choose, such as a div on your Contact page.

Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.