How to create a custom HTML Web Message
HTML/CSS should be specified as per W3C standards as specified at (https://www.w3.org/standards/webdesign/htmlcss)
Consider the latest version and follow below mentioned recommendations, rules and templates -->
Recommendation:
- Use system default fonts
Rules:
- Complete DIV base layout
- Inline CSS classes
- Image needs to have copyright permission
- Not more than one image
tag allowed for the particular template.
- "id" is mandatory in all templates mentioned below
- Commented code is not allowed
(example of what is not allowed)
<!-- container for Image tag starts here -->
<div class="smt-img-div">
<img id="NC_IMAGE" src="https://cdnt.netcoresmartech.com/webmsg/banner/banner-lg902--bg.jpg" class="smt-edit-image">
</div>
<!-- container for Image tag ends here -->
<!--div class="smt-img-div">
</div-->
Templates:
Following are templates on how to add input field, background image in css, image tag, title, div structure and its sequence, link (button), paragraph etc.
- For background image, insert id="NC_background_color"
<div id="NC_background_color" class="smt-modal smt-edit-background-color"></div>
- Follow below template for creative close to action (CTA) button
<a id="NC_CLOSE_BUTTON" href="" class="smt-close smt-close-bt smt-edit-close-button">Close</a>
<a id="NC_CLOSE_ICON" href="" class="smt-close smt-close-icon smt-edit-close-icon">X</a>
- For content element, insert id = ”NC_TEXT_ONE”
<p id="NC_TEXT_ONE" class="smt-p smt-edit-content">GET FREE PERSONALIZED RECOMMENDATIONS FROM OUR TRAVEL EXPERTS !</p>
The “id” will keep on changing followed by number of
elements
(e.g. id=”NC_TEXT_ONE”, id=”NC_TEXT_TWO” and so on...)
- Follow below template for form element
<form id="NC_FORM1" class="smt-form">
- Follow below template for input element
<div class="smt-form-group">
<input id="NC_INPUT_TEXT1" type="text" name="firstname" class="smt-input" placeholder="First Name">
<span class="smt-error" id="NC_ERROR1">Please enter your first name</span> </div>
On use of multiple input elements and error tags, the “id” will keep on changing i.e. id=”NC_INPUT_TEXT1”, id=”NC_INPUT_TEXT2” and so on... similarly for error id=”NC_ERROR1”, id=”NC_ERROR2” and so on…
- Follow below template for IMG tag
<div class="smt-img-div">
<img id="NC_IMAGE" src="https://cdnt.netcoresmartech.com/webmsg/banner/banner-lg902--bg.jpg" class="smt-edit-image">
</div>
- Follow below template for action button
<div class="smt-button-div smt-cta-group callToAction">
<button type="button" id="NC_CTA_ONE" class="smt-button smt-edit-button">Learn More</button>
<button type="button" id="NC_CTA_TWO" class="smt-button2 smt-edit-button">Buy Now!</button>
</div>
Sticky bar
<html lang="en" class="smt-html"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.smt-body{
margin:0 auto;
}
a, a:visited, a:active, a:hover{text-decoration: none;}
.smt-float-left{float: left;}
.smt-float-right{float:right}
.smt-sticky-bar{
padding:0 3% 0 0;
min-height:50px;
max-height: 60px;
height: auto;
box-sizing:border-box;
position: relative;
width:100%;
display: flex;
flex-wrap: nowrap;
background:#fff url(https://cdnt.netcoresmartech.com/webmsg/sticky-banner/bitmap.jpg);
background-repeat: no-repeat;
background-size:100%;
background-position: center center;
overflow: hidden;
}
.smt-close-bt{font-family:Verdana, Geneva, Tahoma, sans-serif; font-weight: 700; position: absolute; right:3px; top:3px; color: #000;}
.smt-input{height:32px; border:1px solid #5c5c5c; padding:0 3%; width:80%; font-size: 14px; background: transparent; margin-right: 15px;color: #000; ; outline:0; max-width: 350px; }
.smt-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ font-size:14px; color:#000; }
.smt-input::-moz-placeholder { /* Firefox 19+ */ font-size:14px; color:#000;}
.smt-input:-ms-input-placeholder { /* IE 10+ */ font-size:14px; color:#000;}
.smt-input:-moz-placeholder { /* Firefox 18- */ font-size:14px; color:#000;}
.smt-h1{
font-family:Helvetica, Arial, sans-serif;
font-size: 25px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
color: #5c5c5c;
margin: 0;
text-align: left;
}
.smt-button{
height:38px;
border-radius: 5px;
background-color: #4a4a4a;
font-family:Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: #ffffff;
display: block;
text-align: center;
padding:0 5%;
line-height:38px;
width:90%;
border:0;
max-width:236px;
cursor: pointer;
}
.smt-row{width:100%; float:left; background-color: #fff;}
.smt-content-div{width:50%; padding:0 2%; margin-right:5%; vertical-align: middle; float:left; position: relative; display: flex; align-items: center; height:60px; }
.smt-input-div{width:55%; flex: 40%; padding:0; margin:10px 0; vertical-align: middle; float:left; position: relative; }
.smt-button-div{float: right; display: flex; flex: 45%; align-items: center; height: auto; width:30%; padding:0 }
.smt-vertically-center{position: relative; top: 50%;-ms-transform: translateY(-50%); transform: translateY(-50%);}
.smt-error{display:block; width:100%; font-size:12px; color:red; font-family:Helvetica,Arial, sans-serif;margin:2px 0 0 0; text-align:left;}
form{width:45%; display:flex; flex: 100%; padding:0; margin: 0;}
@media screen and (min-width:712px) and (max-width:1024px){
.smt-button-div{width:45%}
.smt-button{width:100%}
}
@media screen and (max-width:712px){
form{width:100%; padding:0}
.smt-sticky-bar{max-height:55px; padding:0 2% 0 5%;}
.smt-h1{font-size:11px; line-height: normal;margin-bottom: 5px;}
.smt-input-div{margin: 0; padding:0; width:55%}
.smt-content-div{margin: 0; padding:0; width:100%; height:auto;}
.smt-input{height:19px; line-height: 19px; font-size:7px; width:100%;}
.smt-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ font-size:7px;}
.smt-input::-moz-placeholder { /* Firefox 19+ */ font-size:7px;}
.smt-input:-ms-input-placeholder { /* IE 10+ */ font-size:7px;}
.smt-input:-moz-placeholder { /* Firefox 18- */ font-size:7px;}
.smt-button-div{width:43%; top: 0; display: inline-block; height: auto; position: relative; top:0px;}
.smt-button{height:25px; line-height: 25px; font-size: 10px;}
.smt-error{font-size:9px;}
.smt-row{padding:5px 0;}
.smt-hidden4-mobile{display:none;}
.smt-close-bt{font-size: 12px;left: 5px;right: auto;top: 37%; color:#000}
}
@media screen and (max-width:320px){
.smt-button {
height: 19px;
line-height: 19px;
font-size: 9px;
}
}
</style>
</head>
<body class="smt-body">
<div id="NC_background_image">
<a id="NC_CLOSE_BUTTON" href="javascript:void(0);" class="smt-close smt-close-bt smt-edit-close-button">Close</a>
<a id="NC_CLOSE_ICON" href="javascript:void(0);" class="smt-close-bt smt-edit-close-button">X</a>
<div class="smt-row">
<div class="smt-content-div smt-sticky-bar smt-edit-background-image">
<h1 id="NC_TEXT_ONE" class="smt-h1 edit-title1">GET 25% OFF YOUR FIRST ODER</h1>
</div>
<form id="NC_FORM1">
<div class="smt-input-div smt-float-right">
<input type="text" placeholder="ENTER EMAIL ID" class="smt-input" id="NC_INPUT_TEXT1" autocomplete="off">
<span class="smt-error" id="NC_ERROR1">Please enter valid email</span>
</div>
<div class="smt-button-div smt-cta-group callToAction ">
<button type="button" id="NC_CTA_ONE" class="smt-button smt-float-right edit-button">Get My Discount</button></div>
</form>
</div>
</div>
</body></html>
Modal
<!DOCTYPE html>
<html lang="en" class="smt-html">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.smt-html{height:100%;}
.smt-body{
margin:0 auto;
height:100%;
}
a, a:visited, a:active, a:hover{text-decoration: none;}
.smt-modal{ padding:0; width:90%; max-width: 880px; height: 480px; padding:50px 0; top: 50%;
left: 50%; transform: translate(-50%, -50%); text-align: center; font-family:Helvetica,Arial, sans-serif; position: relative; border-radius: 20px; background-color: #fcd94a;background-repeat: no-repeat;background-position: center center;}
.smt-modal-inner{margin:0 auto; width:85%; height:100%; position: relative; }
.smt-close-bt, .smt-close-icon{z-index:2;font-family:Verdana, Geneva, Tahoma, sans-serif; font-weight: 700; position: absolute; right:20px; top:20px; font-size: 22px; color: #fff;}
.smt-img-div{width:100%; height:100%; }
.smt-img-div .smt-image{width: 100%; height:100%; object-fit:cover; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px;}
.smt-h1{
font-family:Helvetica,Arial, sans-serif;
font-size:40px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: #262626;
margin: 0;
}
.smt-h2{
font-size: 30px;
font-weight: 200;
font-style: normal;
font-stretch: normal;
line-height: 43px;
letter-spacing: normal;
color: #1b1b1b;
display: inline-block;
margin:10px 0 48px;
}
.smt-h2 .smt-span{
font-size: 30px;
font-weight: 600;
letter-spacing:-1px;
}
.smt-p{
font-size: 20px;
font-weight: 600;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: #98832b;
display:inline-block;
border-bottom:1px solid;
}
.smt-p button{
background: none;
border: 0;
box-shadow: none;
color: #98832b;
font-size: 20px;
cursor: pointer;
font-weight: bold;
}
.smt-button{
border:0;
min-height: 40px;
border-radius: 5px;
background-color: #ed4646;
font-size: 20px;
font-weight: 600;
font-style: normal;
font-stretch: normal;
line-height:20px;
letter-spacing: normal;
text-align: center;
color: #ffffff;
width:100%;
margin-bottom: 10px;
display: inline-block;
padding: 10px;
cursor: pointer;
}
.smt-col1{float:left;width: 45%; height:100%;}
.smt-col2{float:right;width:51%; text-align: left; height:100%;}
.smt-div{text-align: center}
@media only screen and (min-width:768px) and (max-width:922px) {
.smt-modal{max-height: 369px; padding:20px 0; }
.smt-close-bt, .smt-close-icon{z-index:2;font-size:17px;}
.smt-h1{font-size:30px}
.smt-h2{font-size:25px; margin:20px 0; line-height: 35px}
.smt-h2 .smt-span{font-size: 28px;}
.smt-button{min-height: 35px; line-height:22px; font-size:18px; padding:5px; }
.smt-p{ margin:10px 0;}
}
@media only screen and (min-width:600px) and (max-width:767px){
.smt-modal{max-width: 329px; max-height: 369px; padding:10px 0; }
.smt-modal-inner{width:80%;}
.smt-img-div{height:auto;}
.smt-img-div .smt-image{width:60%; height:auto;}
.smt-close-bt, .smt-close-icon{z-index:2;font-size:17px;}
.smt-h2{font-size:18px;margin:10px 0; line-height:25px}
.smt-h2 .smt-span{font-size:18px; font-weight:600;}
.smt-button{min-height:25px; line-height: 18px; font-size: 15px; max-width:190px; padding:5px; font-weight:normal;}
.smt-col1, .smt-col2{float:none; width:100%; height:auto; text-align: center}
.smt-p{ margin:10px 0;font-size:15px; }
.smt-p button{ font-size: 17px; }
}
@media only screen and (min-width:480px) and (max-width:600px){
.smt-modal{max-width: 329px; max-height: 329px; padding:20px 0; }
.smt-modal-inner{width:70%; }
.smt-img-div .smt-image{width:56%; height:auto;}
.smt-close-bt, .smt-close-icon{z-index:2;font-size:17px;}
.smt-img-div{height:auto;}
.smt-h2{font-size:15px;margin:10px 0; line-height: normal}
.smt-h2 .smt-span{font-size:15px; font-weight:600; }
.smt-p{font-size:15px; }
.smt-button{min-height:29px; line-height: 18px; font-size: 15px; max-width:200px; padding:5px; font-weight:normal; }
.smt-col1, .smt-col2{float:none; width:100%; height:auto; text-align: center}
.smt-p{ margin:10px 0;}
}
@media only screen and (max-width:480px){
.smt-modal{max-width: 229px; max-height: 269px; padding:10px 0; }
.smt-modal-inner{width:80%;}
.smt-img-div{height:auto;}
.smt-close-bt, .smt-close-icon{z-index:2;font-size:17px;}
.smt-img-div .smt-image{width:50%; height:auto;}
.smt-h2{font-size:15px;margin:10px 0; line-height: 20px}
.smt-h2 .smt-span{font-size:15px; font-weight:600;}
.smt-p{font-size:15px; }
.smt-button{min-height:29px; line-height: 18px; font-size: 15px; max-width:150px; padding: 5px; font-weight:regular; }
.smt-col1, .smt-col2{float:none; width:100%; height:auto; text-align: center}
.smt-p{ margin:10px 0;}
.smt-p button{font-size:17px;}
}
@media only screen and (max-width:767px){
.smt-hidden4-mobile{display:none;}
}
</style>
</head>
<body class="smt-body">
<div id="NC_background_color" class="smt-modal edit smt-edit-background-color">
<a id="NC_CLOSE_BUTTON" href="javascript:void(0);" class="smt-close smt-close-bt smt-edit-close-button">Close</a>
<a id="NC_CLOSE_ICON" href="javascript:void(0);" class="smt-close smt-close-icon smt-edit-close-icon">X</a>
<div class="smt-modal-inner">
<div class="smt-col1"> <div class="smt-img-div"><img id="NC_IMAGE" src="http://cdnt.netcoresmartech.com/webmsg/modal/modal-discount--season.png" class="smt-image smt-edit-image"/></div></div>
<div class="smt-col2">
<h1 id="NC_TEXT_ONE" class="smt-h1 smt-hidden4-mobile smt-edit-title1">EXCLUSIVE SUMMER OFFER</h1>
<h2 id="NC_TEXT_TWO" class="smt-h2 smt-edit-title2">This summer has brought
more than 50 % discounts on your favourite brands </h2>
<div class="smt-cta-group callToAction"> <button type="button" id="NC_CTA_ONE" class="smt-button smt-edit-button">Take me there</button>
<div class="smt-div"> <p class="smt-p"><button id="NC_CTA_TWO" type="button">I dont care</button></p></div></div>
</div>
</div>
<div style="clear: both"> </div>
</div>
</div>
</body>
</html>
Thank You HTML
Based on Template resolution/dimension width and height will vary or need to update
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
.NC_REMOVE{display: none !important;}.NC_ACTIVE{outline:3px solid #4BACEB !important;}.NC_REMOVE{display: none !important;}.NC_ACTIVE{outline:3px solid #4BACEB !important;}
body{
margin:0 auto;
}
a, a:visited, a:active, a:hover{text-decoration: none;}
.smt-thankyou-main{
background: #fff url(https://cdnt.netcoresmartech.com/webmsg/modal/modal-thanku-bg.jpg) no-repeat;
margin:0 auto;
width: 100%;
max-width: 1000px;
height:760px;
text-align: center;
font-family: Helvetica, sans-serif;
padding:0;
box-sizing: border-box;
position: relative;
box-shadow: 1px 2px 3px #cccccc;
color:#000;
background-size: 100% 100%;
}
.smt-modal{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width:1000px;
height:760px;
}
.smt-edit-title{
font-size:30px;
padding: 0;
margin: 0;
margin-bottom: 15px;
}
.smt-edit-content{
font-size:20px;
margin: 0;
padding: 0;
}
.smt-close-bt1{
font-family: Verdana, sans-serif;
font-weight: 700;
position: absolute;
right: 5px;
top: 5px;
color:#a8a8a8;
font-size: 22px;
}
.smt-close-bt1:hover{
color:#777;
}
.smt-content-text1{position: relative; top:35%; width:75%; margin:0 auto;}
.smt-close-bt, .smt-close-icon{z-index:2;font-family:Verdana, Geneva, Tahoma, sans-serif; font-weight: 700; position: absolute; right:26px; top:19px; font-size: 25px; color: #000;}
@media only screen and (max-width:700px) {
.smt-thankyou-main{width:300px; height:300px;}
.smt-edit-title{font-size:1.2rem}
.smt-edit-content{font-size:.9rem;}
}
@media only screen and (max-width: 480px){
.smt-thankyou-main {max-width: 300px;max-height: 300px;width: 100%;height: 100%;}
}
</style>
</head>
<body>
<div id="NC_background_image" class="smt-thankyou-main smt-edit-background-image">
<a id="NC_CLOSE_ICON" href="javascript:void(0)" title="Close" class="smt-close smt-close-bt smt-edit-close-icon">X</a>
<div class="smt-content-text1">
<h2 id="NC_TEXT_ONE" class="smt-edit-title">Thank you for valuable time!</h2>
<p id="NC_TEXT_TWO" class="smt-edit-content">You joined the super secret email about all our deals and promos.</p>
</div>
</div>
</body></html>
Banner
<html lang="en" class="smt-html"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.smt-html{height:100%;}
.smt-body{
margin:0 auto;
height:100%;
}
a, a:visited, a:active, a:hover{text-decoration: none;}
.smt-modal{height:100%; padding:30px; width:100%; max-width:300px; max-height: 300px; margin: 0 auto; text-align: center; font-family:Helvetica,Arial, sans-serif; position: relative; background-color: #f8f7f8;background-repeat: no-repeat;background-position: center center;}
.smt-modal-inner{margin:0 auto; width:90%; position: relative; min-height: 100%; min-height: 100vh; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center;-ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center;}
.smt-close-bt, .smt-close-icon{z-index:2;font-family:Verdana, Geneva, Tahoma, sans-serif; font-weight: 700; position: absolute; right:5px; top:5px; font-size: 15px; color: #0d1e2e;}
.smt-h1{
font-family:Helvetica,Arial, sans-serif;
font-size: 50px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing:normal;
text-align: center;
color: #0f1f2f;
margin:0;
}
.smt-h2{
font-family:Helvetica,Arial, sans-serif;
font-size: 14px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: #0f1f2f;
margin: 0;
}
.smt-p{
font-family:Helvetica,Arial, sans-serif;
font-size: 10px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: #6c706e;
}
.smt-button{width: 150px;
min-height:30px;
font-family:Helvetica,Arial, sans-serif;
font-size:12px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: #b4becb;
background-color:#0f1f30;
border:1px solid #0f1f30;
cursor: pointer;
padding: 5px;
}
.smt-form-group{width:150px; margin:0 auto 15px;}
.smt-input{width:100%; max-width:150px; border:1px solid#0f1f30; background: transparent; height:30px; padding:0; line-height:30px; font-family:Helvetica,Arial, sans-serif; font-size: 11px; font-weight:normal; font-style: normal; font-stretch: normal; letter-spacing: normal; text-align: center; color: #b4b4b4; outline: 0;}
.smt-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #b4b4b4; font-size: 10px; }
.smt-input::-moz-placeholder { /* Firefox 19+ */ color: #b4b4b4; font-size: 10px;}
.smt-input:-ms-input-placeholder { /* IE 10+ */ color: #b4b4b4; font-size: 10px;}
.smt-input:-moz-placeholder { /* Firefox 18- */color: #b4b4b4; font-size: 10px;}
.smt-form{margin: 20px 0 28px;}
.smt-vertical-center {
min-height: 100%;
}
.smt-vertical-center:before { /* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.smt-vertical-center > .smt-container{
width: 100%;
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
}
.smt-error{display:block; width:100%; font-size:10px; color:red;font-family:Helvetica,Arial, sans-serif; margin: 5px auto 0; text-align:left;}
@media only screen and (max-width:320px) {
.smt-h1{
font-size: 36px;
}
.smt-p{
font-size: 9px;
}
.smt-modal{
padding: 5px;
}
}
</style>
</head>
<body class="smt-body">
<div id="NC_background_color" class="smt-modal smt-edit-background-color">
<a id="NC_CLOSE_BUTTON" href="javascript:void(0);" class="smt-close smt-close-bt smt-edit-close-button">Close</a>
<a id="NC_CLOSE_ICON" href="javascript:void(0);" class="smt-close smt-close-icon smt-edit-close-icon">X</a>
<div class="smt-modal-inner smt-vertical-center">
<div class="smt-container">
<h1 id="NC_TEXT_ONE" class="smt-h1 smt-edit-title1">30% OFF</h1>
<h2 id="NC_TEXT_TWO" class="smt-h2 smt-edit-title2">on your first purchase</h2>
<form id="NC_FORM1" class="smt-form">
<div class="smt-form-group">
<input id="NC_INPUT_TEXT1" type="text" name="email" class="smt-input" placeholder="ENTER YOUR EMAIL">
<span class="smt-error" id="NC_ERROR1">Please enter valid email id</span>
</div>
<div class="smt-cta-group callToAction"><button type="button" id="NC_CTA_ONE" class="smt-button edit-button">DONE</button></div>
</form>
<p id="NC_TEXT_THREE" class="smt-p smt-smt-edit-content">USE THE SAME EMAIL ID FOR YOUR<br>ACCOUNT</p>
</div>
</div>
<div style="clear:both"></div>
</div>
</body></html>
Full Screen
<html lang="en" class="smt-html"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.smt-html{height:100%; width:100%;}
.smt-body{
margin:0 auto;
width:100%;
height:100%;
}
a, a:visited, a:active, a:hover{text-decoration: none;}
.smt-modal{width:100%; height: 100%; box-sizing:border-box; position: relative; padding:0;background-repeat: no-repeat;background-position: center center;}
.smt-modal-inner{max-width: 964px; width:100%; margin: 0 auto; padding:0; text-align: center; font-family:Helvetica,Arial, sans-serif; position: relative; min-height: 100%; min-height: 100vh; display: -webkit-box; display: -moz-box; display: -ms-flexbox;display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center;-ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; }
.smt-close-bt, .smt-close-icon{z-index:2;font-family:Verdana, Geneva, Tahoma, sans-serif; font-weight: 700; position: absolute; right:1%; top:1%; font-size:22px; color:#000;}
.smt-col-1, .smt-col-2{display:inline-block; width:39%; vertical-align: middle;}
.smt-col-2{width:59%}
/* .smt-vertical-center {
min-height: 100%;
} */
.smt-vertical-center:before { /* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.smt-vertical-center > .smt-container{
width: 100%;
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
margin:2% 0;
}
.smt-img-div .smt-img{position: relative; margin:20% 0; max-width: 200px; }
.smt-content-text{text-align: left;}
.smt-content-text .smt-p{font-family:Helvetica,Arial, sans-serif; font-size: 25px; font-weight: normal;font-style: normal;font-stretch: normal;line-height: normal; letter-spacing: normal; color: #030303; margin:25px 0;}
.smt-h1{
font-family: Helvetica, sans-serif;
font-size: 60px;
font-weight: 900;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: #030303;
margin: 0;
}
.smt-input{width:94%; border:1px solid #979797; background: transparent; height:46px; padding:0 3%; line-height: 46px; margin-bottom:30px; color: #9b9b9b; font-size: 20px; outline: 0;}
.smt-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #9b9b9b; opacity: 0.69; font-size: 20px; }
.smt-input::-moz-placeholder { /* Firefox 19+ */ color: #9b9b9b; opacity: 0.69; font-size: 20px;}
.smt-input:-ms-input-placeholder { /* IE 10+ */ color: #9b9b9b; opacity: 0.69; font-size: 20px;}
.smt-input:-moz-placeholder { /* Firefox 18- */ color: #9b9b9b; opacity: 0.69;font-size: 20px; }
.smt-button, .smt-button2{
min-height:52px;
max-height:unset;
height: auto;
font-size: 25px;
font-weight: 600;
font-style: normal;
font-stretch: normal;
line-height: 27px;
letter-spacing: normal;
text-align: center;
color: #edf6fd;
width:40%;
border:0;
background: #d0021b;
border-radius: 2px;
margin-top: 12px;
display: inline-block;
padding: 10px;
vertical-align: top;
word-break: break-word;
}
.smt-button2{background: #4a4a4a; width:56%; }
.smt-form .smt-label{margin-bottom:10px; display: inline-block; color:#f8e71c; font-size: 18px; font-weight: 600}
.smt-clearfix{clear: both}
.smt-popup-one-side-img{background:url(https://cdnt.netcoresmartech.com/webmsg/full-screen/fullscrn-bg2.jpg) no-repeat; background-size:cover; background-position: center center }
@media screen and (max-width:922px) {
.smt-h1{font-size:50px;}
}
@media screen and (max-width:768px) {
.smt-modal{padding:0;}
.smt-h1{font-size:30px;}
.smt-img{width:60%;}
.smt-button, .smt-button2{font-size:18px;}
.smt-hidden-mobile{display:none}
.smt-col-2{width:90%;}
}
@media screen and (max-width:320px) {
.smt-h1{
font-size: 24px;
}
.smt-content-text .smt-p{
font-size: 18px;
}
.smt-button, .smt-button2{width:100%;min-height: 40px;line-height: 16px;}
/* .smt-content-text .smt-p, .smt-h1{text-shadow: none;} */
}
@media screen and (min-width:769px) and (max-width:850px) and (orientation: landscape) {
.smt-model{height:auto;}
}
</style>
</head>
<body class="smt-body">
<div id="NC_background_image" class="smt-modal smt-popup-one-side-img smt-edit-background-image">
<a id="NC_CLOSE_BUTTON" href="javascript:void(0);" class="smt-close smt-close-bt smt-edit-close-button">Close</a>
<a id="NC_CLOSE_ICON" href="javascript:void(0);" class="smt-close smt-close-icon smt-edit-close-icon">X</a>
<div class="smt-modal-inner smt-vertical-center ">
<div class="smt-container">
<div class="smt-row">
<div class="smt-col-1 smt-hidden-mobile smt-img-div">
<img id="NC_IMAGE" src="https://cdnt.netcoresmartech.com/webmsg/full-screen/fullscreen-money.png" class="smt-img smt-edit-image ">
</div>
<div class="smt-col-2 smt-text-left">
<div class="smt-content-text">
<h1 id="NC_TEXT_ONE" class="smt-h1 smt-edit-title1">ENJOY A CASHBACK OF 25%</h1>
<p id="NC_TEXT_TWO" class="smt-p smt-edit-text">Get cashback up to Rs.1000 by<br>
paying your bill via Amazon Pay</p>
<div class="smt-cta-group callToAction">
<button type="button" id="NC_CTA_ONE" class="smt-button smt-edit-button">Checkout</button>
<a id="NC_CTA_TWO" href="" class="smt-button2 smt-edit-button">Continue shopping</a>
</div>
</div>
</div>
<div class="smt-clearfix"> </div>
</div>
</div>
</div>
</div>
</body></html>
Customer HTML Template
For Input text field added “data-attribute” attribute and assigned the respective value.
For CTA (button) added “data-action-link” attribute and assigned the respective value.
<html lang="en" class="smt-html">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
.NC_REMOVE {
display: none !important;
}
.NC_ACTIVE {
outline: 3px solid #4BACEB !important;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.smt-html {
height: 100%;
}
.smt-body {
margin: 0 auto;
height: 100%;
}
a,
a:visited,
a:active,
a:hover {
text-decoration: none;
}
.smt-modal {
padding: 0;
width: 100%;
max-width: 200px;
min-height: 200px;
margin: 0 auto;
text-align: center;
font-family: Helvetica, Arial, sans-serif;
position: relative;
border-radius: 5px;
background-color: #30ae7b;
background-repeat: no-repeat;
background-position: center center;
}
.smt-modal-inner {
margin: 0 auto;
width: 100%;
position: relative;
padding: 10px 15px;
}
.smt-close-bt,
.smt-close-icon {
z-index: 2;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: 700;
position: absolute;
right: 5px;
top: 5px;
font-size: 12px;
color: #fff;
}
.smt-img-div {
width: 100%;
}
.smt-img-div img {
width: 70%;
max-width: 100px;
}
.smt-h2 {
font-size: 12px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: #ffffff;
display: inline-block;
margin: 10px 0;
}
.smt-button {
border-radius: 5px;
background-color: #f8f8f8;
border: 0;
width: auto;
min-width: 75px;
max-width: 150px;
height: auto;
font-size: 12px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 14px;
letter-spacing: normal;
text-align: center;
color: #30ae7b;
display: inline-block;
padding: 5px;
cursor: pointer;
overflow: hidden;
}
</style>
</head>
<body class="smt-body">
<div id="NC_background_color" class="smt-modal smt-edit-background-color">
<a id="NC_CLOSE_BUTTON" href="javascript:void(0);" class="smt-close-bt smt-edit-close-button NC_REMOVE">Close</a>
<a id="NC_CLOSE_ICON" href="javascript:void(0);" class="smt-close smt-close-icon smt-edit-close-icon">X</a>
<div class="smt-modal-inner">
<div class="smt-img-div">
<img id="NC_IMAGE" src="https://cdnt.netcoresmartech.com/webmsg/banner/banner-add-to--cart2.png"
class="smt-edit-image">
</div>
<h2 id="NC_TEXT_ONE" class="smt-h2 smt-edit-title">THERE IS SOMETHING LEFT<br>IN THE CART</h2>
<input id="NC_INPUT_TEXT1" type="text" name="name" class="smt-input NC_NOT_ACTIVE NC_ACTIVE" placeholder="Name"
data-attribute="EMAIL">
<div class="smt-cta-group callToAction">
<button type="button" id="NC_CTA_ONE" class="smt-button smt-edit-button smt-close" data-action-link="url">BUY</button>
<button type="button" id="NC_CTA_TWO" class="smt-button smt-edit-button smt-close">BUY2</button>
</div>
</div>
<div style="clear: both"></div>
</div>
</body>
</html>
Updated almost 4 years ago