How to show & hide elements | RightMessage

How to show & hide elements

As well as using the personalization area in RightMessage to change the way an element appears on a page, you can select elements to show or hide, based on how the element would normally appear on the website being personalized.

Below are just some examples of where you may want to show or hide an element

  • Hiding Opt In Forms for already existing subscribers

  • Hide CTA (call to action) buttons and links for existing customers and subscribers

  • Hide menu items for non-members

  • Show notifications to members and subscribers only.

  • Show content for visitors that have come from a specific website (Facebook Advert).

Locating an element to personalize

To start personalizing an element for your campaign, hover over the website and use the pink outline feature to locate the element you want to personalize.

The outline feature will specify the type of element you are hovering over - such as a link, headline, paragraph, list item, image or other type of element.

Click on the highlighted element you want to personalize. A box will show under the element with an option to personalize the element or cancel the selection.

Click the option to ‘Start Personalizing This …’

Using the ‘visibility’ settings.

To make changes to either hide or show an element, the RightMessage personalization editing tool has a ‘Visibility’ settings area.

To locate the settings, in the personalization editing tool, click the arrow toggle beside ‘Visibility’.


In the ‘Visibility’ settings a drop down is provided. Select the option that you want to apply to the element..


  1. Don’t Modify: (default) RightMessage will leave the element as it appears by default on the website.

  2. Show: RightMessage will force the element to be shown to website visitors matching the conditions in the selected segment (even if the website is hiding the element to begin with)

  3. Hide: RightMessage will force the element to be hidden (even if the website has it shown to begin with).

Examples

Hiding an element

For the CTA button that is visible on the website home page in the below example, we want to hide the ‘Find Out More’ button for a specific segment.

In the ‘Visibility’ settings, change the visibility to ‘Hide’. You will need to repeat this for each segment you want to hide the element from.

For the segment where we want to show the button, leave the visibility as ‘Don’t Modify’, or set it to ‘Show’. Either option will do the same thing if the button is already shown by default.

Show an element

If the ‘Find Out More’ button is hidden on the website by default, and we want to just show it for the ‘Anonymous’ segment then we would set the visibility to ’Show’ for that segment.

Tip: To hide an element on your site, add an ‘inline style’ parameter to the HTML element in question. In the style attribute, set the ‘display’ CSS property to the value of  ‘none’. Alternatively, if you prefer and are comfortable with adding code in website files, you can add a CSS rule to the style.css file.


As the button is hidden, you won’t be able to select the button using the highlight tool in the website preview pane.

Click on any element on the page and select to personalize it.

In the ‘Affected Elements’ section of the personalization editing tool, click ‘View / Customize Selector’ and adjust the selector in the field provided, to the selector of the hidden element.

If you have added the correct selector, the ‘Affected Element’ will show you have matched an element on your site, even though the blue highlight lines won’t show in the website preview pane.


In the ‘Visibility’ settings, change the visibility to Show’. The element will now appear in the website preview pane.


Leave the other segments for that element as ‘Don't Modify’ or ‘Hide’. Either option will do the same thing if the button is already hidden by default.