Internal Repo Retention-Internal

CSS Reference in Rentention

Modified on: Thu, 6 Oct, 2022 at 12:01 PM

Scope

How to customize pages using CSS in Chargebee Retention?


Solution

Customizations live at the Application level within your company and apply to all Rentention Experiences contained within the Application. The Branding Manager, which is Retention's WISYWIG editor, includes tools and settings that are organized within the below sections:

You may further style your page using CSS, which is injected by using the Global CSS tool. The following sections describe the elements and attributes for which additional styling can be inserted or overridden via CSS.

Experience file document structure

<body>
 <div class="exit-survey">
  <div class="exit-funnel">
   <div class="container">
    <div class="top">...</div>
   </div>    
   <div class="container">
     <div class="plea">...</div>
     <div class="bbk-loss-components">...</div>
     <div class="warn">...</div>
     <div class="survey">...</div>
   </div>
  </div>
 </div>
</body>
        
 
.exit-survey {
   margin: 0;
   padding: 0 0 200px;
}

.exit-funnel {
   box-sizing: border-box;
}

.container { 
   max-width: 960px;
}
        
Header styling variances when using the logo position and header selector in the branding manager:

The .container class is not included in the header if the full-width header is selected.  Justify-content: space-around; is enabled when logo position center is selected.  When logo position left is selected the element takes on the attribute   justify-content: space-between;

Header

When the fixed header is selected in the branding manager the logo element of your page is nested within .container and includes an <hr> element that can be targeted for additional styling.

<div class="top">
  <div class="details">
   <img class"full-logo">
   <hr class="bbk-top-horizontal-rule">
  </div>
</div>
        
 
.top {
   margin-bottom: .5em;
}
.top .details {
   align-items: center;
   display: flex;
}

img { 
   border-style: none;
}

hr { 
   box-sizing: content-box;
   overflow: visible;
}

.bbk-top-horizontal-rule {
   border: 0;
   border-radius: 10px;
   height: 4px;
   margin: 8px 0 0 ;
}
        

Upper plea

<div class="plea">
   <div class="plea-title">
      <div>
    [NAME], we're sorry to see you go! Are you sure you want to cancel?
     </div>
   </div>
</div>
        
 
.plea {
   margin: 0 0 .5em;
}

.plea .plea-title { 
    font-size: 1.35em;
    padding: 1.2em 0;
    text-align: center;
}
        

Loss aversion card containers

<div class-="bbk-loss-components">
 <div class-="bbk-loss-components-grid">
  <div class-="bbk-loss-components-grid-item">...</div>
  <div class-="bbk-loss-components-grid-item">...</div>
 </div>
</div>
        
 
@media (min-width: 760px)
.bbk-loss-components-grid {
    flex-direction: row;
}

bbk-loss-components-grid {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 -10px;
}
        

Loss aversion cards

<!-- Message card -->

<div class="bbk-loss-simple-blurb">
 <div class="bbk-loss-component-title"></div>
   <div class="simple-blurb">
    <div class="blurb-left">
     <div class="quote">...</div>
     <div class="author">...</div>
     <div class="position">...</div>
    </div>
    <div class="blurb-right">
     <img class="blurb-photo" src="..." />
    </div>
 </div>
</div>
            
 
.bbk-loss-simple-blurb 
.simple-blurb {
    display: flex;
    line-height: 1.35em;
}

.bbk-loss-simple-blurb 
.simple-blurb 
.blurb-left {
    flex: 1;
    padding-right: 15px;
}

.bbk-loss-simple-blurb 
.simple-blurb .author {
    font-weight: 700;
    padding-top: 10px;
}

.bbk-loss-simple-blurb 
.simple-blurb .position {
    font-size: .77em;
}

.bbk-loss-simple-blurb 
.simple-blurb 
.blurb-photo {
    border-radius: 50%;
    height: 100px;
    margin-left: 10px;
    width: 100px;
}
        
 

<!-- Activity card -->

<div class="bbk-loss-simple-chip">
 <div class="bbk-loss-component-title"></div>
   <div class="bbk-loss-simple-chip-inner">
    <div class="list">
     <div class="list-item">
      <div class="li-icon">...</div>
      <div class="li-info">
       <div class="li-value">...</div>
       <div class="li-desc">...</div>
      </div>
     </div>
     <div class="list-item">...</div>
     <div class="list-item">...</div>
     <div class="list-item">...</div>
    </div>
   </div>
</div>
        
 
.bbk-loss-simple-chip .list {
    display: flex;
    flex-wrap: wrap;
}

.bbk-loss-simple-chip .list-item {
    align-items: flex-start;
    display: flex;
    flex: 0 0 50%;
    margin-top: 1.5em;
}

.bbk-loss-simple-chip 
.li-icon {
    align-items: center;
    border-radius: 50%;
    display: flex;
    flex-shrink: 0;
    height: 44px;
    justify-content: center;
    margin-top: -5px;
    width: 44px;
}

.bbk-loss-simple-chip .li-info {
    padding-left: 9px;
}

.bbk-loss-simple-chip .lii-value {
    display: flex;
    font-size: 1.11em;
    font-weight: 700;
    line-height: 22px;
}

.bbk-loss-simple-chip .lii-desc {
    font-size: .89em;
    letter-spacing: -.07px;
    line-height: 20px;
}
        
 
<!-- Loss card with link -->

