The Lab in the Web Widget inspector

The Lab applies Web Widget customisation to the real widget on a website, only in your browser, so you can try it before you change the site's code.

The Lab applies Web Widget customisation to the real widget on a website, only in your browser, so you can try it before you change the site's code. Visitors see nothing of it. The Lab is a tab of the Web Widget inspector; how you switch that on is in Getting started with the Web Widget inspector.

Try a customisation on the real widget

1. Open the Lab tab.
2. To start from what the site already sets, click Start from the site's customization. The editor then holds the site's customisation, language, zIndex, cookies and behavior.
3. Switch on Lab on this site. The widget follows each change at once, and the Lab stays on after a reload until you switch it off.
4. Change options in the editor below the Lab's sections. It is the same editor as Web Widget customization in the preview, with every documented option; see Web Widget customisation options. Under Widget language (locale) you set the widget's language; leave it empty to keep the site's.
5. Check the marks under the options. A value the widget would refuse is marked, with what the widget then skips. An invalid colour makes it ignore the whole call.
6. Click Copy code. You get the zE calls for your settings; they go on the site after the widget snippet. The same code is at the bottom of the tab, under Code.

Clear and reload removes your Lab settings and the Lab's tests on this page, and reloads, so you see the widget as the site has it. Switching Lab on this site off also works, but the widget keeps your customisation until the page reloads.

The editor also has two options Zendesk does not document, marked Undocumented: the pre-conversation screen and the hide button in the header. What that means is in Experimental and undocumented Web Widget features.

When a reload or a new visitor is needed

A bar at the top of the Lab says when a change only shows after a reload, such as the embedded-mode test, skipping the widget, the debug switches or switching the Lab off. Reload page applies it.

The pre-conversation screen and the proactive message preview only show to a visitor without a conversation. Then the bar offers Start as new visitor, which removes the widget's data from this site's storage in your browser and reloads. Your current conversation on the site can then not be opened again in this browser.

Check the contrast

Under the editor, Contrast lists the widget's five text and background pairs: primary, message, action, the AI agent's messages and the background. Each shows its colours, where they come from (Admin Center, the site, the Lab, the default), the contrast ratio and a level: AAA, AA, Large text only or Too low. Normal text needs at least 4.5:1. The list follows your changes as you make them.

Test embedded mode

In embedded mode the widget sits inside an element of the page instead of floating. Zendesk documents it for developers. The test shows it on the real page, only in your browser.

1. Open Test embedded mode and choose Full widget or Split view, which places the conversation list and the conversation in two places.
2. Click Pick a place and click an element on the page. The arrow up picks a larger element, the arrow down goes back, Enter picks and Esc cancels.
3. Read the notes under the place. The widget fills its element: below 300 pixels high it is cut off or invisible, and it needs about 300 pixels of width. An empty element with a fixed height works best.
4. Click Start test. The page reloads with the widget in that place. Stop test puts it back.

Under Embed code is the code for the site: automatic rendering off, then a line where your Web Widget snippet from Admin Center goes, then the render call with your place.

Take the site's settings to the AI agent preview

Open in AI agent preview copies the site's widget key and customisation, with the Lab's when the Lab is on, to the extension's preview of that Zendesk account, and opens its AI agents dashboard in a new tab. They replace the preview's own customisation for that account. The widget key then decides the design in the preview, also over the Web Widget of the AI agent's brand. The preview says once where the settings came from. You then test the AI agent in the site's design. How to change or remove them in the preview is in Web Widget customisation options.

See also

• Experimental and undocumented Web Widget features
• Web Widget customisation options
• Copying the Web Widget embed code
• The checks in the Web Widget inspector
• Seeing what a setting does