All Collections
Website Personalization
Manually personalize content using data-rm-* attributes

Manually personalize content using data-rm-* attributes

Overview

If you manage content in your CMS or site builder and want to personalize it based on visitor segments without using RightMessage's visual editor, you can use HTML data attributes. The RightMessage tag.js script recognizes special data-rm-* attributes that let you show or hide content based on which segment a visitor belongs to. This approach gives you direct control over personalization from within your HTML.

This feature requires an active subscription to the Personalize plan. Even though you're personalizing outside of our website personalization editor, your site still needs the tag.js script and a Personalize plan subscription to evaluate segments and display the correct content.

Before you begin

To use manual personalization with data attributes, you'll need:

  • An active Personalize plan subscription (the Segment & Grow plan does not include website personalization capabilities)

  • The RightMessage tracking script installed in your website's <head> section

  • At least one Segment Group or Question with segments defined

  • Access to edit your website's HTML (either directly or through your CMS)

If you're new to RightMessage personalization, start with our visual editor before trying manual HTML attributes. The editor is easier to use and doesn't require knowing segment IDs. Use manual attributes when you need more control or when working with complex CMS templates.

How data-rm-* attributes work

When your page loads, the RightMessage script:

  1. Automatically hides (cloaks) all elements with data-rm-if, data-rm-else-if, or data-rm-else attributes to prevent a flash of unpersonalized content

  2. Evaluates which segments the current visitor belongs to

  3. Finds groups of sibling elements (elements sharing the same parent) that use these attributes

  4. Shows the first matching element and keeps all other siblings hidden

The cloaking behavior prevents visitors from seeing the wrong content before personalization applies. If the RightMessage script fails to load within the timeout period, the cloak is removed and visitors will see your default content.

Available data-rm-* attributes

RightMessage supports three conditional attributes for manual personalization:

data-rm-if

Displays an element only when the visitor belongs to the specified segment. The attribute value must be the exact segment ID.

<div data-rm-if="seg_01EXAMPLE123">
  <h1>Welcome, Agency Owner!</h1>
  <p>Discover tools built specifically for agencies.</p>
</div>

data-rm-else-if

Provides an alternative condition checked after data-rm-if. You can chain multiple data-rm-else-if siblings together.

<div data-rm-else-if="seg_02EXAMPLE456">
  <h1>Welcome, Freelancer!</h1>
  <p>Find resources to grow your solo business.</p>
</div>

data-rm-else

Acts as a fallback that displays when no data-rm-if or data-rm-else-if conditions match. This ensures visitors always see something.

<div data-rm-else>
  <h1>Welcome!</h1>
  <p>Explore our tools for growing your business.</p>
</div>

Finding your segment IDs

To use data-rm-* attributes, you need the exact segment ID—not the human-readable segment name. RightMessage displays segment IDs in two locations:

From a Segment Group

  1. In your RightMessage dashboard, click Segment Groups in the left sidebar

  2. Click on the Segment Group containing the segment you need

  3. In the segment list, look at the top right of each segment card

  4. Copy the segment ID that starts with seg_

Segment IDs are displayed in a monospaced font in the top right corner of each segment card. They always start with seg_ followed by a unique identifier.

From an Auto-Segment (Question-based segment)

If your segment is created from a question rather than automatic behavior-based rules:

  1. Go to Questions in the left sidebar

  2. Click on the question that creates the segment

  3. Click the Auto-Segment tab

  4. Look at the top right of each answer option to find the segment ID starting with seg_

Creating conditional content blocks

Here's a complete example showing how to create personalized hero sections based on business type:

