# Create an Inline Campaign

An **Inline** campaign inserts your message directly into the page, replacing existing content for a seamless, native experience. Use inline campaigns for sale banners, cart coupon reminders, product-level promotions, and any content that should appear as part of the natural page flow.

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

## Before You Begin

Complete [Setup & Prerequisites](/products/marketing-cloud/engage-studio/experiences/setup-and-prerequisites) before creating a campaign. Ensure an RT Personalization and at least one section exist in Audience Studio for the target parent segment. You should also have identified the target DOM element, or plan to use the [Web Message Previewer](/products/marketing-cloud/engage-studio/experiences/chrome-extension) Chrome Extension to select it visually.

## Step 1 — Target Audience

1. In Engage Studio, navigate to **In-Browser Messaging** and click **Create**.
2. Configure targeting:


In-Browser Message Target Audience step showing Target Parent Segment, Personalization, and Personalization section fields
| **Field**  | **Description**  |
|  --- | --- |
| **Target Parent Segment** | The RT 2.0 parent segment defining eligible users. |
| **Personalization** | An existing RT 2.0 Personalization. Click **Preview** to inspect it, or **Create Personalization** to set one up in Audience Studio if needed. |
| **Personalization Section** | The section within the Personalization that will carry this campaign's content. Click **Create Section** if no sections exist yet. |


## Step 2 — Message Content

### Campaign Details

| **Field**  | **Required**  | **Description**  |
|  --- | --- | --- |
| **Message ID** | — | Auto-generated unique identifier. Read-only. |
| **Name** | ✅ | Display name shown in the campaign list. Max 100 characters. |
| **Description** | — | Internal notes. Max 1,000 characters. |
| **Message Type** | ✅ | Select **Inline**. This cannot be changed after the campaign is saved. |


Inline In-Browser Message Content step showing Message ID, Name, Description fields and the Message Content section with CSS selector and Replacement HTML fields
### CSS Selector (Zone ID)

The **CSS selector** field identifies the target DOM element the SDK will inject content into. The selector is matched using `document.querySelector()` at runtime.

Tip
Install the [Web Message Previewer](/products/marketing-cloud/engage-studio/experiences/chrome-extension) Chrome Extension to visually select an element on your web page and automatically populate the CSS selector and Replacement HTML fields.

Zone ID behavior
- Only **one Zone ID** is supported per Inline campaign.
- If the selector does not match any element on the page at runtime, the message is **silently skipped** — no error is shown to the end user.
- The default injection behavior is **`innerHTML` replacement**: the matched element's existing content is replaced with the campaign HTML.


#### Supported CSS Selector Patterns

| **Pattern**  | **Example**  | **Description**  |
|  --- | --- | --- |
| ID selector | `#product-banner-area` | Element with a specific `id` attribute |
| Class selector | `.promo-slot` | Element with a specific class |
| Data attribute (value) | `[data-id="product-123"]` | Element with a specific `data-*` attribute value |
| Data attribute (existence) | `[data-role="banner"]` | Element that has a `data-*` attribute |
| Child combinator | `div > p > span` | Direct child path |
| nth-child | `ul > li:nth-child(3)` | Specific child by index |
| Combined | `section[data-role="main"] > div.content` | Combination of the above |


**Recommendation**: Use `id` attributes or stable `data-testid` / `data-*` attributes for the most reliable selectors. Avoid class names generated by CSS-in-JS libraries (styled-components, Emotion) as they change at build time.

### Content Editor (HTML)

The **Replacement HTML** field accepts the HTML content that will replace the matched Zone element's `innerHTML`. Enter HTML directly, or paste content generated by the [Web Message Previewer](/products/marketing-cloud/engage-studio/experiences/chrome-extension).

#### Security Restrictions

The following HTML tags and attributes are rejected at launch time (returns a validation error):

| **Disallowed Tags**  | **Reason**  |
|  --- | --- |
| `<script>`, `<noscript>`, `<iframe>`, `<object>`, `<embed>`, `<applet>` | JavaScript execution and sandbox escape vectors |
| `<form>`, `<input>`, `<textarea>`, `<select>` and related form elements | Form capture is not supported |
| `<base>`, `<meta>`, `<link>`, `<title>`, `<head>`, `<html>`, `<body>` | Page-level tags that are invalid inside an injected fragment |
| `<svg>`, `<math>` | Can embed `<script>` elements |
| `<style>` | Global CSS injection enabling UI redressing or phishing overlays |


| **Disallowed Attributes**  | **Reason**  |
|  --- | --- |
| `on*` (all inline event handlers such as `onclick`, `onload`) | JavaScript execution via inline event handlers |
| `href="javascript:..."` (on any element) | JavaScript execution via URI scheme; bypasses `on*` filters |
| `srcdoc` | Inline document embedding |
| `contenteditable` | UI spoofing |


#### Using Profile Variables and Liquid Syntax

You can reference CDP profile attributes and use Liquid template syntax in the HTML editor to personalize inline content:

```html
<div class="sale-banner">
  {% if rt_profile.imported.loyalty_tier == "gold" %}
    <p>Gold member exclusive: 20% OFF</p>
  {% else %}
    <p>Limited-time offer — Shop now!</p>
  {% endif %}
  <p>Hi {{rt_profile.imported.first_name}}, this deal is just for you.</p>
</div>
```

See [Personalize Message Content](/products/marketing-cloud/engage-studio/experiences/personalize-message-content) for the full variable and Liquid syntax reference.

### Save Behavior

Changes are not auto-saved
Edits are held in your local session. Click **Save as Draft** to persist changes to the server. Navigating away without saving triggers a confirmation dialog.

## Step 3 — Launch

1. Review the campaign details and Zone ID.
2. Click **Launch** to move the campaign from **Draft** to **Live**.


The linked RT 2.0 Personalization section is updated with the campaign payload. The TD Web SDK begins replacing the Zone element with the campaign HTML for eligible users.

## Managing a Live Campaign

| **Action**  | **When to Use**  | **Result**  |
|  --- | --- | --- |
| **Pause** | To temporarily stop delivery and make edits. | Status changes to **Paused**. Edit freely, then Resume. |
| **Resume** | To restart a paused campaign. | Status returns to **Live**. |
| **Complete** | To permanently end the campaign. | Status changes to **Finished**. The payload is removed from RT 2.0 and cannot be reactivated. |


Immutable after launch
Message type and Zone ID become read-only once the campaign is **Live** or **Finished**. Pause the campaign first to edit content.

## Using the Web Message Previewer

To visually identify a Zone ID and preview the replacement HTML before launching, use the **Engage Studio — Web Message Previewer** Chrome Extension.

1. Open your website in Chrome.
2. Open the Extension side panel.
3. Click **Select Element** on the **Select** tab and click the target element on the page.
4. Copy the generated CSS selector and paste it into the **Zone ID** field in Engage Studio.
5. On the **Preview** tab, verify how the replacement HTML renders on the actual page.


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