On-site Inline Campaign

Inline campaigns place custom content blocks inside your page, embedded directly into your existing layout instead of appearing as an overlay. Unlike popups, floating modals, or sticky bars, inline content becomes part of the page itself — for example a personalized banner on your homepage, an announcement inside a category page, or a segment-specific offer embedded in your product pages.

You design the content once in the Visual Editor, and dengage injects it into the element you target for every visitor who matches your campaign conditions.

📘
Looking for product widgets that fill themselves?
If you want the content (Similar Items, Frequently Bought Together, Best Sellers) to be generated automatically by the Recommendation Engine, use a Recommendation campaign instead. Inline campaigns display the content exactly as you designed it.

Before You Start

Make sure the following are ready before creating an inline campaign:

Web SDK integration — the dengage Web SDK must be installed on your website so visitor behavior and page attributes can be detected.
On-Site Messaging enabled — the target application must have On-Site Messaging enabled on the Settings > Applications page. Only applications with On-Site Messaging enabled are listed during campaign creation.
Inline content — at least one inline content created with the Visual Editor (Content > Marketing > Onsite > New > Visual Editor > Inline). You can also create it during campaign setup with the + New button. Inline contents are built from Image, Text, and Button elements, each with full styling options (links, fonts, colors, borders, margin/padding).
A target element on your page — a stable element the content will be injected into. We recommend adding a dedicated <div> with an id starting with dn-inline-target (e.g. #dn-inline-target-home-hero) so the placement never breaks when your page design changes.

Creating an Inline Campaign

Go to Marketing > On-Site Campaign and click New. In the Select a Type window, choose Inline.

[Screenshot: Select a Type window with Inline selected]

Step 1: Content

Define what the campaign shows and when it runs:

Campaign Name — enter a descriptive name to identify the campaign.
Schedule — set the start date (Now or a specific date and time) and the end date (Never or a specific date).
A/B Testing — optionally enable A/B testing to create multiple variants and find out which content drives more engagement.
Content — select the inline content to display. Only inline contents are listed here. You can preview each one, or click + New to create a new content in the Visual Editor without leaving the wizard.

Step 2: Targeting

Define where the content appears:

Website — select the application the campaign will run on. Only applications with On-Site Messaging enabled are listed.
Platform — target Web, Mobile Web, or both. Platform is detected from the visitor's browser or screen width.
Pages — show the content on All pages or on Specific pages using URL path conditions. Multiple conditions can be combined with logical (AND/OR) operators — for example, show only on URLs containing /category/.
Target Selector — enter the CSS selector of the element the content will be injected into (e.g. #dn-inline-target-home-hero), or click Open Website on Inspect Mode to pick the element visually on your live site.
Placement — choose how the injection is performed relative to the selected element:
- Replace (default) — clears the element and replaces its content
- Start of — inserts the content at the beginning of the element
- End of — appends the content at the end of the element
- Add before — inserts the content just before the element
- Add after — inserts the content just after the element
Trigger — display the content On Page Load or On Custom Event (a custom Google Tag Manager data layer event).

[Screenshot: Target Selector and placement settings]

⚠️
Selector limitation
If the selector targets the html, head, or body element and the placement is Add before or Add after, no action is taken. Always target a specific element inside the page body.

Step 3: Audience & Delivery

Define who sees the campaign and how often:

Audience — show the campaign to All Users, or use Advanced Filter to target specific segments. Conditions can be grouped to build complex targeting rules.
Delivery — Show without limits is the default and recommended option, so the content is always present for matching visitors. Alternatively, set Delivery Limits such as the maximum number of displays per visitor and the minimum time between displays.
Stop after engagement — when enabled (default), the campaign stops being shown to a visitor after they engage with it.
Campaign Priority — set High, Medium (default), or Low. When multiple campaigns target the same page, priority determines which one is displayed.

[Screenshot: Audience & Delivery settings]

Step 4: Summary

The summary page lists all your settings grouped by step (Content, Targeting, Audience & Delivery) so you can review everything at a glance and go back to make final adjustments.

Click Save to finish. You will be asked whether you want to activate the campaign now or keep it as a draft to activate later.

Target Selector

The Target Selector defines exactly where on the page your inline content is injected. It has two parts: the target element, identified by a CSS selector, and the placement type, which determines how the injection is performed relative to that element.

[Screenshot: Target Selector section in Step 2 – Targeting]

Selecting the Target Element

Identify the element the content will be attached to in one of two ways:

Enter a CSS selector — type the selector of the element directly, e.g. #dn-inline-target-home-hero or .dn-inline div. Any valid CSS selector can be used: an id (#element-id), a class (.element-class), or a nested selector (.product-page .description div).
Open Website on Inspect Mode — click the button to open your website in inspect mode and pick the element visually. Hover over the page to highlight elements, then click the one you want; its selector is filled in automatically.

👍
Best practice
Add a dedicated, empty <div> to your page template with an id starting with dn-inline-target (e.g. <div id="dn-inline-target-home-hero"></div>) and target that element. A dedicated element keeps the placement stable — your campaign will not break when the design or structure of the page changes, and the reserved spot prevents conflicts with other page content.

Placement Types

The placement type specifies how the HTML injection is performed relative to the target element. Consider this target element on your page:

<div id="dn-inline-target-banner">
  <p>Existing content</p>
</div>

Type	What happens	Result for the example
Replace (default)	The element's existing content is cleared and replaced with the inline content	`<p>Existing content</p>` is removed; the inline content becomes the only content inside the div
Start of	The inline content is inserted at the beginning of the element, before its existing content	Inline content appears above `<p>Existing content</p>`, inside the div
End of	The inline content is appended at the end of the element, after its existing content	Inline content appears below `<p>Existing content</p>`, inside the div
Add before	The inline content is inserted just before the element itself, as a sibling	Inline content appears above the div, outside of it
Add after	The inline content is inserted just after the element itself, as a sibling	Inline content appears below the div, outside of it

📘
Tip — default content with Replace
Because Replace overwrites the element's existing content, you can place default content inside the target element in your page template. Visitors outside the campaign's audience see the default content, while matching visitors see the inline content in its place.

Rules and Limitations

If the selector targets the html, head, or body element and the placement type is Add before or Add after, no action is taken. Always target a specific element inside the page body.
The target element must be present on the page at the moment the campaign is triggered (On Page Load or On Custom Event). If your page renders the element later (e.g. client-side rendering), trigger the campaign with a custom event fired after the element is rendered.
The inline content is displayed inside the page flow with the styling defined in the Visual Editor; make sure the target area is wide enough for the content's configured dimensions.