<!-- This entire section will be personalized -->
<section class="hero">
  
  <!-- Show to visitors in the "Agency" segment -->
  <div data-rm-if="seg_01K45EXAMPLE001">
    <h1>Scale Your Agency with Smart Automation</h1>
    <p>Join 500+ agencies using our platform to manage client campaigns.</p>
    <a href="/agency-demo" class="cta-button">Book Agency Demo</a>
  </div>
  
  <!-- Show to visitors in the "Freelancer" segment -->
  <div data-rm-else-if="seg_01K45EXAMPLE002">
    <h1>Streamline Your Freelance Workflow</h1>
    <p>Built for solo entrepreneurs who need simple, powerful tools.</p>
    <a href="/freelancer-start" class="cta-button">Start Free Trial</a>
  </div>
  
  <!-- Show to visitors in the "Enterprise" segment -->
  <div data-rm-else-if="seg_01K45EXAMPLE003">
    <h1>Enterprise-Grade Marketing Infrastructure</h1>
    <p>Secure, compliant, and built to scale with your organization.</p>
    <a href="/enterprise-contact" class="cta-button">Contact Sales</a>
  </div>
  
  <!-- Fallback: show when no segment matches -->
  <div data-rm-else>
    <h1>Marketing Tools That Grow With You</h1>
    <p>Whether you're a freelancer, agency, or enterprise, we've got you covered.</p>
    <a href="/get-started" class="cta-button">Get Started</a>
  </div>
  
</section>

All conditional elements must be siblings (share the same parent element). The RightMessage script only evaluates sibling groups together. If your elements are nested differently or have different parents, the conditional logic won't work correctly.

Best practices

Always include a fallback

Use data-rm-else to ensure visitors always see content, even if they don't match any segment or if segmentation hasn't been calculated yet.

<!-- Good: Has a fallback -->
<div data-rm-if="seg_ABC">Premium content</div>
<div data-rm-else>Standard content</div>

<!-- Bad: No fallback means some visitors might see nothing -->
<div data-rm-if="seg_ABC">Premium content</div>

Use exact segment IDs

The attribute value must match the segment ID exactly. The script compares these values as strings, so seg_01K45ABC and Seg_01K45ABC are different.

Copy segment IDs directly from the RightMessage dashboard instead of typing them manually to avoid typos. Even a single character difference will cause the personalization to fail silently.

Keep elements the same size when possible

Since the script hides elements but reserves their space (using visibility: hidden initially), large size differences between conditional blocks can create awkward white space during the brief loading period. Try to keep your conditional content blocks similar in height and width.

Combine with the rmcloak class for above-the-fold content

If your personalized content appears above the fold, add the rmcloak class to prevent flash of original content:

<div class="hero-section rmcloak" data-rm-if="seg_01K45ABC">
  <h1>Personalized Headline</h1>
</div>

Learn more about preventing flash of original content with the rmcloak class.

When to use manual attributes vs. the visual editor

Use manual data-rm-* attributes when:

  • You're working with CMS templates or page builders where the visual editor is difficult to use

  • You need to personalize content that's generated dynamically or from a database

  • You want version control over your personalization logic (HTML in Git, etc.)

  • You're comfortable working with HTML and want precise control

  • You need to personalize many similar pages using template variables

Use the visual personalization editor when:

  • You want a point-and-click interface without touching code

  • You need to preview personalization changes before publishing

  • You're personalizing one-off pages rather than templates

  • You prefer selecting segments by name rather than copying IDs

  • Team members without HTML knowledge need to edit personalization

Troubleshooting

My personalized content never appears

Possible causes and solutions:

  • Wrong segment ID: Double-check that you've copied the exact segment ID from your Segment Group or Question. Remember to use the seg_ ID, not the human-readable segment name.

  • Elements aren't siblings: Verify that all conditional elements share the same parent in your HTML structure.

  • Visitor isn't in the segment: Use the RightMessage Debugger to confirm which segments the visitor belongs to.

  • Script not loaded: Check your browser's developer console (F12) for JavaScript errors and verify the RightMessage tracking script is in your <head> tag.

I see a flash of the wrong content before personalization applies

Solution: Add the rmcloak class to elements that appear above the fold. This class is automatically styled by the RightMessage snippet to hide content until personalization runs.

<div class="rmcloak" data-rm-if="seg_ABC">Content</div>

Content appears but leaves awkward white space

Cause: Your conditional blocks have significantly different heights, and the cloaking mechanism reserves space for hidden elements briefly during page load.

Solutions:

  • Make conditional blocks similar in size when possible

  • Add CSS to set a fixed height on the parent container

  • Position absolutely overlapping elements if sizes vary wildly

