Personalize a "Hello Bar"-style top bar and get more subscribers and conversions
One of the best features of RightMessage is that existing content, or structures, on your website can be easily "recycled".
A common pattern our customers use is to have a top bar show up across their entire website, and have the contents of this top bar change (or even have the top bar hide) depending on where somebody is in their buying funnel.
Doing this is relatively straightforward, but will require some modifications to your overall template.
Step 1: Include a styled top bar in your site's template
Here's the code you can add right after the opening body tag:
You want to make sure this code is included across your entire site, so if it's a part of your site template that usually does it.
We're working on some new functionality that'll make it so you don't need to do Step 1!
Step 2: Choose a segment group to use to create your "top bar funnel"
For many, a Customer Lifecycle Stages segment group is often enough.
- Anonymous people should be asked to subscribe
- Subscribers should either not see the top bar, or be pushed to a particular product or offer
Create a new campaign targeting this segment group, or edit an existing campaign that's already using the segment group you want to use.
Step 3: Display the top bar when it makes sense to show it
The code included at the top of this article defaults the top bar to hidden. This means that before RightMessage has a chance to do anything with it, it won't be shown on your page.
If you intend on having subscribers or customers not see it, then you won't need to worry about setting up any new personalizations for those segments. You'll just want to work with your segment targeting anonymous people.
Because your top bar is hidden, we can't just use RightMessage's editor to visually select the element. So we need to get creative.
Choose any element on your page. Click on anything that has a pink box surrounding it when you hover over it. Start personalizing that element.
Now, toggle the "Affected elements" pane in the personalization panel and click "view / customize selector (advanced)"
Enter #topbar into the input box. This is because the ID of the element in the code linked previously is "topbar", so the CSS selector is #topbar.
(On our website, the element ID is "hellobar")
Now this personalization is targeting your hidden top bar.
Next we want to ensure that every page on your website is changed. To do this, toggle the "Affected pages" pane.
If you're editing your homepage, the input to the right of your domain won't have anything in it. Enter in a wildcard (*) to have this change match every page on your website.
Finally, let's show the top bar.
Under the "Visibility" configuration, select "Show".
Voila! The top bar should now be shown in your editor.
Step 4: Change the top bar's contents
If the content that was hidden in your top bar is what you wanted to show if someone is anonymous, then you have nothing else to do.
Otherwise, click on either the text and change or – or click the link, and modify the text and destination URL.
This pattern can be reused across multiple segments to create a fairly complex funnel:
- If anonymous, show the top bar and ask the visitor to join your list via a lead magnet.
- If subscriber but not a customer, get them to visit your entry-level product's sales page.
- If a customer of your entry level product, get them to visit your premium product's sales page.
- If a customer of your premium product, hide the top bar.
There's really no limit to what you can setup.
To recap, we've added a shell element to your sitewide template. Then, using RightMessage, we've contextually shown that element and changed its content. This allows us to easily setup a universal call-to-action that's sitewide, and changes the call-to-action depending upon where someone is in your customer lifecycle.