How the point-and-click personalization selector works

What you'll learn

This guide explains how RightMessage selects and targets elements when you use the point-and-click editor to personalize your website. You'll learn which types of selectors are stable versus brittle, and how to avoid broken personalizations when your site content changes.

How the selector engine works

When you click an element in the personalization editor, RightMessage generates a CSS selector to find that element when visitors load your page. The engine follows a prioritization algorithm to create the most stable selector possible:

1. Unique ID first – If the element has a unique ID attribute (like id="hero-headline"), RightMessage uses that. This is the most stable option.

2. Tag + classes second – If no unique ID exists, the engine combines the HTML tag with all classes (like h2.headline.primary).

3. Position-based fallback – When neither option produces a unique match, the selector adds positional indicators like :nth-of-type(2). This is brittle and may break if your page structure changes.

Using the point-and-click editor

To personalize an element with the visual selector:

1. In your campaign or variant, click Add Action and choose Modify Element.

2. Enter the target URL where the element appears. The editor opens an iframe preview of your page.

3. Hover over elements on the page. Eligible elements (headlines, buttons, paragraphs) highlight with a blue outline.

4. Click the element you want to personalize. The selector preview shows which CSS selector will be used.

5. Confirm the selector, then edit the text or styles for that element.

6. Preview your changes and publish when ready.

Why brittle selectors break

Position-based selectors rely on the exact structure of your HTML. If you make changes to your site from your CMS—like adding a new paragraph, reordering sections, or changing templates—the selector may no longer point to the correct element.

For example, if your selector is div:nth-of-type(3) > p:nth-of-type(2), it targets "the second paragraph inside the third div." If you add another div before it, the personalization breaks because the element is now in the fourth div.

How to create stable selectors

The best way to prevent broken personalizations is to add unique IDs or CSS classes to the elements you want to personalize before using the editor.

Add unique IDs to critical elements

In your site's HTML or page builder, add an id attribute to elements you plan to personalize:

<h1 id="homepage-headline">Welcome to our site</h1>
<button id="cta-button-primary">Get Started</button>

When you select these elements in the editor, RightMessage will use #homepage-headline and #cta-button-primary as selectors. These won't break even if you rearrange your page.

Use descriptive CSS classes

If IDs aren't practical, apply unique class names to your personalization targets:

<p class="intro-paragraph personalize-target">Your content here</p>

The selector becomes p.intro-paragraph.personalize-target, which is stable as long as you don't remove those classes.

Test after site updates

After making changes to your site—especially template updates, new sections, or structural reorganization—verify your personalizations still work:

1. Visit your personalized pages with ?debug=true appended to the URL.

2. Open the Personalization tab in the debugger to see which selectors are active.

3. Confirm each selector finds its target element. If a personalization isn't showing, the selector likely broke.

4. Return to the campaign editor and re-select the element to generate a fresh selector.

What to do when selectors break

If your personalization stops showing after a site change:

1. Use the debugger – Add ?debug=true to your URL and check the Personalization tab. This shows whether the selector is finding the element.

2. Re-select the element – Open the campaign editor, edit the "Modify Element" action, and click the element again to generate a new selector.

3. Add IDs or classes – Update your HTML to include unique identifiers for personalization targets, then re-select them in the editor.

Common pitfalls

• Selecting elements inside carousels or sliders – Positional selectors break when slides rotate or reorder.

• Personalizing autogenerated content – Blog post teasers, product listings, or feeds often lack unique IDs and use nth-child selectors that break when new items are added.

• Testing only once – Selectors may work initially but fail after your next CMS update. Re-test after every site change.

• Assuming failures are obvious – Broken selectors fail silently. Visitors see the default content without errors, so you won't know unless you actively check.