Installing the Web Widget for messaging

What's my plan?

All Suites | Team, Growth, Professional, Enterprise, or Enterprise Plus

Note: This article applies to accounts using the Web Widget for messaging. If you're using Web Widget (Classic), see Configuring the components in your Web Widget (Classic).

When you've finished configuring your Web Widget, you can install it on your website or help center and make it available to your customers. Alternatively, you can embed the Web Widget if you want control over exactly where and how it appears.

This article includes the following topics:

Installing the Web Widget on a website

Installing the Web Widget on a help center

Embedding the Web Widget

Installing the Web Widget on a website

Installing the Web Widget on a website requires some basic familiarity with your website's code, as you need to paste the code snippet before the closing HTML tag.

The following video gives you an overview of how to add messaging to your website:

Adding messaging to your website [1:40]

Tip: You can further control where the Web Widget appears by creating an allowlist. See Using an allowlist to control where the Web Widget appears.

To add the Web Widget to your website

In Admin Center, click Channels in the sidebar, then select Messaging and social > Messaging.

Click the name of the widget you want to install.

Scroll down, then click Installation to expand it.

Click the Copy icon ( ) at the bottom of the code snippet frame.

In the source code of the web page where you want to add the widget, paste the code snippet before the closing HTML tag. Add the code to every web page where you want the widget to appear.

If you want to send the code to someone else (a developer, for example), click Email code to a team member.

Make sure your firewall is configured to allow the Web Widget to appear.

Installing the Web Widget on a help center

Installing the widget on a help center is a simple, one-click process – no tech support needed. You must have created and activated your help center to install Web Widget.

To add the Web Widget to your help center

In Admin Center, click Channels in the sidebar, then select Messaging and social > Messaging.

Click the name of the widget you want to install.

Scroll down, then click Installation to expand it.

Click the checkbox to Automatically embed Web Widget in your Help Center.
You will not see this option if you have not created and activated your help center.

Click Save.
The Web Widget is added to every page of your help center.

Embedding the Web Widget

Embedded mode places the Web Widget inside a specific HTML container on your page, rather than displaying it as a floating overlay with a fixed position. The widget automatically fills the dimensions of your chosen container, giving you control over exactly where and how it appears. For example, this is useful for advanced layouts like split views with conversation lists and messages side-by-side.

Embedded mode requires you to use a JavaScript embed API call to specify both the mode and the target container for the widget.

To use embedded mode, start by disabling the widget's default auto-render behavior:

window.zEMessenger = {
autorender: false
}

Then, tell the widget where to appear by specifying a container's ID or class:

zE('messenger', 'render', {
mode: 'embedded',
widget: {
targetElement: '#messaging-container'
}
});

The Web Widget now displays inside the #messaging-container element and takes on the size and position defined by your CSS.

For more information, see Web Widget embedded mode in our developer documentation. To view more examples, see Embedded mode for the Zendesk Widget.