AddShoppers Help Desk

Support Center

Using NEW Behavioral Targeting App Design Templates

Last Updated: Aug 23, 2016 11:54AM EDT

NEW Behavioral Targeting Modal Design Templates

 
They're here!! They're here!! The new BT App design templates are here! Three new design templates are now available for you to choose from to make designing and launching your own BT campaigns even easier! With the 3 new templates there are now 4 total options for you to choose from when designing your modal:
 

Square Modal Design (Default)

 

Horizontal Modal Design (hor)

 

Vertical Modal Design (vert)

 

Overlay Modal Design (overlay)



 

Exciting times, right?! Once you've made your decision on the style, inserting the template is easy. First, copy this CSS at the bottom of this article, and use it to replace all of the default CSS in your campaign. Then, inside your HTML tab, add the short "class" associated with each modal, right at line 1, just before the word "active". (*REMEMBER* - Square is the default style. If you wish to use the square modal design there's nothing you need to do.)
 
 
  • Horizontal (hor-modal)
  • Vertical (vert-modal)
  • Overlay (overlay-modal)

*Pro-Tip - Make sure you edit this in both the initial modal and success modal HTML tabs.
 


 

Once you've done this, you can click save and go back to the preview tab where your new modal style should be loaded and waiting for your edits!

To change your background image, simply go back to your CSS tab and scroll down until you see the section of code associated with the style of modal design template you're using. Once you've located it, you'll notice a place where you can swap out the default image URL with the URL of the image you're looking to use.

 
 
  • Horizontal (hor-modal) - Image size: 375px X 420px
  • Vertical (vert-modal) - Image size: 200px X 400px
  • Overlay (overlay-modal) - Image size: 2500px X 1600px




