OSM Templates (Old Editor)

This document lists the information and guidelines to configure the different pre-defined on-site messaging templates in MoEngage and how to customize the HTML code of these templates in the code view.

Template Types

With MoEngage On-site Messaging Campaign, you can use different types of pre-defined templates as per your use case. The below table tells you about which template to select -

Template Type Description
Simple Image Popup Rendered in the center of the page over a translucent overlay and has only one widget - image. Use this when all the content is captured inside an image.
Center Popup with one button Rendered in the center of the page over a translucent overlay and has two widgets - one image and a button. Use this when you want to add a separate CTA for your pop-ups.
Sticky Banner with Header, Text and Button This sticky banner can be configured to be shown at the top or bottom of the page and gives you the flexibility to add header, text, button and a small image as well.
Lead Gen Template Use this template when you want to capture some information from your website visitors. The captured information will be saved in your user profiles in MoEngage.
Sticky Banner with Image This sticky banner can be configured to be shown at the top or bottom of the page and can be used when you simply want to show an image banner.
Survey Popup Use this center pop-up template, when you want to show Typeform surveys through MoEngage.
Survey Sticky Banner Use this sticky side banner template when you want to show Typeform surveys non-intrusively to your website visitors at the corner position on the website. (bottom-left, bottom-right etc.)
Side Banner with Image Use this side banner template when you want to convey information non-intrusively to your website visitors by placing simple images at the corner positions on the website. (bottom-left, bottom-right etc.)
Sticky Header with Text and Button This sticky banner can be configured to be shown at the top or bottom of the page and can be used when you simply want to show text messages with a CTA.
Side Banner with Image and Button This side banner template allows you to add an image and a button and be placed non-intrusively on the corner positions on the website.
Simple Sticky Header This sticky banner can be configured to be shown at the top or bottom of the page and can be used when you simply want to show a text message.

Images

We recommend our On-site Messaging users to upload images of high definition but not exceeding 1 or 2 MB in size. This is because before a message is shown on the device, the image within the message is downloaded from a CDN before being shown to the user. If a user is on a slower internet connection, it might take longer for the image to be downloaded and hence there will be a delay to show the message to this user.

Aspect Ratio of Images used in On-site Messaging Campaigns

Below are some recommended aspect ratios of images for each On-site Messaging Template. You can always introduce images of different dimensions in your on-site messaging templates and customize the styles and dimensions by opening the code view editor.

Template Name Recommended Aspect Ratio
(width : height)
Simple Image Popup Message re-sizes to fit images of most sizes. Recommended aspect ratios include 1:1, 2:3, 3:2 etc. and at least 400*400 in dimension so that the image does not distort. Popular dimensions are 600*600, 400*600, 600*400 pixels.
Center Popup with one button Message re-sizes to fit images of most sizes. Recommended aspect ratios include 1:1, 2:3, 3:2 etc. and at least 450*450 in dimension so that the image does not distort. Popular dimensions are 600*600, 400*600, 600*400 pixels.
Sticky Banner with Header, Text and Button There is a small icon image here and the recommended image resolution is about 5:3. Popular dimensions are 150*90 pixels, 250*150pixels
Lead Gen Template You can add an image to the background of this template by going to Container -> Background -> Image. You can use images of dimension 400*500 pixels
Sticky Banner with Image You can use images which are wider and occupy most of the desktop web width. Popular dimensions are 1024*80 and 1024*50 pixels. You must create separate campaigns for your desktop web and mobile web for this template.
Survey Popup Only add a Typeform survey URL here.
Survey Sticky Banner Only add a Typeform survey URL here.
Side Banner with Image Use Images of aspect ratio 3:4 or 3:5 and at least 300*400 pixels so that the image does not distort on larger devices device. You must create separate campaigns for your desktop web and mobile web for this template.
Sticky Header with Text and Button Not recommended to add an image here.
Side Banner with Image and Button Use Images of aspect ratio 3:4 or 3:5 and at least 300*400 pixels so that the image does not distort on larger devices device. You must create separate campaigns for your desktop web and mobile web for this template.
Simple Sticky Header Not recommended to add an image here.

