Styling (CSS selectors)

CSS selector reference for customizing the look and feel of Recurly Engage prompts.

Overview

Required plan

This feature or setting is available to all customers on any Recurly Engage subscription plan.

Prerequisites & limitations

  • You must have Company, App Administrator or App member permissions in Recurly Engage.
  • Familiarity with CSS and your site’s stylesheet.
  • Custom styles are loaded default Recurly Engage CSS. Please ensure your styles are specific enough to override the default style.

Definition

Prompt Styling refers to the customization of prompt elements—layout containers, text areas, buttons, and form controls—via CSS selectors.

Key benefits

  • Full branding control: Match prompts to your application’s design system.
  • Responsive tweaks: Adjust styles for desktop, mobile, and TV viewports.
  • Targeted overrides: Fine-tune individual prompt types without affecting others.

Key details

Quick reference

Use these core selectors to modify the default styling of any Redfast prompt.

SelectorDescription
.rfmodal-content-wrapperprompt area
.rfmodal-inner-wrapperprompt text content area
.rfmodal-backgroundimageprompt background image
.rfmodal-headerprompt title
.rfmodal-header-mobilewebprompt title (mobile)
.rfmodal-messageprompt message body
.rfmodal-message-mobilewebprompt message body (mobile)
.rfmodal-button-yesprimary accept button
.rfmodal-button-nosecondary button
.rfmodal-footerbutton area
.rfmodal-closedismiss button
.rfmodal-close-icondismiss button icon
.rf-radio-groupsurvey form options
.rf-radio-itemsurvey form line item

Full reference

Desktop | (Video(web), retention_modal(web), ios, android_os, tv_os, roku_os)

SelectorDescription
.rfmodal-content.outer-modalmodal
.rfmodal-backgroundimagebackground image or video for modal
.rfmodal-wrapper.inner-modallayout container

See Desktop Retention Message

Mobile | (Video(web), retention_modal(web), interstitial(web), ios, android_os, tv_os, roku_os)

SelectorDescription
.mobileFrameDisplaymodal
.mobileFrameInnerinner frame
See close buttoninterstitial only
.rfmodal-backgroundimagebackground image for modal
.mobileWebModalWrappermodal wrapper
.mobilewebModalContentWrappercontent wrapper
See close buttoneverything, except interstitial
.rfmodal-backgroundimagebackground video for modal
.videoPosterImgDefaultvideo poster
See TOSterms of service link
See Mobile header and bodyheader and body containers
See Inputinput fields container
See Survey inputsurvey options container
See Mobile footerbuttons and countdown wrapper

Mobile | (widget(web), bottom_banner(web))

SelectorDescription
.mweb-widget-containermodal
.mweb-phone-kit-bginner frame
.mweb-canvas-boundinner frame
.mweb-widget-wrapperlayout wrapper
.rfmodal-backgroundimagebackground image for modal
.mobilewebModalContentWrappercontent wrapper
See close buttonclose button
.mweb-widget-msg-containermessage wrapper
.mweb-widget-spacermessage spacer
.mweb-widget-content-colmmessage content
.rfmodal-footer-mobilewebbuttons and countdown wrapper
See Mobile footerbuttons and countdown wrapper

Desktop | (widget(web))

SelectorDescription
.modal-overlay-style.widget-rf-promomodal
.rf-widgetpromo-wrapperinner frame
.rfmodal-backgroundimagebackground image for modal
.rfmodal-wrappercontent wrapper
See Desktop Retention Message

Desktop | (interstitial(web))

SelectorDescription
.modal-overlay-style.interstitialModalmodal
See close button
.rfmodal-content.outer-modalouter modal
.rfmodal-wrapper.inner-modalinner modal
See Desktop Retention Message

Desktop | (text)

SelectorDescription
.promo-text-wrapperprompt text
See close button
.promo-text-wrapper-containertext container
.promo-text-titletext title
.promo-text-messagetext message

Mobile | (text)