Elements aren't being recognized as a group

Cause: The RightMessage script only groups sibling elements together. If your elements have different parents or are separated by other elements, they won't be evaluated as a conditional group.

Solution: Restructure your HTML so all conditional elements are direct siblings:

<!-- Correct: All divs are siblings -->
<section>
  <div data-rm-if="seg_ABC">Content A</div>
  <div data-rm-else-if="seg_DEF">Content B</div>
  <div data-rm-else>Content C</div>
</section>

<!-- Incorrect: Elements have different parents -->
<section>
  <div class="wrapper">
    <div data-rm-if="seg_ABC">Content A</div>
  </div>
  <div class="other-wrapper">
    <div data-rm-else>Content B</div>
  </div>
</section>

Personalization works on some pages but not others

Possible causes:

  • Script not on every page: Ensure the RightMessage tracking script is in a global header template that loads on all pages

  • Single Page Application (SPA) issues: If you're using a framework like React or Vue, see our guide on using RightMessage with Single Page Applications

  • Different segment definitions: Some segments may only trigger on certain pages based on URL rules or page-specific data

Open your browser's developer tools (F12), go to the Console tab, and type window.RightMessage to verify the RightMessage object loaded. If it returns undefined, the script isn't loading correctly on that page.

Limitations

  • No complex logic in attributes: You can only specify one segment ID per attribute. You cannot use comma-separated lists, Boolean operators (AND/OR), or expressions.

  • No data-rm-unless: Unlike some conditional systems, RightMessage does not support a data-rm-unless attribute. Use data-rm-if with appropriate data-rm-else to express negative conditions.

  • Sibling requirement: All conditional elements must be siblings in the DOM. You cannot create conditional groups across different parent elements.

  • Requires Personalize plan: This feature only works with an active Personalize plan subscription. The Segment & Grow plan does not include website personalization.

  • Manual segment ID management: You must manually update segment IDs in your HTML if you rename or recreate segments in RightMessage.

  • Depends on script execution: If the RightMessage script fails to load (network issues, ad blockers, etc.), personalization won't apply and the cloaking CSS may be removed after a timeout.

Examples for common platforms

WordPress (with page builders)

Most WordPress page builders allow you to add custom HTML blocks or custom attributes:

  1. Add an HTML block or Custom HTML element

  2. Paste your conditional structure with data-rm-* attributes

  3. If your builder supports custom attributes, you can add data-rm-if directly to existing blocks instead

Webflow

  1. Select the element you want to personalize

  2. In the Settings panel, scroll to Custom Attributes

  3. Add a new attribute:

    • Name: data-rm-if

    • Value: seg_YOUR_SEGMENT_ID

  4. Duplicate the element for each conditional branch and update the attributes to data-rm-else-if or data-rm-else

  5. Publish your site

Shopify (Theme templates)

  1. Go to Online Store → Themes

  2. Click Actions → Edit code

  3. Open the template file for the page you want to personalize (usually in Sections or Templates)

  4. Find the element and add your data-rm-* attributes to the HTML

  5. Save the file

<div class="product-banner">
  <div data-rm-if="seg_WHOLESALE">
    <h2>Wholesale Pricing Available</h2>
    <p>Save 30% on bulk orders</p>
  </div>
  <div data-rm-else>
    <h2>Premium Quality Products</h2>
    <p>Shop our curated collection</p>
  </div>
</div>

Custom HTML / Static sites

If you're working with plain HTML files or a static site generator:

  1. Open your HTML file or template

  2. Add the conditional structure with data-rm-* attributes directly

  3. Ensure elements are siblings in the DOM

  4. Deploy your changes

Getting help

If you're having trouble getting manual personalization to work, gather this information before contacting support:

  • Your website URL and the specific page with the issue

  • The segment IDs you're using in your data-rm-* attributes

  • A code snippet showing your HTML structure

  • Screenshots from the RightMessage Debugger showing which segments the test visitor belongs to

  • Any JavaScript console errors (press F12, check the Console tab)

  • Confirmation that you have an active Personalize plan subscription

Email [email protected] with these details and we'll help you troubleshoot.

Was this helpful?