Accepted image types

For On-site Messaging, you can upload .png, .jpeg, and .gif as images in any of the templates.

Responsiveness of Templates

If you are using large images of odd aspect ratio, it is recommended to create two different campaigns for desktop web and mobile web to ensure that nothing breaks when the templates are rendered on a desktop web browser and a mobile web browser.

Image Quality and Size

It is recommended to use high-resolution images so that they do not distort even on large screens. The higher the image size, the higher the chances of the image failing to download on a device with a flaky internet connection. Use images of less than 2MB in size to keep a good balance between image quality and time for download.

Background Color

Background color allows you to add a background to your on-site messages. It can also be removed to make your messages transparent. You can define a background color by navigating to Container -> Background and selecting one of the options here -

  • Solid - when you want to add a background color to your template
  • Transparent - when you want the message background to be transparent
  • Image - when you want to add an image to your template background. This is not generally recommended.

Screen_Shot_2021-02-11_at_6.58.59_PM.png

Edit in code view

You can now edit the HTML code of any of the existing MoEngage templates by clicking on the code view button as shown below -

code_view.png

Once you click on the code view button, you can edit the HTML, save it and see a preview for validation. Please note that if you replace the MoEngage template HTML completely, you will not be able to see the UI Editor for customizing your templates.

Please ensure that you are selecting the appropriate template as per your use case and then editing/adding your HTML code to the template.

If you are building your own HTML templates, please take note of the below points for tracking clicks and allowing your users to close the template - 

-For close button: Add this CSS class in your templates:   moe-inapp-close
Adding this class is very essential if you want the user to be able to close the template. MoEngage SDK will only close the template if this class is found.
Please note that the template will be closed only basis of the moe-inapp-close CSS class. Please do not use custom Javascript functions for closing the templates as it will result in inconsistent behavior.

- For tracking clicks : Add this CSS class in your template:  moe-inapp-click
Adding this class is very essential for MoEngage to be able to track clicks and attribute this to a particular campaign.

- For closing the template when the user clicks on a CTA or a link, add both the classes: moe-inapp-close and moe-inapp-click to the HTML template. This will ensure that the template is closed after the user is redirected to the URL.

Lead Gen Template

MoEngage's On-site Messaging (OSM) allows you to capture the leads from your website visitors. You could choose to capture the Email Id, Mobile Number, or any other preferences and save it in your MoEngage user profiles for re-targeting.

Popular Use-cases

Here are a few popular use cases for the Lead Gen Templates:

    • Capture the Email Address of website visitors and re-target them via Emails later.
    • Capture the Mobile Number of website visitors and re-target them with SMS later.
    • Capture the Name of the user to personalize the communication sent to the user.
    • Capture user interest related to the choice of brands, products, and so on.

Create Lead Gen Campaign

To create a Lead Gen Campaign in MoEngage, do the following:

      • Select the Lead Gen Template in the template selection page (second step of OSM Campaign Creation).
        LeadgenTemplate.png

      • Follow the steps mentioned in the OSM campaign creation document. For more information, refer to Create OSM campaigns.
      • To capture the inputs shared by the user, you will have to map the input from the Lead Gen Template to user attributes.  In step two of campaign creation, click on the input widget of the template and then actions to configure the user attribute where this input will be saved.

        Screen_Shot_2020-06-30_at_12.33.00_PM.png

      • If one out of the two input widgets is not required, you could also hide the input widget as shown below:
        Screen_Shot_2020-06-30_at_12.33.41_PM.png

Where to see the captured data?

After the Lead Gen Template is shown to your users and they submit the form as shown below, the data is tracked and saved in MoEngage automatically.

Screen_Shot_2020-06-30_at_12.39.37_PM.png

 

