Creating and designing widgets

Widgets are how you display questions, forms or offers from Flow visitor journeys to your website.

We provide a number of widget types, along with different widget themes, that you can use to start with. Each widget can also be further configured to match your brand.

Available widgets

RightMessage includes a number of different widget types:

Bar

This widget will add a bar to either the top or bottom of your website.

Toaster

This widget will add a “toaster” that pops up (see what we did there?) from the bottom-right or bottom-left of your website.

Embedded

This widget will replace existing a placeholder on your website.

The embedded widget is special. Unlike the rest of our widgets, we aren’t just overlaying this widget on top of your existing content – instead, it’s mixed in to your website’s content. This makes it great for things like adding offers or opt-in forms directly beneath each of your blog posts.

When creating an embedded widget, in the Embed Code Shortname  field enter in an internal name for this widget (no spaces or weird characters, please!) This will give you HTML like <div class="rm-area-after-blog-post"></div> that you can then add anywhere to your website. When found, we’ll add the current question or offer inside.

If you’re using our WordPress plugin, we can optionally automatically add an embedded widget after your posts.

Alternative: Output the widget ID directly

If you're not sure how to add custom HTML blocks to your website, or if your platform (like Wix) doesn't support custom HTML, you can simply output the widget ID directly to your page.

For example, if your widget ID is wdg_abc123, you can add that text anywhere on your page and RightMessage will automatically replace it with the widget.

Full-screen takeover

This widget will take over the entire web page and display a question or an offer.

This is useful for setting up dedicated pages that are used to segment visitors. Spin up a new page (what’s on it doesn’t matter), and then target a full-screen takeover to show on just this page. Now just drive your email list to this page.

Popup

Popups can be triggered manually (i.e. by clicking a button), as an exit popup, or immediately when the page has loaded.

Widget visibility

You can change the visibility of the widget (to show only on specific pages OR to hide it on specific pages (or both!))

The values for each can also include a wildcard (* ), so /blog/*  added to Only show this widget on specific pages  would cause the widget to only appear on your blog.

Widget behavior

Dismiss behavior (Toaster only)

For Toaster widgets, you can control how visitors dismiss the widget using the X button.

In the Visibility tab, you'll find a "Dismiss Behavior" setting with two options:

• Dismiss immediately: The widget is permanently dismissed with a single click of the X button.

• Minimize first, then dismiss: The first click minimizes the widget (temporarily hides it for the current session). A second click of the X button (if the widget is triggered again) permanently dismisses it.

This setting works alongside your Dismiss Rule, which controls how long the widget stays dismissed (for the session, for a specific duration, or forever).

If you want visitors to be able to quickly close your Toaster without seeing it again, use "Dismiss immediately" with a "Forever" dismiss rule.

Trigger condition

Depending on the widget, there are various trigger options that can be attached to a widget.

These often include scroll percents, time on site, exit intent, and so on.

By default, flows always start from the beginning, even if someone has answered questions before. You can enable "Skip known questions" to let returning visitors skip questions they've already answered and jump to the first unanswered question or offer.

You can also choose whether questions should be shown at all, or if the widget should skip straight to the first offer or form found.

Additionally, you can activate the "Back" button so visitors can go back if they chose an answer incorrectly.

Pages to trigger on

Here you can set up whitelists and blacklists of pages that this widget should (or should not) appear on.

Widget design

From the Design tab, you can change the structure, typography and colors of the widget.

Typography

A RightMessage widget will either inherit the current font (as determined by your page’s CSS) or you can specificy a Google Font that we should load and use for this widget.

Colors

You can also set the various colors used for a widget:

• Background: The background color of the widget. To set it as transparent, edit the color and enter FFFFFF00  for the Hex color.

• Text on background: The color we’ll use for question and offer headlines and description text.

• Button color: The color we’ll use for buttons.

• Text on buttons: The color we’ll use for button text.

• Border color: the color we'll use for the border of the widget.

Additionally, you can totally customize a widget using CSS. Here’s a guide we’ve put together on how to do this.

Previewing questions and offers within a widget

When editing a widget, you’ll see a preview of how this widget will render the various question and offer nodes you’ve added to the Flow.

To do this, toggle between the nodes you’ve added to your funnel (using the “Previewing…” dropdown.)

Disabling or renaming a widget

In the header, you can rename a widget or disable it.

If you do disable it, note that a Flow will only ever “show” to visitors if at least one widget is both enabled and available on the pages they’re viewing!

For more information on how this all works, check out our section on publishing.