Blog

How to create a custom HTML Web Message

Suggest Edits

📘

Note

Recommendation:

  1. Use system default fonts

Rules:

  1. Complete DIV base layout
  2. Inline CSS classes
  3. Image needs to have copyright permission
  4. Not more than one image tag allowed for the particular template.
  5. The HTML should begin with
  6. Head should contain a title element, for eg:
<title>My Form</title>
  1. Image tag should contain below attributes:
  • alt (mandatory) - Alternate text which gets displayed when the image does not get rendered
  • title (optional)
    for example:
<img src=”some-link” alt=”some-image” />
  1. "id" is mandatory in all templates mentioned below
  2. 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-->

📘

We only support type="text" inputs and type="email" or "mobile" inputs are not supported.

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.

  1. For background image, insert id="NC_background_color" 
<div id="NC_background_color" class="smt-modal smt-edit-background-color"></div>
  1. For wrapping or parent containers, please do not use 'container' class. 
<div class="container">  // DO NOT USE THIS
  <img id="NC_IMAGE" alt="dummy title" src="https://cdnt.netcoresmartech.com/webmsg/banner/banner-lg902--bg.jpg" class="smt-edit-image">
</div>

<div class="smt-container"> // ALTERNATE SOLUTION
  <img id="NC_IMAGE" alt="dummy title" src="https://cdnt.netcoresmartech.com/webmsg/banner/banner-lg902--bg.jpg" class="smt-edit-image">
</div>
  1. Follow below template for creative close to action (CTA) button. if "href" does not have any URL and is blank, then please use javascript:void(0); as shown below:
<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>
  1. 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...)

  1. Follow below syntax for form element
<form id="NC_FORM1" class="smt-form">
  1. Follow below syntax for input element
<div class="smt-form-group">
  <input id="NC_INPUT_TEXT1" type="text" name="Email" class="smt-input" placeholder="Email" data-attribute="EMAIL">
  <span class="smt-error" id="NC_ERROR1">Please enter your email address</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…

🚧

Dropdowns are not supported in custom HTML.

  1. Follow below syntax for IMG tag
<div class="smt-img-div"> 
  <img id="NC_IMAGE" alt="dummy title" src="https://cdnt.netcoresmartech.com/webmsg/banner/banner-lg902--bg.jpg" class="smt-edit-image">
</div>
  1. Follow below syntax 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>
  1. Follow below syntax for form action buttons (any 1)
#Close the message
<button type="button" id="NC_CTA_ONE" class="smt-button smt-edit-button NC_ACTIVE smt-close">Close</button>
#Save and close
<button type="button" id="NC_CTA_ONE" class="smt-button smt-edit-button NC_ACTIVE smt-save-close">Save and Close</button>
#Save and Open ThankYou Page
<button type="button" id="NC_CTA_ONE" class="smt-button smt-edit-button NC_ACTIVE">Save form data & open Thankyou page</button>
  1. Follow below syntax for redirection URL
#(button) redirection URL which opens in same tab 
<button type="button" id="NC_CTA_ONE" class="smt-button smt-edit-button NC_ACTIVE" data-action-id="NC_CTA_ONE" data-action-link="https://www.google.com/"> BUY</button>

#(button) redirection URL which opens in new tab
<button type="button" id="NC_CTA_ONE" class="smt-button smt-edit-button NC_ACTIVE" data-action-id="NC_CTA_ONE" data-action-link="https://www.google.com/" data-action-target="_blank"> BUY</button>

