Contents x
    Custom CSS Overview
    • 14 Jul 2020
    • 2 Minutes to read
    • Contributors
    • Print
    • Dark
      Light
    • PDF
    Contents

    Custom CSS Overview

    • Updated on 14 Jul 2020
    • 2 Minutes to read
    • Contributors
    • Print
    • Dark
      Light
    • PDF
    Article summary

    We know that for a lot of our users, online brand consistency is crucial. That's why we've added a Custom CSS Feature to RetentionEngine. Follow along using the table contents below:

    1. How it Works
    2. List of Customizable Elements
    3. Custom CSS Examples

    This is a new feature, so please reach out to our team if you need any assistance or have suggestions for improvement.

    How it Works

    To navigate to the Custom CSS editor, go to the Style Editor Tab and scroll down until you see the "Custom CSS editor" link.

    Frame 10(1)

    Once you're in the Custom CSS editor, take note of the following:

    1. Screen selection dropdown: Use this to navigate from screen to screen while editing to see how your styling changes will be applied to your Cancel Flow elements.
    2. Text Area: Add your CSS according to the classes that follow in this document.
    3. Experience Preview: Clicking on it produces no actions. It is only used for preview purposes.
    4. Save Changes: When you want to save your changes make sure to hit the save button.

    Group 313(1)

    Customizable Elemements

    The following is a list of the customizable elements, their description, and the locations of the cancel flow the styling will be applied.

    If there are other elements you would to customize, contact our support team!

    ElementDescriptionLocation
    .accept-buttonButton used when a Cancel Resolution is shown, on the Confirm Cancel screen and on the Exit ExperienceCancel Resolution Cancel Confirm Customer Save Customer Lost
    .response-buttonButton used to select an Exit Survey Response and a Pause OptionExit Survey Pause Options
    .other-reason-buttonThe submit button for Other Reason fieldOther Reason
    .header-textThe main header text on Exit SurveyExit Survey
    .header-backgroundThe background behind main header textExit Survey
    .footer-wrapperThe bottom footerThe navigation link in footer navigation
    .footer-nav-buttonThe navigation link in the footerExit Survey Cancel Resolution Pause Options
    .exit-survey-logoYour company logoExit Survey
    .announcement-bannerAnnouncement banner displayed on Exit SurveyExit Survey
    .exit-survey-buttons-wrapperUsed to edit Exit Survey buttons without affecting Pause Options buttons.Exit Survey
    .bottom-content-containerThe area on bottom half of screen with a white backgroundExit Survey Cancel Resolution Pause Options
    .other-reason-textareaText area for the Other Reason fieldOther Reason
    .spotlight-imageThe image shown with a Cancel Resolution.Cancel Resolution
    .spotlight-textThe text box shown on a Cancel Resolution (without an image). Best results when used along with .spotlight-containerCancel Resolution
    .offer-bottom-titleThe title under the Spotlight sectionCancel Resolution
    .offer-descriptionThe description text under the Spotlight sectionCancel Resolution
    .pause-bottom-titleTitle text above the Pause Options buttonsPause Options
    .pause-disclaimer-textPause disclaimer text under the Pause Options buttonsPause Options
    .end-screen-titleTitle text on final experience screensCancel Confirm Customer Lost Customer Save
    .end-screen-descriptionDescription text on final experience screensCancel Confirm Customer Lost Customer Save
    Was this article helpful?
    What's Next