Customizing widgets

Any RightMessage widget can be fully customized using CSS.

Do you know CSS?

Ultimately, RightMessage is adding new elements to your existing website. These elements, like anything on your website, can be targeted and modified using CSS.

The following guide assumes you have some familiarity with how CSS works in web browsers! If you’re not sure what CSS you need to add, our friendly support team is happy to help you out.

How custom CSS works with RightMessage

When editing any widget in RightMessage, you’ll find a textarea where you can enter arbitrary CSS code.

RightMessage will interpolate whatever you enter into this textarea and add it directly to your widget’s stylesheet.

Example of a custom styled RightMessage widget

It’s important to note that the CSS styles you add to a widget are accessible to the entire webpage – this means that what you enter can “spill over” and possibly affect other content on your website.

To mitigate this, we recommend that you follow the best-practices we’ve outlined below.

The elements of a widget you’re able to target

We’ve created a few helper CSS classes that you’re able to use.

At runtime, we’ll convert these helper classes into scoped elements that will only target the widget you’re editing. This means that if you’re managing a handful of distinct RightMessage widgets across your website, you won’t need to worry about accidentally affecting any of those when you use our helper classes.

.widget {
 // this is the top-level widget itself, i.e. the
 // element that has the dropshadow (for "toaster" widgets)

.container {
 // this is the container that all elements of a widget are
 // rendered within. If you wanted to affect padding, target
 // this element.

.title {
  // this is the question text, or the headline for an offer
  // or form

.description {
  // this is the text underneath the headline within an offer
  // or form

.answerButton {
  // this are the buttons for submitting an answer to a
  // question

.formField {
  // this is the container that wraps each form field
  // within an offer form

.formInput {
  // this is the form input fields

.submitButton {
  // this is the button element that submits an offer or form

In order to ensure that all styles you enter are honored, RightMessage automatically adds !important to your inputted style definitions. This means that the styles you enter here should always take precedence, despite the RightMessage theme you’re using or any of your website’s existing styles.

Changing RightMessage’s styling from outside of RightMessage

Sometimes you might want to override RightMessage’s styling from outside of RightMessage. Here’s how you’d do that:

Golden rule 1: use !important

Add !important to each of your CSS declarations.

For example, instead of text-align: left; use text-align: left !important;

Golden rule 2: use selector prefixes

Include a specific selector for which type of widget you want to target, as a prefix for your CSS selectors. For example, if you want to target the title of the widget, instead of using

div.rm-title {
    /* your CSS declarations here */


div.rm-widget.rm-inline div.rm-title {
    /* your CSS declarations here */

If you want to target the widget element itself, rather than specific elements within a widget (like the title), just use the prefix part on its own, e.g.:

div.rm-widget.rm-inline {
    /* your CSS declarations here */

And if you want to target the widget and everything inside it (useful for e.g. setting the font family for the entire widget), use:

div.rm-widget.rm-inline, div.rm-widget.rm-inline * {
    /* your CSS declarations here */

Target different widget types

All of the examples so far would target all embedded (inline) widgets on the page. But you can instead swap the .rm-inline part for:

.rm-bar to target all bar widgets on the page
.rm-toaster to target all toaster on the page
.rm-modal to target all popup (modal) widgets on the page
.rm-takeover to target all full-screen takeover widgets on the page
.rm-widget to target all widgets on the page, no matter which type
.rm-wdg_xxxxxxxx to target one specific widget
Determining a widget's ID

To target a specific widget, you’re going to need to know its ID.

Swap the “xxxxxxxx” above for the ID of the widget you want to target. You can find this in the URL bar in RightMessage when you’re editing the widget. It’s always wdg followed by 8 letters or numbers.

Next up

Manually triggering widgets

As well as automatic triggers (exit intent, scrolling, on page load, etc.), you can also have your popups or other widgets appear when a visitor to your site clicks a certain button or link.