SelectorDescription
.promo-text-wrapper-mobileprompt text
See close button
.promo-text-wrapper-containertext container
.promo-text-titletext title
.promo-text-messagetext message

Desktop | (horizontal, tile, vertical)

SelectorDescription
.promo-tile-wrapperprompt tile
See close button
.promo-tile-backgroundimagebackground image
.promo-tile-wrapper-containeralignment class
.tile-header-msg-wrpmessage wrapper
Promo Content

Mobile | (horizontal, tile, vertical)

SelectorDescription
.rtile-mweb-content-wrapperprompt tile
.rtile-mweb-contentcontent wrapper
.rfmodal-backgroundimagebackground image
.rtile-mweb-content-msgmessage wrapper
Promo Content

Desktop, Mobile | (email)

SelectorDescription
.pr-email-logoLogo
.pr-email-wrapperemail content wrapper
.pr-email-containeremail content container
.pr-email-imageemail image
.pr-email-msgemail message container
.pr-email-msg-titleemail message title
.pr-email-msg-bodyemail message body
.pr-email-btnemail buttons wrapper
See Input
See Buttons promo
.pr-email-footeremail footer (links)

Desktop | (bottom_banner)

SelectorDescription
.modal-overlay-style.banner-rf-promobanner
.rfmodal-content.rf-bannerpromo-wrapperlayout wrapper
.rfmodal-backgroundimagebackground image
.rfmodal-wrappercontent wrapper
See Desktop Retention Message

Basic components

Buttons

SelectorDescription
.rfmodal-button-yes.primary-btn-pprimary confirm button
.rfmodal-button-yes.secondary-btn-psecondary confirm button
.rfmodal-button-nono button

Tile buttons

SelectorDescription
.promo-tile-wrapper-btn-acceptprimary tile button
.promo-tile-wrapper-btn-accept.btn-ac-2secondary tile button
.promo-tile-wrapper-btn-nono button

Survey input

SelectorDescription
.survey-wrapper(.center-align-mode)survey wrapper (alignment)
.survey-wrapper(.right-align-mode)survey wrapper (alignment)
.rf-radio-groupradio buttons wrapper
.rf-radio-itemradio item wrapper

Input

SelectorDescription
.rfmodal-input-wrapperinput container
.rfmodal-input-labellabel for input
.rfmodal-input-inputfieldinput field

Close button

SelectorDescription
.rfmodal-closemodal close button
#rfmodal-close-iconmodal close icon

TOS

SelectorDescription
.modal-privacy-tosTOS

Mobile header and body

SelectorDescription
.rfmodal-header-mobilewebcontent header
.rfmodal-body-mobilewebcontent body
.rfmodal-message-mobilewebcontent

Mobile footer

SelectorDescription
.rfmodal-footer-mobilewebbuttons and countdown wrapper
.rfmodal-countdowncountdown label

Desktop retention message

SelectorDescription
See close button
.video-volume-controlvolume button (video only)
.rfmodal-inner-wrappercontent container
.rfmodal-content-wrapper(.b-left-align)alignment class (left)
.rfmodal-content-wrapper(.b-right-align)alignment class (right)
.rfmodal-text-containercontent container
See TOS
.rfmodal-headercontent header
.rfmodal-bodycontent body
.rfmodal-messagecontent
See Input
See Survey input
.rfmodal-footerfooter container
.rf-button-wrapperbuttons and countdown wrapper
.rf-buttons-innerbutton wrapper
.rfmodal-countdowncountdown label (desktop/mobile)

Prompt content

SelectorDescription
.promo-tile-wrapper-headermessage header
.promo-tile-wrapper-bodymessage body
.promo-tile-wrapper-footermessage footer
.promo-tile-wrapper-btnbuttons wrapper
See Input
See Buttons promo

Fine tuning

While Redfast works out of the box, your customer experience can be further improved. See the Fine Tuning guide for advanced positioning and performance optimizations.

Tools and resources

Recurly Engage provides:

  1. Live Tool and Live Preview for style testing.
  2. Custom CSS overrides and HTML enhancements.
  3. Direct support from the Recurly technical team.