<div class="
  simple-link 
  bbk-simple-link-survey-card 
  bbk-loss-simple-link-grid-item 
  bbk-loss-simple-link-grid-item-simple-link
">
 <div class="bbk-loss-component-title">
  <div class="d-flex bbk-slsc-copy-container">
    <div class="bbk-slsc-left-copy-container">
     <div class="copy">...</div>
    </div>
    <div class="bkk-sl-sc-image">
     <img src="..." />
    </div>
    <div class="btn">
     <button class="
       funnel-button 
       funnel-button-global">
     ...
     </button>
    </div>
   </div>
  </div>
</div>
        
 
.bbk-loss-simple-link-grid-item {
    display: flex;
    flex-direction: column;
}

.d-flex {
    display: flex!important;
}

.simple-link.bbk-simple-link-survey-card 
.bkk-sl-sc-image {
    padding-left: 1rem;
}

.bbk-loss-simple-link-grid-item .btn {
    margin-top: 1rem;
}

.bbk-loss-simple-link-grid-item 
.btn button {
    width: 100%;
}
        
 
<!-- Loss list card -->

<div class="bbk-funnel-loss-simple-list">
 <div class="bbk-loss-component-title"> 
...
 </div>
  <div class="bbk-loss-simple-chip-inner">
   <div class="list-general">
    <div class="list-wrapper">
     <div class="list-wrapper-icon-wrapper">
      <div class="list-close-icon">...</div>
     </div>
     <span class="text"> ... </span>
    </div>
    <div class="list-wrapper">...</div>
    <div class="list-wrapper">...</div>
    <div class="list-wrapper">...</div>
    <div class="list-wrapper">...</div>
   </div>
  </div>
 </div>
        
 
.bbk-funnel-loss-simple-list 
.list-general {
    display: grid;
    font-size: .88em;
    grid-template-columns: 50% 50%;
    line-height: 22px;
    padding-top: 10px;
}

.bbk-funnel-loss-simple-list 
.list-general 
.list-wrapper {
    align-items: flex-start;
    display: flex;
    padding: 5px 0;
}

.bbk-funnel-loss-simple-list
.list-general 
.list-wrapper 
.list-wrapper-icon-wrapper {
    padding-top: 4px;
}

bbk-funnel-loss-simple-list 
.list-close-icon {
    align-items: center;
    display: flex;
    margin-right: 7px;
}
        

Lower plea

<div class="warn">
 <div class="headline">
  <div>Important...</div>
  <button class="funnel-button funnel-button-global">
  <span class="arrowLeft d-flex align-items-center">...</span>
  <span>Never mind ...</span>
 </div>
</div>
        
 
.warn {
    padding: 1.5em 0;
    text-align: center;
}

@media (min-width: 1200px)
.warn .headline {
    width: 65%;
}

@media (min-width: 992px)
.warn .headline {
    width: 70%;
}

@media (min-width: 760px)
.warn .headline {
    width: 90%;
}

.warn .headline {
    margin: 0 auto;
    padding-bottom: 1em;
}

.warn .arrowLeft {
    margin-right: 12px;
}

.align-items-center {
    align-items: center!important;
}

.d-flex {
    display: flex!important;
}
        

Survey

<div class="survey multi-row-survey">
 <div class="survey-row-wrapper">
  <div class="survey-row">
   <div class="survey-question">
     <div class="survey-text">...</div>
     <div class="survey-required">...</div>
   </div>   
   <div class="survey-answer"> ... </div>
  </div>
 </div>
 <div class="survey-row-wrapper">...</div>
 <div class="survey-row-wrapper">...</div>
 <div class="survey-row-wrapper 
             last-survey-row">...</div>
 <div class="survey-submit-wrapper">
  <div class="survey-submit">
   <div class="survey-submit-inner">
    <div class="confirm-text">...</div>
    <div class="confirm-btns">
     <span class="cancel-btn forward-btn">
      <button class="
        bbk-submit-confirm-cancel-button 
        funnel-button-funnel-button-global"
      > Cancel </button>
     </span> 
     <span class="backwards-btn">
      <button class="
    bbk-deflect-button 
    funnel-button-funnel-button-global"
      > Never mind </button>
     </span> 
    </div> 
   </div>
  </div>
 </div>
</div>
        
 
.exit-survey div.exit-funnel .survey {
    background: #fff;
    margin-bottom: 1.5em;
    margin-top: 1.5em;
    overflow: hidden;
    padding: 16px 0 0;
}

.exit-survey div.exit-funnel 
.survey .survey-row-wrapper {
    border-bottom: 1px solid #eee;
    padding: 10px 15px;
}

.exit-survey div.exit-funnel 
.survey .last-survey-row {
    border-bottom: none;
    margin-bottom: 10px;
    padding-bottom: 0;
}

.survey-submit-wrapper {
    background: #fafafa;
    padding: 12px 14px;
}

.survey-submit {
    background: #fafafa;
    padding: 12px 15px;
}

.survey-submit .confirm-text {
    margin-bottom: 1.5em;
}

.survey-submit .confirm-btns {
    align-items: center;
    display: flex;
    justify-content: center;
}
.confirm-btns {
    flex-direction: row;
}

.survey-submit .confirm-btns {
    align-items: center;
    display: flex;
    justify-content: center;
}

.survey-submit .confirm-btns>span {
    display: inline-block;
    margin-right: 40px;
}
.survey-submit 
.confirm-btns .backwards-btn {
    text-align: center;
}

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.
×