#(image only template) redirection URL which opens in same tab 
<div id="NC_image_only" data-action-id="NC_image_only" data-action-is-prime="true" data-action-link="https://www.google.com/">
  <span id="NC_background_image" class="smt-modal smt-edit-background-color" style="
    background-image: url('https://www.insidehighered.com/sites/default/server_files/media/Inside%20Digital%20Learning/iStock-872232248.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    display: block;
  ">
</span>
</div>

#(image only template) redirection URL which opens in new tab
  <span id="NC_background_image" class="smt-modal smt-edit-background-color" style="
    background-image: url('https://www.insidehighered.com/sites/default/server_files/media/Inside%20Digital%20Learning/iStock-872232248.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    display: block;
  ">
</span>
</div>

Sticky Bar Template

<!DOCTYPE html>
<html lang="en" class="smt-html">
  <head>
    <title> Sticky Bar </title>
    <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 {
        height: 60px;
        margin: 0 auto;
      }
      .w100 {
        width: 100%;
      }
      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: 60px;
        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-dropdown > option {
        color: #333;
      }
      .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%;
        height: 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: 5px 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: 768px) and (max-width: 1024px) {
        .smt-button-div {
          width: 45%;
          margin-right: 20px;
        }
        .smt-button {
          width: 100%;
        }
      }

      @media screen and (max-width: 768px) {
        .w100 {
          position: relative;
        }
        .smt-row {
          display: flex;
          align-items: center;
        }
        form {
          width: 100%;
          padding: 0;
        }
        .smt-sticky-bar {
          max-height: 55px;
          padding: 0 2% 0 5%;
          background-size: cover;
        }
        .smt-h1 {
          font-size: 11px;
          line-height: normal;
          margin-bottom: 5px;
          padding: 0 10px;
        }
        .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%;
          position: relative;
          display: inline-block;
          top: 0;
          height: auto;
          margin-right: 15px;
        }
        .smt-button {
          height: 25px;
          line-height: 25px;
          font-size: 9px;
          width: 90%;
          padding: 0 2px;
        }
        .smt-error {
          font-size: 9px;
        }
        .smt-row {
          padding: 5px 0;
        }
        .smt-close-bt {
          font-size: 12px;
          left: 5px;
          right: auto;
          top: 0%;
          color: #000;
          right: 0;
          left: auto;
          z-index: 1;
        }
        .smt-hidden4-mobile {
          background: none;
        }
      }

      @media screen and (max-width: 380px) {
        .smt-content-div {
          width: 90%;
        }
      }

      @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 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 smt-hidden4-mobile">
          <h1 id="NC_TEXT_ONE" class="smt-h1 edit-title1">GET 25% OFF YOUR FIRST ORDER</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 Template

<!DOCTYPE html>
<html lang="en" class="smt-html">
  <head>
    <title> Modal </title>
    <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;
        padding: 50px 0 30px 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 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 auto;
        width: 85%;
        height: auto;
        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: auto;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .smt-img-div .smt-image {
        min-width: auto;
        max-width: 100%;
        max-height: 375px;
        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;
        word-break: break-all;
      }

      .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;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .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 {
          height: auto;
          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: 641px) and (max-width: 767px) {
        .smt-modal {
          height: auto;
          padding: 20px 0;
        }
        .smt-h1 {
          font-size: 25px;
        }
        .smt-h2 {
          font-size: 20px;
          line-height: 30px;
          margin: 20px 0;
        }
        .smt-close-bt,
        .smt-close-icon {
          font-size: 18px;
        }
        .smt-button {
          min-height: 35px;
          line-height: 22px;
          font-size: 18px;
          padding: 5px;
        }
      }

      @media only screen and (min-width: 480px) and (max-width: 640px) {
        .smt-h1 {
          font-size: 18px;
          margin-top: 10px;
        }
        .smt-modal {
          max-width: 329px;
          height: auto;
          padding: 15px 0;
        }
        .smt-modal-inner {
          width: 80%;
          flex-direction: column;
        }
        .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: 8px 0;
        }
        .smt-p button {
          font-size: 16px;
        }
      }

      @media only screen and (max-width: 480px) {
        .smt-modal {
          max-width: 229px;
          height: auto;
          padding: 10px 0;
        }
        .smt-modal-inner {
          width: 80%;
          flex-direction: column;
        }
        .smt-img-div {
          height: auto;
        }
        .smt-close-bt,
        .smt-close-icon {
          z-index: 2;
          font-size: 16px;
        }
        .smt-img-div .smt-image {
          width: 50%;
          height: auto;
        }
        .smt-h1 {
          font-size: 16px;
          margin-top: 10px;
        }
        .smt-h2 {
          font-size: 14px;
          margin: 5px 0 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;
          margin: 0;
        }
        .smt-col1,
        .smt-col2 {
          float: none;
          width: 100%;
          height: auto;
          text-align: center;
        }
        .smt-p {
          margin: 10px 0;
        }
        .smt-p button {
          font-size: 17px;
        }
      }
    </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" alt="Add text you want to displaye when the image does not get rendered"
              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>
  </body>
</html>

Thank You HTML
Based on Template resolution/dimension width and height will vary or need to update

<!DOCTYPE html>
<html lang="en">
  <head>
    <title> Thank You HTML </title>
   <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 Template

<!DOCTYPE html>
<html lang="en" class="smt-html">
  <head>
    <title> Banner </title>
    <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 {
        display: flex;
        padding: 30px;
        width: 100%;
        max-width: 300px;
        min-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;
        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-dropdown > option {
        color: #333;
      }
      .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: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;
        }
      }
    </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 Template

