Personalize HTML with data-rm attributes

Use data-rm-if and related HTML attributes to show different page content for different segments. You control the branches in your website's markup instead of creating a visual-editor action for each visibility change.

The installed snippet must load the project's segment configuration. Deploy the markup through your website, and publish segment changes through RightMessage. A segment that exists only in a draft is not available to normal visitors.

Conditional HTML attributes

Values are segment IDs, not segment names, group IDs, CSS selectors, JavaScript, or Liquid. There is no supported inline and, or, or negation expression. Define the audience logic in a segment, then reference that segment ID.

Illustrative markup, not executed:

<section>
	<h2 data-rm-if="seg_workforge_manager">Plan your team's work with WorkForge</h2>
	<h2 data-rm-else-if="seg_workforge_individual">Keep your own work organized</h2>
	<h2 data-rm-else>Keep work moving with WorkForge</h2>
</section>

If the manager segment matches, the first heading is shown. If only the individual segment matches, the second is shown. If neither matches, the fallback is shown. No content is copied into a provider profile by this markup.

Parent scope and branch ordering

The runtime finds parents containing a direct child with data-rm-if. It then considers all direct children with any of the three conditional attributes in document order.

The first matching branch wins. If several segment conditions match, later branches remain hidden. A data-rm-else placed first wins before any later conditional branch.

A second data-rm-if under the same parent does not start an independent chain. Nonconditional siblings are ignored for selection and do not split the chain. Separate independent groups into different parent wrappers.

Illustrative independent groups, not executed:

<div>
	<p data-rm-if="seg_workforge_manager">A plan for your team.</p>
	<p data-rm-else>A plan for your work.</p>
</div>
<div>
	<a data-rm-if="seg_workforge_customer" href="https://example.com/account">Open WorkForge</a>
	<a data-rm-else href="https://example.com/demo">Explore WorkForge</a>
</div>

The paragraph and link selections are independent because they have different parents. An else-if or else without a sibling data-rm-if does not establish a managed conditional group.

Pending data, fallback, and visibility

A segment can depend on information that has not finished loading. If an earlier branch is pending, the runtime does not skip it to show a later fallback. The chain remains pending until the decision is available. A terminal source failure settles as no data and can permit the fallback.

RightMessage changes inline display to hide nonselected siblings. It saves the original display information and restores the selected branch's usable display value. If your application later changes the same inline property, RightMessage avoids overwriting that change.

If the selected branch is still hidden by its own display styling, RightMessage tries inline display: revert !important. A hidden parent or a framework that replaces the element can still prevent visibility. Keep ownership of the conditional element's display consistent.

The installation snippet initially cloaks conditional branches while startup data settles. For ordinary page content, .rmcloak hides with visibility: hidden and preserves layout. .rmcloak-hidden hides with display: none and removes its layout space. The normal installation cloak has a 20-second timeout and a script-error cleanup path. These startup fallbacks are not a guarantee that conditional content stays hidden if RightMessage fails to load.

The separate .rmcloak-stay-invisible and .rmcloak-stay-hidden styles are not ordinary startup cloaks. Do not assume the normal timeout removes persistent stay styling.

Conditional content on dynamic pages

RightMessage reconciles personalization with runtime state and observed page changes. Normal SPA navigation does not require a second router reset hook. See Use RightMessage in a single-page application.

For application-state changes that do not change the URL, the browser API exposes reset. Campaign-only reconciliation uses personalize. Neither command fixes a wrong segment ID, missing published configuration, or a parent structure that combines independent chains.

Manual widget click targets

For a widget configured with a manual trigger, these three forms identify a click target:

The runtime handles matching clicks and prevents the normal click action. It observes dynamically added targets and changes to data-rm-show, class, and href. These values refer to widget IDs, not segment IDs, and do not form conditional branches.

Illustrative manual trigger, not executed:

<button type="button" data-rm-show="wdg_workforge_demo">
	Find the right WorkForge plan
</button>

For JavaScript equivalents, see the trigger and hide commands in Browser JavaScript commands and events.

Runtime-owned attributes and security

Only documented attributes are supported for authoring. Copying other data-rm-* attributes from the DOM does not create a campaign, connect an element to a question, or create a supported embed.

data-rm-form-ignore is an explicit form-observer opt-out, documented in Browser JavaScript commands and events.

Conditional HTML is still delivered to the visitor's browser, including hidden branches. Visitors can inspect it or alter local state. Use these attributes for presentation, never for passwords, private account data, paid-content access, or other authorization decisions.