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