Please add the height and width in body tag as 100% as shown below.

<!DOCTYPE html>
<html lang="en" class="smt-html">
  <head>
    <title> Full Screen </title>
    <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: 5px;
        margin-top: 12px;
        display: inline-block;
        padding: 10px;
        vertical-align: top;
        word-break: normal;
        overflow-wrap:anywhere;
      }
      .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" style="height:100%;width:100%">
    <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" alt="Add text you want to displaye when the image does not get rendered"
                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>

Custom HTML Template

  • For Input text field, please add “data-attribute” attribute and assign the respective value.
  • For CTA (button), please add “data-action-link” attribute and assign the respective value.
<!DOCTYPE html>
<html lang="en" class="smt-html">
  <head>
    <title>Custom HTML</title>
    <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: 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-input {
        width: 100%;
        margin-bottom: 10px;
      }

      .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 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" alt="Add text you want to displaye when the image does not get rendered"
            src="https://cdnt.netcoresmartech.com/webmsg/banner/banner-add-to--cart2.png"
            class="smt-edit-image"
          />
        </div>
        <form id="NC_FORM1">
          <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="Email"
            class="smt-input NC_NOT_ACTIVE NC_ACTIVE"
            placeholder="Email"
            data-attribute="EMAIL"
          />
          <div class="smt-cta-group callToAction">
            <button type="button" id="NC_CTA_ONE" class="smt-button smt-edit-button smt-close">BUY</button>
            <button type="button" id="NC_CTA_TWO" class="smt-button smt-edit-button smt-close">BUY2</button>
          </div>
        </form>
      </div>
      <div style="clear: both"></div>
    </div>
  </body>
</html>

Timer Template

Step 1 : Below is the HTML code snippet for timer template. Parent div should always have
id = 'NC_GAMIFICATION_TIMER'.
Enter the value of days, hours, minutes & seconds on respective span tags.

<div id="NC_GAMIFICATION_TIMER">
      <div id="clockdiv">
        <div>
          <span class="days">00</span>
          <div class="smalltext">Days</div>
        </div>
        <div>
          <span class="hours">00</span>
          <div class="smalltext">Hrs</div>
        </div>
        <div>
          <span class="minutes">05</span>
          <div class="smalltext">Min</div>
        </div>
        <div>
          <span class="seconds">12</span>
          <div class="smalltext">Sec</div>
        </div>
      </div>
 </div>

📘

Note

  1. Style changes can be made to above code, but class names should remain same
  2. Code should be HTML5 compliant

Step 2: Add below code at the end of body tag with days, hours, minutes & seconds same as entered in step 1 to day, hour, minute & second key.

<input id="gamification_timer_config" type="hidden" value='{"day":"00","hour":"00","minute":"05","second":"12","isscheduledate":false,"isshowtext":false,"textfontcolor":"#ffffff","outerbackgroundcolor":"#51a6de","bgcolor":"#774494"}'>

Step 3: Next, add below snippet within the body tag at the end (after above code)

<script src="//cdnt.netcoresmartech.com/smartech_gamify.js"></script>

Form Templates

Now add form templates in any layout, our editor will intelligently detect and provide below options to set further:

  1. Store response in list: Choose the list where your form data will be saved
  2. Thank You Page HTML: Upload an independent HTML for Thank you page for your form
  3. Mandatory/Optional: Mark fields mandatory or optional (if there are more than 1 field in the form)
  4. Attribute Mapping: Map the fields with attribute
  5. Personalization: Set personalized content for each form field

Here is an example with 2 form fields

<!DOCTYPE html>
<html lang="en" class="smt-html">
  <head>
    <title>Custom HTML</title>
    <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: 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-input {
        width: 100%;
        margin-bottom: 10px;
      }

      .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 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>
        <form id="NC_FORM1">
          <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="Email"
            class="smt-input NC_NOT_ACTIVE NC_ACTIVE"
            placeholder="Email"
            data-attribute="EMAIL"
          />
          <div class="smt-cta-group callToAction">
            <button type="button" id="NC_CTA_ONE" class="smt-button smt-edit-button smt-close">BUY</button>
            <button type="button" id="NC_CTA_TWO" class="smt-button smt-edit-button smt-close">BUY2</button>
          </div>
        </form>
      </div>
      <div style="clear: both"></div>
    </div>
  </body>
</html>

Updated 5 months ago