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.
In-Browser Messaging is currently in Beta. Features and SDK contracts may change before general availability. Contact your Customer Success Manager for access.
Complete Setup & 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 Chrome Extension to select it visually.
- In Engage Studio, navigate to In-Browser Messaging and click Create.
- Configure targeting:
| 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. |
| 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. |
The CSS selector field identifies the target DOM element the SDK will inject content into. The selector is matched using document.querySelector() at runtime.
Install the Web Message Previewer Chrome Extension to visually select an element on your web page and automatically populate the CSS selector and Replacement HTML fields.
- 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
innerHTMLreplacement: the matched element's existing content is replaced with the campaign HTML.
| 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.
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.
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 |
You can reference CDP profile attributes and use Liquid template syntax in the HTML editor to personalize inline content:
<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 for the full variable and Liquid syntax reference.
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.
- Review the campaign details and Zone ID.
- 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.
| 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. |
Message type and Zone ID become read-only once the campaign is Live or Finished. Pause the campaign first to edit content.
To visually identify a Zone ID and preview the replacement HTML before launching, use the Engage Studio — Web Message Previewer Chrome Extension.
- Open your website in Chrome.
- Open the Extension side panel.
- Click Select Element on the Select tab and click the target element on the page.
- Copy the generated CSS selector and paste it into the Zone ID field in Engage Studio.
- On the Preview tab, verify how the replacement HTML renders on the actual page.