Custom HTML

Learn to create templates using our custom HTML editor.

For enhanced control over your campaigns, customize web messages with HTML, CSS, and JavaScript to achieve unique branding. You can use custom HTML to create messages perfectly for your brand and engage your website users when they are on the website.

The following functions are supported with HTML web messages.

  • Use HTML templates for showing messages on your website.
  • Support for Landscape and Portrait mode with web message campaigns.
  • You can upload custom HTML templates as a code file or simply paste your HTML code while creating web message campaigns.

๐Ÿ“˜

Important Points to Remember

  • The HTML/CSS should be specified as per W3C standards.
  • We recommend you to use system default fonts.

Create Campaign with Custom HTML

To create a Web message campaign using HTML, follow these steps:

  1. Choose any layout under Content section, when you create your campaign.
  2. Select Custom HTML option to create the content for your campaign using our Code Editor.

Refer to the table below to know more about all the Layouts.

LayoutDescription
BannerBanner is a bar at the top or bottom of the screen, ideal for alerts.
Sticky BarA sticky bar is a fixed bar at the top or bottom, remains during scrolling.
ModalA modal is a pop-up window on the screen for important messages or input.
Full ScreenFull screen layout covers the entire screen, ideal for important announcements or offers.

As you proceed, you see a Configure web message screen. When configuring a web message in the HTML editor, you'll find these options:

OptionDescription
Message PositionSpecifies where the message appears on the screen. It contains the following options:
classic-bottom-right
classic-bottom-left
classic-top-right
classic-top-left
classic-center
drawer-left
OverlaySets the colour and colour codes to determine the overlay appearance with the background.
WidthSets the width of the template
HeightSets the height of the template
  1. On the left pane, go to the Code Editor section and add your HTML code in the box.
Code Editor

Code Editor

  1. Under Template settings, adjust message position, overlay, height, and width to your preference. If needed, press the CLEAR button to delete any existing code. Our Code Editor also gives a Validate option, which verifies the correctness of the code you've entered.
  2. On the right pane, Live Preview your template based on the code you've entered. .Toggle the Show on device button to preview the web message with or without being displayed on the website.
Preview Template

Preview Template

  1. Click the Next button to send your web message.

Refer here to Schedule and Save your web message campaign.

Rules to Create Custom HTML

When creating a web message template in the HTML editor, follow these rules:

  1. Use a complete DIV-based layout.
  2. Apply CSS classes inline.
  3. Ensure images have copyright permission.
  4. Only one <img> tag is allowed per template.
  5. Start the HTML with .
  6. Include a title element in the head section:
<title>My Form</title>
  1. The tag must include these attributes:
  • alt (mandatory): Alternate text displayed if the image doesnโ€™t render.
  • title (optional): A tooltip that appears when the user hovers over the image.
<img src=โ€some-linkโ€ alt=โ€some-imageโ€ />
  1. An id is mandatory in all templates.
  2. Commented code 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-->

๐Ÿ“˜

Note

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

Templates

Explore a variety of templates for different elements, including input fields, background images in CSS, image tags, titles, div structures and sequences, links (buttons), paragraphs, and more. Below are essential elements to create a attractive web message template.

Codes for Template Elements

1.Background Image Enhance your message template by incorporating a captivating background image.

๐Ÿ“˜

To Add

insert id="NC_background_color"

<div id="NC_background_color" class="smt-modal smt-edit-background-color"></div>
2.Use of 'Container' Class for Parent Containers Ensure proper layout by avoiding use of **container** class for wrapping elements.
<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>
3. Call-to-Action (CTA) Button Guide users effectively with an engaging call-to-action button. If the **href** attribute is empty, use **javascript:void(0);** for functionality.
<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>
4.Content Element with Dynamic IDs Keep your message dynamic by inserting content elements with unique IDs like **NC_TEXT_ONE**, which can be incremented for subsequent elements.

๐Ÿ“˜

To add

Insert id = NC_TEXT_ONE

The โ€œidโ€ will keep on changing followed by number of

elements
(e.g. id=โ€NC_TEXT_ONEโ€, id=โ€NC_TEXT_TWOโ€ and so on)

<p id="NC_TEXT_ONE" class="smt-p smt-edit-content">GET FREE PERSONALIZED RECOMMENDATIONS FROM OUR TRAVEL EXPERTS !</p>
5.Form Element Maintain consistency and clarity by following the specified syntax for form elements.
<form id="NC_FORM1" class="smt-form">
6.Input Element Ensure seamless integration of input elements using the provided syntax.

๐Ÿ“˜

Important Note

  • On the 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 supported in Custom HTML.
<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>
7.IMG Tag Enrich your message with visually appealing images using the suggested syntax for IMG tags.
<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>
8.Action Button Enhance user engagement by implementing action buttons according to the provided syntax.
<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>
9.Form Action Button Initiate user interaction with form action buttons using the prescribed syntax.
#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>

๐Ÿšง

NOTE

Dropdowns are not supported in custom HTML.

10.Redirection URL Direct user navigation efficiently by adhering to the specified syntax for redirection URLs.
#(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>

Codes for Template Types

Below, you'll find a variety of code snippets for different template types, including:

1.Sticky Bar Template

Sticky Bar Template

Enhance user experience with a Sticky Bar Template, ensuring important information remains visible during scrolling. Refer to the code below for seamless implementation.

<!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>
2.Modal Template

Modal Template

Enhance user interaction with a Modal Template, ideal for presenting important content or actions. Refer to the code below for seamless integration.

<!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>
3.Banner template

Banner Template

Improve user engagement with a Banner Template, ideal for presenting key messages or promotions. Refer to the code below.

<!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>
4.Full Screen Template

Full Screen Template

Create an immersive experience with a Full-Screen Template, maximizing your content's visibility and impact. Refer to the code below.

๐Ÿ“˜

Note

Add the height and width in body tag as 100% as mentioned in the code 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>
5.Timer Template

Timer Template

Add a dynamic countdown to your template by adding Timer Template to your website. Refer to the code below.

๐Ÿ“˜

Points to remember

Parent div should always have id = 'NC_GAMIFICATION_TIMER'.
Enter the value of days, hours, minutes & seconds on respective span tags.
Style changes can be made to below code, but class names should remain same. Code should be HTML5 compliant

<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>
  1. Add this code to the end of the body tag. Ensure the numbers for days, hours, minutes, and seconds match what you entered in in the above code, under the respective keys.
<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"}'>
  1. Insert the following snippet within the body tag at the end.
<script src="//cdnt.netcoresmartech.com/smartech_gamify.js"></script>
6.Form Templates

Form Template

Our editor intuitively identifies your form and offers the following options for customization:

  • Store Response
  • Thank You Page
  • Field Requirements
  • Attribute Mapping
  • Personalization

Refer to the table below for details on actions and how to use these options effectively.

OptionDescriptionAction to do
Store ResponseManage where your form data is stored.Select the list to save form data.
Thank You PageCustomize the page users see after submitting the form.Upload a separate HTML for your Thank You page.
Field RequirementsSpecify if fields are necessary or optional.Specify mandatory or optional fields (for forms with multiple fields).
Attribute MappingConnect form fields to corresponding attributes for easy tracking.Map fields with attributes.
PersonalizationTailor content to individual form fields for a personalized experience.Customize content for each form field.

Refer to the code below for form templates featuring two 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>