Using the Visual Personalization Editor

Our Visual Personalization Editor is used to materially change content on your website when a visitor with the right segmentation visits.

This is a powerful, point-and-click way to deliver fully personalized experiences on your website with zero coding required.

Using the Visual Personalization Editor

The control bar

At the top of the editor is the control bar. This shows you:

The campaign you’re editing (and whether it’s active)

There’s also a dropdown list of all the segments within the campaign’s Segment Group. When you select a segment, any changes you make (i.e. changing some text) will apply to that segment only. Additionally, any existing changes that have been made for this segment will be shown in browser area of the editor.

Personalization’s that have been created for this campaign are accessible via the dropdown. You’ll generally be accessing personalizations you’ve already created by just clicking on them in the browser. But, sometimes, you might have personalizations that target invisible elements on the screen (for example, a hidden webinar registration form that you want to only show if the visitor is a returning lead,) and in those instances having access to a list of all your personalizations is a must.

The website navigator

Personalization campaigns can span across multiple pages, or even multiple websites – assuming these pages all have your unique tracking script installed.

Simply enter the page you want to personalize in our URL bar, just like you would in a web browser. RightMessage will load this page, and any personalizations you add to this page will default to just affecting the page you’re on.

If you enable Navigate Mode, clicking links or buttons within the browser won’t try to personalize them, but will instead use those links and buttons to move you around your website (just like the usually do.) This is especially helpful if you want to quickly move through your website and see how it looks for a particular segment.

The website browser

Within the browser, you’ll see your website.

Click on any content you see – headlines, images, container elements, and more – and you’ll be able to change the content or look of that content for the segment you’ve selected.

When you hover over content, you’ll see a pink shaded area appear over it. This indicates the content that would be changed if you click on that shaded area and choose “Start personalizing”.

After you’ve successfully created a personalization for a block of content, you’ll now see a blue outline appear over it. Simply click any existing blue outline and select “View personalization” to make future changes.

Whenever you’re editing a personalization, the content that’s being affected will be highlighted with a blue shaded area.

One thing to note about adding a personalization… when you add a personalization, you’re adding it to the campaign – NOT just to the segment.

Take, for example, personalizing the headline of your homepage.

The first time you personalize it, the changes you make will apply to this headline for this currently selected segment. But the personalization spans across all your other segments – it just isn’t “activated”, meaning there are no changes taking place, yet for your other segments.

We want you to be able to quickly make changes across a range of segments quickly. By architecting our personalizations as defined above, you can rapid-fire go through all your segments and make changes (i.e. “Hello, marketer!” and “Hello, developer!”, etc.)

Making changes

When you create or access an existing personalization, a floating window will appear that lets you:

• Add segment-specific modifications (like changing text, or hiding it)
• Configure what pages this personalization applies to
• Configure the elements this personalization targets

Segment-specific modifications

Depending on the type of element your personalization targets, the options you see within the first accordion tab of the floating window will change.

Available options include:

• Destination URL: Enter a URL to change the destination a link element will direct visitors to.
• Text: Enter text to customize the displayed content.
• Visibility: Use the drop down to specify how the element will display on the page. You can choose to show or hide the element or leave the element unmodified.
• CSS classes: Add or remove CSS classes.
• Additional styles: Enter a CSS ‘property’ and ‘value’ to adjust the look of an element. Add a new row(s) to make multiple design changes.
• Image URL: Enter a URL to change the image displayed in an image element.

Options that are blue already have a personalization in effect for the currently selected segment. Making any changes here would have you edit an existing change, whereas editing a white option would effectively be creating new changes for that segment/personalization option combination for the first time.

This makes it super easy to figure out what changes are currently in effect for a given segment while switching through multiple segments.

Pages affected by a personalization

When you create a new personalization, RightMessage will default this personalization to only target the page you’re currently editing.

To add additional pages, simply click the + icon to add another page targeting row.

You can also use wildcards to target a bunch of pages at once. For example, entering * as the value would cover every page on your website. And /blog/* would apply to every blog post.

Elements targeted by a personalization

A personalization targets a specific page (or pages – see above) and it also targets a specific element, or set of elements, on the pages that it’s eligible to run on.

By default, if you click some content on a web page to personalize, RightMessage is going to try to come up with what’s called a unique CSS selector for the thing you selected.

For example, this might end up being ul li:nth-of-type(3), which is a fancy way of saying: “In the only list we could on this page, find the 3rd bullet point. That’s what we’ll be personalizing.”

This can problematic, however. If you end up adding a second list (ul) to the page being personalized without updating the CSS selector in RightMessage, both of your lists will now have their 3rd item personalized!

After you’ve created a personalization, you can see the CSS selector we came up with by clicking on view / customize selector (advanced)

But, most of the time, you’re not going to need to worry about it. Especially if your web developer has added plenty of unique IDs and classes to your website’s code.

But if you need to ever change what element a specific personalization affects, simply choose pick a different element. Then select the element you need changed. In the above example of the two lists, after introducing that second list to your page you could use this functionality to _re_select the 3rd item from the list you want to personalize, which would then fix the problem.

You can also easily select multiple elements for a personalization to target. Imagine you have two images, one at the top of the page and another at the bottom. These are the same images. You could create two different personalizations, one for each image, and go through and set up two sets of personalizations for each segment… or you could use our editor to select BOTH images.

To do this, select add extra elements and click on whatever other elements this personalization should target. Once you’re wrapped up, click Done.