Installing the Web Widget for messaging

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. You can also choose to add an allowlist to the Web Widget to specify the domains where the widget can be installed.

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

Creating an allowlist for 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.

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

Adding messaging to your website [1:40]

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, then click the Installation tab.

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 edit, then click the Installation tab.

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.

Creating an allowlist for the Web Widget

Admins can create an allowlist of website domains to specify where their Web Widget can be shown to end users. When you enable the allowlist:

The widget can be embedded and accessed on any web pages within the domains (or subdomains) added to the list.

The widget cannot be accessed on any web pages from domains not included in the list.

Admins can quickly block the Web Widget from appearing on a domain or subdomain by removing it from the widget’s allowlist.

It’s important to note that the allowlist does not prevent your Web Widget code snippet from being added to a website’s code. Rather, it stops the code snippet from functioning, blocking the widget on any sites in the domains not included in the list.

To create an allowlist for a widget

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

Click the name of the widget you want to edit, then click the Installation tab.

Click the checkbox to Only allow Web Widget to be installed on these domains.

Only alphabetical characters are allowed after the final dot (.) in the subdomain. For example, my-awesome-restaurant.pizza is valid, but my-awesome-restaurant.pizza-chain is not.

Add the domains or subdomains where the widget can be installed. To add all subdomains from a single domain, add an asterisk before the domain name (for example, *.yourdomain.com).

Click Save settings.

Note: As soon as you save these settings, the Web Widget will only be allowed to appear on web pages in the specified domains. If you enable the allowlist for a widget that has already been embedded in a website, and that website’s domain or subdomain is not included in the allowlist, it will be blocked from appearing on that website.

Removing a domain from the allowlist

If you no longer wish to allow your Web Widget on a domain or subdomain, you can remove that domain from the allowlist, which immediately blocks it from the removed website.

To remove a domain from the allowlist

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

Click the name of the widget you want to edit, then click the Installation tab.

Deselect the checkbox to Only allow Web Widget to be installed on these domains.

Click the X next to the domains or subdomains where the widget should be blocked.

Click Save settings.

Disabling the allowlist

If you choose to no longer restrict your Web Widget by domain, you can disable the allowlist on that widget. When you disable the allowlist, the Web Widget becomes active on all websites that have added the Web Widget code snippet to their page code.

To disable the allowlist

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

Click the name of the widget you want to edit, then click the Installation tab.

Deselect the checkbox to Only allow Web Widget to be installed on these domains.

Click Save settings.