Customize widget CSS
You'll find the widget CSS editor, its selector aliases, and the scoping rules you need to keep custom styles on the intended widget.
Use Custom CSS to change parts of your widget that the built-in design controls don't cover. You'll need project edit access and familiarity with CSS selectors and how the browser applies competing styles.
Find the CSS editor
Open your widget from Widgets, select Design, then expand Advanced. Add your rules in Custom CSS, with a selector that limits each rule to the intended widget.
Selector aliases
The editor has these selector chips:
| If you'd like to style… | Alias |
|---|---|
| The widget container | .widget |
| The visible step's headline | .title |
| The visible step's description | .description |
| The main step content | .container |
| Question answer buttons and the Next button in an input question | .answerButton |
| The button inside an offer or form | .submitButton |
| Form inputs, but not every composite question control | .inputField |
For a single headline adjustment, you can use the editor's alias:
RightMessage translates supported aliases into widget selectors. It doesn't automatically isolate arbitrary CSS from the rest of your page.
Limits of selector aliases
The current runtime replaces only the first occurrence of each alias. If you repeat .title in another rule or a media query, the later occurrence won't reliably stay scoped to the widget. The .answerButton alias also expands to a selector list whose second selector lacks the same widget prefix.
Use the built-in controls where you can. For larger stylesheets or rules affecting several widgets, don't rely on aliases to isolate them. Add the intended widget's scope to every selector and check the page. These limits don't require you to change your site's global CSS.
Keep styles on one widget
Your widget ID appears in its editor URL and in the manual trigger instructions. RightMessage adds a class with rm- followed by that ID.
For the example widget ID wdg_12345678, this rule changes only its headline:
Replace the example ID with your own. In a comma-separated selector list, repeat the prefix on every selector. A prefix on the first selector doesn't scope the rest.
Avoid bare rules such as button { ... } or input { ... }, which can change unrelated website controls. To hide a required field or change validation, use the form settings instead of CSS.
A duplicated widget gets a new ID. Review any copied CSS that names the original ID. Raw runtime classes depend on the rendered markup more than the built-in controls do, so check them again after design changes.
Check the styles on your website
CSS edits can update the editor preview without rebuilding the whole flow. Your website can have other stylesheets that change how the widget looks.
Check the full-size widget on desktop and phone, in light and dark modes. Then use Preview on your site to try it with your website's actual fonts, headers, and CSS. The debugger shows what RightMessage is displaying while you check the page. Publish your changes when the complete project draft is ready.
If the widget is clipped, hidden, or in the wrong position, use widget troubleshooting on the affected page. Adding a large z-index or !important everywhere can hide the cause instead of fixing it.