# In-Browser Messaging

Beta
In-Browser Messaging is currently in Beta. Features and SDK contracts may change before general availability.
Contact your Customer Success Manager for access.

**In-Browser Messaging** lets marketers deliver personalized web experiences—such as promotional banners, modal overlays, and inline content replacements—directly on a customer's website. Unlike email or push notifications, in-browser messages are rendered inside the browser while the user is actively browsing, making them ideal for contextual promotions, cart reminders, and time-sensitive announcements.

All targeting and personalization decisions are handled server-side by **Real-Time Personalization 2.0 (RT 2.0)**, so the client-side footprint remains minimal.

## Message Types

In-Browser Messaging supports two delivery modes:

| **Type**  | **Description**  | **Best For**  |
|  --- | --- | --- |
| **Popup** | An overlay that appears on top of the existing page content without modifying the underlying DOM. Supports predefined layout positions (center, corners). | Welcome offers, exit-intent promotions, announcements |
| **Inline** | Replaces the inner HTML of a specific DOM element (Zone) identified by a CSS selector. The injected content becomes part of the page layout. | Sale banners, cart coupon reminders, product-level promotions |


Message type is selected at creation time and **cannot be changed** after a campaign is saved.

## How It Works

In-Browser Messaging is built on **Real-Time Personalization 2.0**. The delivery flow is:

```
1. User visits a page or triggers an event (e.g., page view, cart add)
        ↓
2. The TD Web SDK sends the event to the RT 2.0 Personalization API
        ↓
3. RT 2.0 evaluates the configured entry criteria and segment membership
        ↓
4. If eligibility conditions are met → the API returns the campaign payload
        ↓
5. The SDK injects the content:
   • Popup → overlays a popup on the page
   • Inline → replaces the inner HTML of the target Zone element
        ↓
6. User views, interacts with, or dismisses the message
```

### Prerequisites

Before creating an In-Browser Message campaign, ensure the following are in place:

1. **RT Personalization 2.0 is enabled** for your Treasure AI account.
2. **RT events** are instrumented in your website and flowing into Treasure AI.
3. **ID stitching** is configured so user identities are resolved across events.
4. **A Real-Time Personalization** entry and section are created in Audience Studio using the relevant parent segment.
5. **The TD Web SDK** is installed on the target website and configured to call the Personalization API.


## Campaign Lifecycle

In-Browser Message campaigns follow this status lifecycle:

```
DRAFT ──Launch──▶ LIVE ──Pause──▶ PAUSED ──Resume──▶ LIVE
                    │                  │
                    └──Complete──▶ FINISHED ◀──Complete──┘
```

| **Status**  | **Description**  | **Editable?**  |
|  --- | --- | --- |
| **Draft** | Created but not yet delivered. | ✅ All settings |
| **Live** | Actively delivering to eligible users. | ❌ Pause first to edit |
| **Paused** | Delivery stopped; can be resumed. | ✅ All settings |
| **Finished** | Manually completed; cannot be reactivated. | ❌ |


Campaigns in **Draft** or **Finished** status can be deleted. **Message type and content become immutable once a campaign goes Live or is Finished.**

## Creating an In-Browser Message Campaign

Creating a campaign involves three steps in Engage Studio.

### Step 1 — Target Audience

Configure personalization targeting by selecting:

- **Target Parent Segment** — The RT 2.0 parent segment defining eligible users.
- **Personalization** — An existing RT 2.0 Personalization that controls delivery based on entry criteria.
- **Personalization Section** — The specific section within the Personalization that will carry this campaign's content.


These must be configured in Audience Studio before creating an In-Browser Message. If no Personalization exists, click **Create Personalization** to navigate to RT 2.0 setup.

### Step 2 — Message Content

Configure the campaign details and content:

- **Campaign ID** — Auto-generated unique identifier (read-only).
- **Name** *(required)* — Display name shown in the campaign list.
- **Description** *(optional)* — Internal notes about the campaign.
- **Message Type** — Select **Popup** or **Inline** (immutable after creation).


#### Popup Campaigns

For Popup campaigns, configure the layout position:

| Position | Description |
|  --- | --- |
| `top-left` | Top-left corner |
| `top-center` | Top center |
| `top-right` | Top-right corner |
| `center` | Centered overlay |
| `bottom-left` | Bottom-left corner |
| `bottom-center` | Bottom center |
| `bottom-right` | Bottom-right corner |


Use the **drag-and-drop editor** to add and arrange content blocks (text, images, buttons).

You can also configure the overlay background color and opacity, close button appearance, and content width to match your website's visual style.

#### Inline Campaigns

For Inline campaigns, specify the **Zone ID** — a CSS selector that identifies the target DOM element on the page (for example, `#product-banner-area` or `.promo-slot`). Use the [Engage Studio — Web Message Previewer](/products/marketing-cloud/engage-studio/experiences/chrome-extension) Chrome Extension to visually select the element on the live page and automatically generate the selector.

Content is edited via a code editor with **HTML** and **CSS** tabs.

Zone ID Behavior
If the Zone ID selector does not match any element on the page at runtime, the message is silently skipped — no error is shown to the end user. Only one Zone ID is supported per Inline campaign.

#### Using Profile Variables

You can reference CDP profile attributes in your message content to personalize the experience:

```
{{profile.loyalty_member}}
{{profile.first_name}}
```

Available variables are sourced from the Parent Segment's batch attributes, RT attributes, and RT events.

### Step 3 — Launch

Once content is complete, click **Launch** to make the campaign Live. Engage Studio automatically updates the linked RT 2.0 Personalization section with the campaign payload.

To stop delivery, click **Pause**. Click **Resume** to reactivate. Click **Complete** to permanently finish the campaign.

Save Behavior
Content changes are held in a draft state during your editing session. Changes are only persisted to the server when you click **Save as Draft**. If you navigate away without saving, a confirmation dialog will warn you that unsaved changes will be lost.

## Authoring with the Web Message Previewer

Engage Studio provides the **Engage Studio — Web Message Previewer** Chrome Extension to help marketers identify target DOM elements on the live website and preview campaign content before launch — without writing CSS selectors by hand.

The Extension is an **authoring assist tool only** — the delivery architecture has no dependency on it. Customers who cannot install the Extension can still specify CSS selectors manually using browser DevTools.

➡️ [Install and use the Web Message Previewer](/products/marketing-cloud/engage-studio/experiences/chrome-extension)

## Use Cases

### Limited-Time Sale Banner

Display an inline sale banner on a product detail page only during an active sale period. Configure entry criteria in RT 2.0 to check the current time against the product's sale window, and use a Zone ID targeting the banner area (for example, `#product-banner-area`).

### Cart Coupon Reminder

When a user adds a product to the cart, show a coupon reminder icon if an applicable coupon exists. RT 2.0 evaluates the user's coupon list against the added product and returns the reminder content if a valid, applicable coupon is found.

## Out of Scope (Future Milestones)

The following capabilities are not included in the current release and are planned for future milestones:

- Catalog data binding (binding banner content to product catalog attributes automatically)
- Impression, click, close, and conversion tracking
- Frequency capping (controlling how often a user sees a message)
- A/B or multivariate testing
- Multi-step journeys or orchestration logic within in-browser campaigns