# 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** | Displays a message in an overlay on top of the page to capture attention without changing existing content. | Welcome offers, exit-intent promotions, announcements |
| **Inline** | Inserts your message directly into the page, replacing existing content for a seamless, native experience. | 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:

```mermaid
sequenceDiagram
    actor User
    participant SDK as TD Web SDK
    participant RT as RT 2.0 Personalization API

    User->>SDK: Visit page or trigger event<br/>(page_view, cart_add, etc.)
    SDK->>RT: Send event with personalization token
    RT->>RT: Evaluate entry criteria<br/>& segment membership
    alt Eligibility conditions met
        RT-->>SDK: Return campaign payload
        alt Popup campaign
            SDK->>User: Overlay popup on page
        else Inline campaign
            SDK->>User: Replace Zone element innerHTML
        end
    else Conditions not met
        RT-->>SDK: Return empty response
    end
    User->>User: View, interact with,<br/>or dismiss the message
```

### Prerequisites

See [Setup & Prerequisites](/products/marketing-cloud/engage-studio/experiences/setup-and-prerequisites) for the full list of requirements before creating a campaign.

## Campaign Lifecycle

In-Browser Message campaigns follow this status lifecycle:

```mermaid
stateDiagram-v2
    direction LR
    [*] --> Draft
    Draft --> Live : Launch
    Live --> Paused : Pause
    Paused --> Live : Resume
    Live --> Finished : Complete
    Paused --> Finished : Complete
    Finished --> [*]
```

| **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 a Campaign

Each campaign is created through two steps — **Target Audience** and **Message Content** — followed by **Launch**. The steps are the same regardless of message type; only the content configuration differs between Popup and Inline.

Select the guide for your message type:

- [Create a Popup Campaign](/products/marketing-cloud/engage-studio/experiences/create-a-popup-campaign) — modal overlay with the drag-and-drop editor
- [Create an Inline Campaign](/products/marketing-cloud/engage-studio/experiences/create-an-inline-campaign) — DOM replacement with the HTML/CSS code editor


## 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.

## In This Section

Setup & Prerequisites
Install the TD Web SDK and configure RT 2.0 prerequisites.

Create a Popup Campaign
Build a modal overlay campaign with the drag-and-drop editor.

Create an Inline Campaign
Replace a DOM element with personalized HTML content.

Personalize Message Content
Use Profile Variables and Liquid syntax to personalize messages.

Web Message Previewer
Visually select DOM elements and preview campaigns before launch.

Troubleshooting
Diagnose and resolve common In-Browser Messaging issues.