Setting up RightBar for your website
The RightBar feature in RightMessage is used to add a 'welcome bar' to the top of a website, and be personalized for the different stages of your customers lifecycle.
You can set up the RightBar feature for each individual website within your account, from your RightMessage admin area.
Follow the steps below to set up RightBar within RightMessage.
- Installing the RightBar tracking script
- Integrate RightBar with an email marketing service (ESP)
- Select your business type
- Customize the RightBar text and CTA URL location
- Define the conditions for each of your segments
- Define the style of the RightBar
- Select where RightBar will display on your website
Navigate to 'RightBar' in your RightMessage admin area
Log into your RightMessage account.
Step one: Installing the RightMessage tracking script
To connect RightBar with your website, you will need to install the RightMessage tracking snippet into the header area of your website.
All you need to do is copy and paste the tracking snippet into your website’s template page so it appears before the closing </head> tag on every page of your website.
We've created individual guides for how to install the RightMessage tracking script into various different websites. Click on a link below to view the guide for your specific website setup.
User Guides: How To Install The RightMessage Script On Your Website
Below are step-by-step instructions to install the RightMessage tracking script on different types of websites.
Step two: Integrate RightBar with an email marketing service (ESP)
If you have not used RightBar before, you will be prompted to integrate your account with one of the available email service providers (ESP/CRM).
Click the yellow 'Go To Integrations' button.
If you do not use one of the ESP's currently integrated with RightBar, click the 'Maybe Later' link.
Select one of the available email marketing service providers to use with RightBar.
We have guides on how to set up each of the available services in RightMessage here.
Once you have integrated one of the available ESP's, navigate back to the RightBar dashboard.
A set up 'wizard' will now display in the dashboard area to direct you though each step of the set up process.
Step three: Select your business type
To set up a segment with the appropriate lifecycle stages for your business, click on one of the business type options that best fits the type of business you have.
Click the pink 'Save &Continue' button to continue to the next step.
Step four: Customize the RightBar text and CTA URL location
In the next step you will be presented with a preview RightBar for each of the individual segments in the customer lifecycle for the business type selected.
A set of options will display for each RightBar preview. Complete the set up for each preview that you intend to use.
- Toggle to deselect the segments you don’t want to create.
- Click the RightBar message text to edit.
- Click the button to edit the button text and the URL destination.
Edit the RightBar message text
To edit the message shown in the RightBar, hover over the text and click to open the text editor.
Add the text you want to show and click 'Update'.
- Click to edit the message text.
- Add a new message.
- Click 'Update' to save the new message.
Edit the RightBar button text and destination URL
To edit the text shown in the RightBar button, and specify the destination the button links to, hover over the button and click to open the editor.
Add the URL the button will redirect to, and the button text, and click 'Update'.
An icon at the top of the box will open a new browser window and display the URL added to the URL field.
- Click to edit the button text and destination URL.
- Click to open a new window and see the URL the button directs to (add a URL to the URL field first!).
- Add the URL of the destination the button will link to.
- Add the new button text.
- Click 'Update' to save the button changes.
Repeat the above for each of the segments you are using for your business.
If there is a segment that does not fit with your customer lifecycle, toggle the green button to deselect the segment.
Once you have completed the set up of your RightBar variations, click the pink 'Save & Continue' button.
Step five: Define the conditions for each of your segments
In the next step, the customer lifecycle segments created in the previous step, will display and allow you to add or edit the conditions that help qualify which RightBar will show to a visitor viewing your website.
You can set up as many conditions within each of the segments as you like.
Click each box to display the conditions for a segment and make any adjustments necessary.
Edit the segment name
To edit the segment name, hover over the name in the segment box and click the 'Click to rename' button.
Edit the segment name and click the yellow 'Save' button once done.
Edit the existing conditions of a segment
- Use the drop down to change the existing condition assigned to the segment
- Click to add conditions that further qualify a visitor into the segment.
- Click to add conditions that offer different options to quality a visitor into the segment.
Note: when using the 'AND' to add conditions, visitors must meet both conditions to qualify for that segment. If you want a visitor to meet one of the conditions, use the 'Or' option.
Open each of the segments and review the conditions.
Add conditions to a segment
Segments that are not automatically set up as 'subscriber' or 'anonymous' will require conditions to be added to them.
Use the drop down to select a condition type that will define the segment.
Depending on the condition type, different fields will automatically display for you to define the values of the condition.
The different segment conditions
There are 5 types of conditions that can be added to a segment in order for Rightbar to display to a specific visitor:
Delete a condition from a segment
If you need to remove a condition(s) from a segment, click the 'x' icon to the right of the condition.
Save the segments
Once you have adjusted your segments, and added a condition for each one, click the pink 'Save & Continue' button.
Step six: Define the style of the RightBar
The next step of the RightBar setup, options are provided to adjust the style of the RightBar and show the RightBar branding.
Adjust the RightBar colors
Use the color pickers to change the background color of the RightBar and button, as well as the message and button text.
Note: The options available will style all versions of the RightBar. At this time it is not possible to style the RightBar on a segment-by-segment basis.
Click on each of the color codes to display a color picker box.
- Click in the color pick area to select a variation of the current color.
- Use the color bar to select a color, or add a color code value to the fields available - add either a Hex or RGB value.
- Select a predefined color.
- Click the droplet icon to select a color from the website in the preview pane.
- Click outside of the color picker area to close it.
Add or remove the RightBar branding
By default branding will be added to the RightBar.
To remove the branding, click the toggle beside 'Hide Branding'.
Position where RightBar will display
By default RightBar will be shown at the top of your website page(s).
To move RightBar so it appears at the bottom of your website, click the dropdown beside 'Placement'.
Animate the RightBar CTA Button
It is possible to animate the button in RightBar so it 'pulses'. You can adjust the 'Animation' settings to pulse the button after a certain percentage of the page is scrolled, or at a set time interval.
Below is an example of the 'pulsing' animation
Use the drop down beside 'Button animation trigger' to set your preference.
Save the style options
Once you have adjusted the styling and branding options for the RightBar, click the pink 'Save & Continue' button.
To remove the RightBar branding, you will need to upgrade to one of the RightMessage premium plans.
Step seven: Select where RightBar will display on your website
By default RightBar will display on all pages of your website, excluding the pages of the URL destinations added to the RightBar button.
To adjust the pages where RightBar will appear, click the 'Or show more RightBar settings' button.
Visibility options are available to allow you to either show or hide RightBar on specific pages, and options for when RightBar will be triggered to show.
Step seven: Publish RightBar to your website
To activate RightBar and publish it to your website, click the 'Publish' button.
A success message will display on the screen to advise that RightBar has been published
And you are done!