You can see the saved input in the user profile, as shown below. MoEngage also tracks an event - MOE_RESPONSE_SUBMITTED whenever a submission happens using a Lead Gen Template. This data is visible in the user profile, as shown below.

Screen_Shot_2020-06-30_at_12.48.37_PM.png

MoEngage captures the First Name and Email Address user attributes by default. You can add more input fields by changing the template content. 

Example - Phone Number

Add an <input> field for the phone number after the Email Address by using the following code.

JavaScript
<input
                      placeholder="Phone Number"
                      class="input-container moe-element"
                      data-id="INPUT3"
                      id="TEXT_INPUT_3"
                      data-user="u_mb"
                  />
<label class="moe-error-text invisible">This field is required</label>

To make phone numbers mandatory, add required in the Phone Number input field.

Example - Error Message

If you have marked a field as mandatory, please use the below JS to show an Error message when the form is submitted without that field.

JavaScript
<label class="moe-error-text invisible> any error message </label>

Example - Custom Validation

The lead template validates for a valid email address, but if you want to add any other validation to the existing fields or the new form fields that you have added, please change the <input … /> tag of that field and add the following code:

JavaScript
data-input-validation-type="any name"

Next, add the custom validation of the field in isFormDataValid() method. For example, below is the validation check for an Indian mobile number.

JavaScript
//Mobile number validation
function isMobileNumberValid(mobile) { 
const mobileRegex = /^[789]\d{9}$/;
return mobileRegex.test(mobile);
}

Use the isMobileNumberValid() method inside isFormDataValid() for validating mobile numbers.

SMS Sign-Up Template

MoEngage's On-site Messaging provides an SMS Sign-Up template to enable you to request consent from your users to receive SMS notifications. For more information on compliance for North America, refer to SMS for North America Region.

MoEngage provides two templates for the SMS Sign-Up.

      • Fullscreen - SMS Sign-up with image
      • Popup - SMS Sign-up without image

Prerequisites

Ensure that you are aware of the SMS compliance for the North American region. For more information, refer to SMS Regulations in the US.

Create SMS Sign-Up Campaign

      1. Select one of the SMS Sign-Up Templates during On-site Messaging Campaign Creation.
        SMSSignUpUnit.png
      2. Configure the On-site Messaging campaigns as described in Create On-site Messaging Campaign.

Fullscreen - SMS Sign-up with image and Popup - SMS Sign-up without image

      1. Configure for Web and Mobile as needed.
      2. Configure the button, image, and text as needed.
      3. Configure the legal text. MoEngage provides the following text by default.
        By signing up for text messages, you agree to receive recurring automated promotional and personalized text messages (cart reminders) at the phone number provided. Consent is not a condition to purchase. Msg & data rates may apply. Msg frequency varies. Reply HELP for help and STOP to cancel.
      4. Configure the Terms of Service according to your needs.
      5. Configure the Privacy Policy according to your needs.

Web

Do the following when templates are used for desktop or web usage:

      1. Provide a valid mobile number 
      2. Click on the button to confirm the subscription to receive notifications.

OSMFullScreen_Web.gif

OSMPopUp_Web.gif

Mobile

Do the following when templates are used for mobile usage:

Configure the button to receive consent by adding the following in the URL of the Action field of the button:
sms:+11234567890?&body=START

Field Description
sms Provide the mobile number used to receive consent and subscribe for notification.
body Add the Opt-In keyword.
For more information about keywords, refer to Configure Subscription & Keywords.

OSMFullScreen_Mobile.gif

OSMPopUp_Mobile.gif

Where to see the captured data?

You can see the saved input in MoEngage user attributes. MoEngage uses the event MOE_RESPONSE_SUBMITTED whenever a submission happens using an SMS Sign-up on-site messaging.

The User Profile displays the attribute and the attribute status.

UserProfile_OSM.png

Previous

Next

Was this article helpful?
1 out of 3 found this helpful

How can we improve this article?