Copying the Web Widget embed code

The preview builds the embed code for your website: your Web Widget snippet from Admin Center plus the zE calls for the customisation you chose.

The preview builds the embed code for your website: your Web Widget snippet from Admin Center plus the zE calls for the customisation you chose.

Copy the code

1. Set up the widget the way you want it in the preview. The options are in Web Widget customisation options.
2. In the toolbar, click Preview settings, then Web Widget customization, and scroll to Embed code at the bottom of the panel.
3. Click Copy embed code for the snippet and the calls together, or Copy zE calls only for a site that already has the snippet.
4. Paste the code on your website, before </body>.
5. Open the page and check the widget against the preview.

A notification confirms that the code is on the clipboard. If copying fails, select the code in the panel and copy it yourself.

What the code contains

• The snippet of the Web Widget, as Admin Center gives it, for the brand the preview uses. With several brands, that is the brand of the AI agent, or the one you chose under This account in the Preview channel menu. A Web Widget key you entered on the options page, or copied from a website with the Web Widget inspector, takes precedence, also for an admin. The first line is then a comment instead of the snippet: <!-- Paste the Web Widget code from Admin Center here (Channels > Messaging, your widget, Installation; widget key <key>) -->. It names the key, so you know which widget, and where its snippet is. Your developer replaces that line.
• A customisation call, zE('messenger:set', 'customization', ...), with the options you changed, in the order of Zendesk's documentation. A Style other than Account default is added as stylingPreset, with a comment that it resets the list, avatar and bubble options of earlier customisation calls; set those in the same call. The colours from Colors for this account are not included, because they only preview your Admin Center colours. To set colours in the code, use Theme colors.
• A language call, zE('messenger:set', 'locale', ...), when you picked a Widget language in the preview settings. With Automatic, there is no language call. How the widget chooses its language is in How do I set the language of the widget.
• Calls for zIndex, cookies and behavior, when you set them. The pre-conversation screen is part of the behavior call.

The calls come in one <script> block. With nothing changed, the code is only the snippet.

The default position of End conversation is left out. Zendesk's widget builds have disagreed on its value, and a value a build refuses makes it skip the rest of the conversation settings. Other values the widget would refuse are marked in the panel, with what the widget then skips; see Web Widget customisation options.

When there is no snippet

The extension reads the snippet with the Admin role for Support. Without that role, or when the account has no Web Widget, the code block starts with a comment that no snippet was found. Put your own snippet above the zE calls in that case. Where to find it on your site is in How do I find the widget code on my website.

Keep the preview and the site in step

The customisation is stored per Zendesk account in this browser, so the code stays the same until you change an option. Reset customization removes all options; the code then shows the snippet only. The extension never changes your website or Admin Center: the widget on your site changes only when you replace the code there.

The code is for the Web Widget on a website. It does not change the Zendesk SDKs in a mobile app.

Once the code is on your site, the Web Widget inspector checks the widget there, for example for customisation the widget does not apply. See The checks in the Web Widget inspector.

See also

• Web Widget customisation options
• The preview settings
• How do I find the widget code on my website
• Setting up and showing the Web Widget