Getting started with the Web Widget inspector

Updated

Plan requirement

App pluscloud AI Agent Preview
Subscription Suite Team or higher, Support Team or higher

Switch on the Web Widget inspector from the extension icon on a website with a Zendesk Web Widget, and see how that widget is set up and behaves. It works on the real widget of the site, in your own browser.

What you need

  • AI Agent Preview, installed and activated. If you have not activated the extension yet, the window Activate AI Agent Preview opens on the website first. See Getting started with AI Agent Preview.
  • A website with the Web Widget for messaging. The inspector does not support the Web Widget (Classic). On a page with a Classic widget the check Not a messaging Web Widget appears.
  • No Zendesk role to inspect. You can inspect any website you can open. Some details need you to be signed in to the Zendesk account behind the widget, in the same browser: the Admin Center settings of the brand (admins), the ticket of a conversation and the account's ticket fields (agents and admins), and the AI agent with its conversation log (an AI agents role). Which details those are is in The Settings and Account tabs of the Web Widget inspector.

Switch the inspector on for a website

  1. Open the page with the widget in Chrome.
  2. Click the extension's icon in the Chrome toolbar. Under This website the window reads Zendesk Web Widget found, followed by the Zendesk account the widget belongs to.
  3. Click Inspect this widget. Chrome asks once for permission to read this site. Allow it.
  4. The inspector opens on the page. Reload the page once, so the inspector sees every message and every zE command from the moment the page loads.

The extension window from the Chrome toolbar on a fictional bike shop. Under This website it reads Zendesk Web Widget found, bluebirdbikes.zendesk.com, with the button Inspect this widget and the note that Chrome asks once for permission for this site.

On a page without a widget the window reads No Zendesk Web Widget on this page. On pages Chrome does not let extensions read, such as chrome:// pages, it reads The extension can't read this page. The AI agents dashboard has no This website section, because the preview runs there. Other Zendesk pages, such as your Help Center, can be inspected.

The panel

The panel Web Widget inspector opens on the side of the page away from the widget, with the Zendesk account under its title. It has six tabs:

  • Overview: the account, brand, widget key and mode, the AI agent that answers, and the Checks. See The checks in the Web Widget inspector.
  • Settings: the widget's public configuration, proactive messages, what the widget sends to Zendesk and accessibility.
  • Lab: customisation on the real widget, only in your browser. See The Lab in the Web Widget inspector.
  • Messages: the conversation as the widget receives it, as raw JSON per message, with the conversation IDs.
  • Events: the site's zE commands, the widget's events, realtime and network traffic, the widget's analytics calls and console warnings, with a filter per kind.
  • Account: your sign-in, the site's login token, ticket fields and tags, the AI agent, the conversation log and what the widget stores in this browser.

A fictional bike shop with the Web Widget open on the right and the Web Widget inspector on the left, on the Overview tab. It shows the Zendesk account bluebirdbikes.zendesk.com, the brand, a widget key of zeros, Floating (launcher) as mode, the AI agent Ava, ticket 4217 and Capture Everything since the page loaded. Below the button Open in AI agent preview the first checks are a low contrast warning for action and onAction and an error for a conversation field.

The same data is also in Chrome DevTools, in the tab AI Agent Inspector; see The AI Agent Inspector panel in Chrome DevTools.

Minimise it or turn it off

  • Minimize, the line at the top of the panel, folds it into a small bar at the bottom of the page, Web Widget inspector with a count: red for errors, orange for warnings, a green check when there is nothing. Click the bar to open the panel again.
  • Turn off the inspector on this site is the cross at the top of the panel, and the same button in the extension's window. It removes what the inspector set on the page: the Zendesk debug switches it set, a running embedded-mode test, skipping the widget and the proactive message preview. Your Lab settings stay saved for the site.

Until you turn it off, the inspector stays on for the site, also after a reload or a restart of Chrome. Turning it off does not remove Chrome's permission for the site; you remove that on chrome://extensions.

What it reads and what it never shows

The inspector reads the widget: its public configuration, the zE commands the site runs, the widget's messages, events and network responses, and what the widget stores in the site's storage. It never shows the widget's session token. Of a login token (JWT) that the site gives the widget, it shows only the header and the claims, decoded in the page; the token itself and its signature are never shown, stored or sent.

What the inspector reads stays in your browser. pluscloud receives the Zendesk account behind an inspected widget, without the website's address and not linked to you, the event that the inspector was opened, linked to you only when you are signed in to that Zendesk account or its AI agents dashboard, and that account's widget build and feature flags. See What pluscloud receives from AI Agent Preview.

See also

Was this article helpful?

0

Still stuck?

Our support team will take a look with you.

Comments

0 comments

Please sign in to leave a comment.