(in this example, we're highlighting the URL you would replace if using the vertical template)

Changing the marketing copy for your modal is still done inside the HTML tab and any other design pieces can still be done in the CSS tab as you normally would in the default BT campaign.

Should you have any questions, please feel free to let our awesome Client Success team help!

Here's the CSS you'll need to replace the default. Copy this entire piece of code and replace all of the default CSS with this new version here.

.addshop-overlay, .addshop-overlay *{
  margin: 0;
  padding: 0;
  border: 0;
  background: 0;
  width: auto;
  height: auto;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  border-radius: 0;
  min-height: 0;
  min-width: 0;
  float: none;
  position: static;
  box-shadow: none;
  text-shadow: none;
  line-height: normal;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.addshop-overlay {
  font-family: Arial;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  background: rgba(0, 0, 0, 0.7);
  pointer-events: none;
  opacity: 0;
  display: table;
  width: 100%;
  height: 100%;
  -webkit-transition: opacity .5s;
          transition: opacity .5s;
}
.addshop-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.addshop-poweredby {
  color: #fff;
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  background: url('https://addshoppers.s3.amazonaws.com/plugins/behavioral_targeting/build/asicon.png') left center no-repeat;
  background-size: 20px;
  text-indent: 30px;
}
.addshop-truste {
  position: absolute;
  bottom: 20px;
  right: 20px;
  opacity: .3;
  background: url('https://addshoppers.s3.amazonaws.com/plugins/behavioral_targeting/build/icon-truste.png');
  height: 30px;
  width: 109px;
}
.addshop-truste:hover {
  opacity: 1;
}
.addshop-modal {
  z-index: 10;
  font-size: 18px;
  opacity: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 500px;
  height: 420px;
  margin: auto;
  padding: 40px;
  background: url('https://addshoppers.s3.amazonaws.com/plugins/behavioral_targeting/build/background.jpg') center;
  color: #fff;
  text-align: center;
  pointer-events: none;
  -webkit-transform: scale3d(1.2, 1.2, 1);
          transform: scale3d(1.2, 1.2, 1);
  -webkit-transition: opacity .5s, -webkit-transform .5s;
          transition: opacity .5s, transform .5s;
}
.addshop-modal-inner {
  display: table;
  width: 100%;
  height: 100%;
}
.addshop-modal .addshop-close {
  position: absolute;
  top: -45px;
  right: -45px;
  width: 35px;
  height: 35px;
  text-indent: -9999px;
  background: url('https://addshoppers.s3.amazonaws.com/plugins/behavioral_targeting/build/close.png') no-repeat;
  opacity: .5;
  cursor: pointer;
}
.addshop-modal .addshop-close:hover {
  opacity: 1;
}
.addshop-modal .addshop-heading {
  margin-bottom: 10px;
}
.addshop-modal .addshop-heading1 {
  font-size: 36px;
  font-weight: bold;
}
.addshop-modal .addshop-heading2 {
  font-size: 22px;
  margin-bottom: 40px;
}
.addshop-modal .addshop-fineprint {
  font-size: 12px;
  opacity: .5;
}
.addshop-modal.active {
  pointer-events: auto;
  opacity: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}
.addshop-modal .addshop-step {
  display: table-cell;
  vertical-align: middle;
}
.addshop-modal .addshop-cpncode {
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  color: rgb(0, 120, 231);
  display: inline-block;
  position: relative;
}

/*Buttons*/
.addshop-button {
    /* Structure */
    display: inline-block;
    zoom: 1;
    line-height: normal;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    float: left;
    margin-bottom: 2%;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Firefox: Get rid of the inner focus border */
.addshop-button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

/*csslint outline-none:false*/
.addshop-button {
    font-family: inherit;
    font-size: 100%;
    padding: 20px;
    color: #444; /* rgba not supported (IE 8) */
    color: rgba(0, 0, 0, 0.80); /* rgba supported */
    border: 1px solid #999;  /*IE 6/7/8*/
    border: none rgba(0, 0, 0, 0);  /*IE9 + everything else*/
    background-color: #E6E6E6;
    text-decoration: none;
    border-radius: 5px;
}
.addshop-button-hover,
.addshop-button:hover,
.addshop-button:focus {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000',GradientType=0);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.10)));
    background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
    background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.10));
    background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
    background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
}
.addshop-button:focus {
    outline: 0;
}
.addshop-button-active,
.addshop-button:active {
    box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
    border-color: #000\9;
}
.addshop-button[disabled],
.addshop-button-disabled,
.addshop-button-disabled:hover,
.addshop-button-disabled:focus,
.addshop-button-disabled:active {
    border: none;
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    filter: alpha(opacity=40);
    -khtml-opacity: 0.40;
    -moz-opacity: 0.40;
    opacity: 0.40;
    cursor: not-allowed;
    box-shadow: none;
}
.addshop-button-hidden {
    display: none;
}

/* Firefox: Get rid of the inner focus border */
.addshop-button::-moz-focus-inner{
    padding: 0;
    border: 0;
}
.addshop-button-primary,
.addshop-button-selected,
a.addshop-button-primary,
a.addshop-button-selected {
    background-color: rgb(0, 120, 231);
    color: #fff;
}

/*Form*/
.addshop-form {
  overflow: hidden;
}
.addshop-form input[type="text"]{
    padding: 20px;
    display: inline-block;
    background: #fff;
    float: left;
    border: none;
    border-radius: 5px;
    vertical-align: middle;
    color: #5b5b5b;
    font-size: 18px;
    margin-right: 2%;
    margin-bottom: 2%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.addshop-form-row input:last-child, .addshop-form-row select:last-child, .addshop-form-row textarea:last-child, .addshop-form-row .pure-button {
  margin-right: 0;
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.addshop-form input:not([type]) {
    padding: 0.5em 0.6em;
    display: inline-block;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 3px #ddd;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.addshop-form input[type="text"]:focus {
    outline: 0;
    border-color: #129FEA;
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.addshop-form input:not([type]):focus {
    outline: 0;
    border-color: #129FEA;
}
.addshop-form input[type="text"][disabled] {
    cursor: not-allowed;
    background-color: #eaeded;
    color: #cad2d3;
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.addshop-form input:not([type])[disabled] {
    cursor: not-allowed;
    background-color: #eaeded;
    color: #cad2d3;
}
.addshop-form .addshop-input-1 {
    width: 100%;
}
@media only screen and (max-width : 480px) {
    .addshop-form-aligned .addshop-control-group label {
        margin-bottom: 0.3em;
        text-align: left;
        display: block;
        width: 100%;
    }
    .addshop-form-aligned .addshop-controls {
        margin: 1.5em 0 0 0;
    }

    /* NOTE: addshop-help-inline is deprecated. Use .addshop-form-message-inline instead. */
    .addshop-form .addshop-help-inline,
    .addshop-form-message-inline,
    .addshop-form-message {
        display: block;
        font-size: 0.75em;
        /* Increased bottom padding to make it group with its related input element. */
        padding: 0.2em 0 0.8em;
    }
}
/* Overlay Modal */
.overlay-modal {
  background: url('https://addshoppers.s3.amazonaws.com/plugins/behavioral_targeting/build/background.jpg') center;
  background-size: cover;
}
.overlay-modal:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #000;
  opacity: .3;
}
.overlay-modal .addshop-modal {
  background: transparent;
}
.overlay-modal .addshop-modal .addshop-close {
  position: relative;
  top: auto;
  right: auto;
  width: auto;
  line-height: 35px;
  display: inline-block;
  text-indent: 45px;
}
/* Vertical Modal */
.vert-modal .addshop-modal {
  background: #fff url('http://i.addshoppers.com/merchants/templates/modal-templates/bt-templates/img/vert-bg.png') top center no-repeat;
  padding-top: 240px;
  height: 600px;
  width: 400px;
  color: #5b5b5b;
}
.vert-modal .addshop-form input[type="text"] {
  border: 1px #ddd solid;
  text-align: center;
}
@media only screen and (max-width: 40em) {
  .vert-modal .addshop-modal {
    background: #fff;
    padding-top: 40px;
    width: 100%;
    height: 100%
  }
  .vert-modal .addshop-modal .addshop-close {
    background: url('http://i.addshoppers.com/merchants/templates/modal-templates/bt-templates/img/closedark.png') no-repeat;
  }
}
/* Horizontal Modal */
.hor-modal .addshop-modal {
  background: #fff url('http://i.addshoppers.com/merchants/templates/modal-templates/bt-templates/img/hor-bg.png') left center no-repeat;
  padding-left: 415px;
  width: 750px;
  color: #5b5b5b;
}
.hor-modal .addshop-form input[type="text"] {
  border: 1px #ddd solid;
  text-align: center;
}
@media only screen and (max-width: 40em) {
  .hor-modal .addshop-modal {
    background: #fff;
    padding-left: 40px;
    width: 100%;
  }
  .hor-modal .addshop-modal .addshop-close {
    background: url('http://i.addshoppers.com/merchants/templates/modal-templates/bt-templates/img/closedark.png') no-repeat;
  }
}
/* Media Queries */
@media only screen and (max-width: 40em) {
  .addshop-modal {
    width: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    top: 0;
    left: 0;
    border-radius: 0;
    font-size: 14px;
  }
  .addshop-modal .addshop-heading1 {
  font-size: 24px;
  font-weight: bold;
  }
  .addshop-modal .addshop-heading2 {
    font-size: 16px;
    margin-bottom: 20px;
  }
  .addshop-modal .addshop-close {
    position: absolute;
    top: 10px;
    right: 10px;
  }
}
 

Contact Us

  • Please use the floating chat bubble in the bottom right hand side of your screen to initiate a request.

http://assets3.desk.com/
false
addshoppers
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete