Skip to content
Engage Studio
/
In-Product Experiences
/
/
Chrome Extension
Last updated

Engage Studio — Web Message Previewer

The Engage Studio — Web Message Previewer Chrome Extension is an authoring assist tool that lets marketers work directly on the live website to:

  1. Select target elements — Click any element on the page to automatically generate a stable CSS selector (Zone ID) for Inline campaigns.
  2. Preview campaign content — See how replacement HTML renders on the actual page before going live.
Authoring assist only

The Chrome Extension is an authoring tool — it is not part of the campaign delivery architecture. Campaigns are delivered to end users via the TD Web SDK, which operates independently of the Extension. Marketers who cannot install the Extension can still create and launch campaigns by entering CSS selectors manually using browser DevTools.

Requirements

  • Google Chrome browser (version 114 or later)
  • Access to Engage Studio in your Treasure AI account
  • The website you want to target must be accessible in your browser (the Extension works on any HTTP/HTTPS page, including authenticated pages you are already logged into)

Installing the Extension

The Extension is available on the Chrome Web Store. Search for "Engage Studio — Web Message Previewer" by Treasure AI, or ask your Customer Success Manager for a direct link.

  1. Open the Engage Studio Extension page on the Chrome Web Store.
  2. Click Add to Chrome, then confirm by clicking Add extension in the dialog.
  3. The Engage Studio — Web Message Previewer Extension will appear in your Extensions list with a Treasure AI icon.
Pin the Extension

Click the puzzle piece icon (Extensions) in the Chrome toolbar and pin the Engage Studio — Web Message Previewer Extension for easy access.

Opening the Extension

  1. Navigate to the website page where you want to configure or preview an In-Browser Message.
  2. Click the Treasure AI icon in the Chrome toolbar.
  3. A side panel opens on the right side of the browser window.
Restricted pages

The Extension cannot run on Chrome system pages (chrome://…), the Chrome Web Store, or browser extension pages. Navigate to a regular HTTP/HTTPS website to use it.

The Extension UI

The side panel has two tabs:

  • 1 Select — Select a DOM element on the page and edit the replacement HTML.
  • 2 Preview — Inject the replacement HTML into the page and compare Original vs. Modified.
Engage Studio Chrome Extension side panel showing the Preview tab with CSS Selector, Replacement HTML fields, and Compare Versions toggle

Step 1: Select — Identify a Target Element

Use the Select tab to pick the DOM element you want to replace and generate its CSS selector.

  1. In the side panel, click Select Element to enter selector mode.
  2. Move your cursor over the page. The target element is highlighted with a blue border and a tooltip showing the generated CSS selector.
  3. Click the element you want to target. The side panel populates:
    • CSS Selector — the auto-generated selector (e.g., div[data-src="drDpRe"] > div:nth-of-type(2) > div). A match count below the field confirms how many elements on the page it targets.
    • Replacement HTML — an editable field where you enter the HTML content to inject.
  4. Edit the Replacement HTML as needed.
  5. Use the copy button next to the CSS Selector and Replacement HTML fields to copy each value, then paste them into the In-Browser Message editor in Engage Studio.

To re-pick a different element, click Reselect Element.
To cancel selection without choosing an element, press Escape.

How Selectors Are Generated

The Extension analyzes the target element and its ancestors to produce a stable CSS selector — one that is less likely to break when the page is updated. The generation strategy prioritizes, in order:

  1. id attribute — if present and not a generated or UUID-like value (for example, #product-banner-area)
  2. data-* test attributes — such as data-testid, data-qa, or data-cy
  3. Stable data-* attributes — other data-* attributes whose values do not look like hashes or session tokens
  4. Class names — filtered to exclude dynamically generated class names (CSS-in-JS, styled-components, hashed suffixes)
  5. Structural path — a tag > tag:nth-of-type(n) path from the nearest stable ancestor
Dynamic class names

If the page uses a CSS-in-JS library (styled-components, Emotion, CSS Modules), auto-generated class names are filtered out automatically. In these cases, add a stable data-testid or id attribute to the target element for the most reliable selector.

Step 2: Preview — Verify Rendering

Use the Preview tab to inject the replacement HTML into the live page and verify how it looks before launching.

  1. Switch to the Preview tab in the side panel.
  2. When Preview Mode Active is shown (green banner), the replacement HTML has been injected into the page.
  3. Use the Compare Versions toggle to switch between:
    • Original — the page as it normally appears.
    • Modified — the page with the replacement HTML injected.
  4. Review the rendering on the page.
  5. To remove the injected content, reload the page (Cmd/Ctrl + R) or navigate away.
Preview is local only

The Extension injects content only in your local browser session. No changes are made to the live website or to any campaign settings in Engage Studio. End users are not affected.

Troubleshooting

Issue Solution
The side panel shows "This page does not allow extensions"Navigate to a regular HTTP/HTTPS website. The Extension cannot run on chrome://, chrome-extension://, view-source:, devtools://, or Chrome Web Store pages.
Side panel does not open when clicking the iconMake sure the Extension is enabled at chrome://extensions. Try disabling and re-enabling the Extension, then reload the page.
"The previewer has not been loaded on this page. Reload the page (Cmd/Ctrl+R) and try again." error in the side panelThe content script may not have loaded on the current tab. Reload the page (Cmd/Ctrl + R) and reopen the side panel.
Element selector highlights nothingThe page may be using Shadow DOM or cross-origin iframes. In these cases, select a wrapping container element outside the shadow root.
CSS Selector matches multiple elements (count > 1)The element lacks a stable id or data-* attribute. Ask a developer to add a data-testid attribute to the target element for a more precise selector.
Preview content disappears immediately after injectionA JavaScript framework on the page may be re-rendering the DOM. Try selecting a container element that the framework does not manage, or ask a developer to add a stable insertion point.

Known Limitations

  • Only one active side panel is supported per browser window.
  • The Extension requires the Side Panel Chrome API (Chrome 114+). Older Chromium-based browsers may not be supported.
  • Organizations with restrictive device management (MDM) policies that block Extension installation should use manual CSS selector entry via browser DevTools as an alternative.

Overview

Always-on Campaigns