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 -

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.

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.

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 -

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).
      
      
      
    • 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.
      
      
      
      
    • If one out of the two input widgets is not required, you could also hide the input widget as shown below:
      

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.

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.

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.

<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.

<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:

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.

//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. 1. 1. Select one of the SMS Sign-Up Templates during On-site Messaging Campaign Creation.
         
      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. 1. 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. 1. 1. Provide a valid mobile number 
      2. Click on the button to confirm the subscription to receive notifications.

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

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.