# Personalize HTML with data-rm attributes

Show segment-specific HTML with data-rm-if, order fallback branches, handle pending data, and add manual widget triggers.

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](https://rightmessage.com/help/everything-you-need-to-know-about-your-rightmessage-tracking-script) must load the project's segment configuration. Deploy the markup through your website, and [publish segment changes through RightMessage](https://rightmessage.com/help/publishing-your-changes). A segment that exists only in a draft is not available to normal visitors.

## Conditional HTML attributes

| Attribute         | Value                                                 | Meaning                                                                                               |
| ----------------- | ----------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
| `data-rm-if`      | One exact segment ID, such as `seg_workforge_manager` | Starts a parent-level set of conditional branches. The element is eligible when that segment matches. |
| `data-rm-else-if` | One exact segment ID                                  | Another candidate branch under the same parent.                                                       |
| `data-rm-else`    | No value required                                     | Unconditional fallback at its position in the branch order.                                           |

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:

```html
<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:

```html
<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](https://rightmessage.com/help/how-to-use-rightmessage-with-single-page-applications-spas).

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:

| Form          | Example                              |
| ------------- | ------------------------------------ |
| Attribute     | `data-rm-show="wdg_workforge_demo"`  |
| Class         | `class="rm-show-wdg_workforge_demo"` |
| Link fragment | `href="#wdg_workforge_demo"`         |

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:

```html
<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](https://rightmessage.com/help/javascript-hooks).

## 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](https://rightmessage.com/help/javascript-hooks).

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.