HTML templates for In-app campaigns

Index

Introduction

You can leverage HTML In-app messages to create and use complex In-app messaging layouts for engaging your app users when they are inside the app.

Following capabilities are supported with HTML In-app messages -

  • Using HTML templates for showing pop-ups inside your mobile apps. This will unlock features like surveys, lead gen, spin the wheel etc. with in-app campaigns. A few sample templates are available here.
  • Support for Landscape and Portrait mode with in-app messaging campaigns
  • Support for Tablets and TV Os with in-app messaging campaigns
  • Upload custom HTML Templates: Create your own in-app templates and upload them as a ZIP file or simply paste your HTML while creating In-app campaigns.

Enabling HTML In-apps

HTML In-apps is currently a beta feature and to be able to use this, there are two pre-requisites -

  • Since the feature is in beta, please signup for our beta program by writing to your Customer Success Manager or to support@moengage.com
  • Please update your Android SDK Version to 11.4.00 and iOS SDK Version to 7.1.00

Creating HTML In-app Campaigns

To use custom HTML templates with In-app campaigns, please follow the below steps -

  • Start creating your In-app campaigns like you generally do and then reach the template selection step
    Screen_Shot_2021-08-31_at_9.39.44_AM.png

  • From the template selection step, scroll down and select one of the following custom templates

    - ZIP Upload

    - Custom HTML Upload

  • Prepare your HTML template for use with MoEngage In-app campaigns.  You can refer the sample templates and template preparation guide here.

  • Once selected, please follow the steps mentioned in the subsequent sections to upload either a ZIP file or Custom HTML file of your templates

Preparing HTML Templates

HTML In-apps are rendered on your mobile apps inside a full screen webview and MoEngage SDK will render the HTML as it is without any operations on it. A few things to note here when preparing your HTML templates which will be rendered as in-app templates - 

  • You can refer the sample templates that we have hosted for you here. You can either directly download and upload them on MoEngage or edit them as required. These sample templates also act as references when you want to go about building your own HTML templates from scratch.

  • The HTML Templates will always occupy the entire screen on your mobile app. Even if the HTML of the template does not occupy the entire screen, there will be a transparent webview there which will restrict the user from interacting with your app. Due to this functionality, it is always recommended to put a transparent overlay behind your templates. This can be configured as the background of your html template.

  • All the interactions from the template which need to be logged as data points in MoEngage either for calculating performance stats of your campaigns (like clicks) or as user data points like (events, user attributes - email, mobile number, rating etc.), you would need to leverage the MoEngage JS methods and use them inside your HTML templates.

  • On iOS, there are two pointers that need to be noted -
    • By default zoom, scaling will be enabled in webview. Disabling has to be done from html  via meta tag.
    • On iOS device with the notch, client have to update their css to support the safe area, so that content does not overlap with the notch

  • For background images provided inside the HTML template like shown below, MoEngage will not pre-fetch the URLs as these URLs are inside the template styles. Please do not use uploaded asset URLs for the background images. For such cases, absolute URL will be required which MoEngage SDK will download and render on runtime. For all other images, we pre-fetch the images so that when the In-app message is rendered, there is no buffer.
    Screen_Shot_2021-09-06_at_1.08.44_PM.png

Components supported

Although HTML In-app templates support all HTML and CSS components, the below listed components would are some of the key highlights with which you would be able to derive a lot of value from the HTML In-app campaigns - 

Element Use-cases
Audio / Video You can now play video / audio files from your in-app campaigns for conveying information to your users. These are especially helpful during user on-boarding process.
Image / GIF Promote offers / content / products or services with your in-app campaigns and grab user's attention with rich images / GIFs.
Input You can capture user input like email address or mobile number via your HTML In-app campaigns
Survey Run surveys on your mobile apps via HTML In-app campaigns
Carousel Show more than one offers / products / services in a single pop-up via with a carousel like interaction.

 

Asset Uploader

While creating an In-app campaign with custom HTML templates, you can upload your own assets and link them inside the HTML of your templates - 

ezgif.com-gif-maker__1_.gif

 

JavaScript Bridge

The JavaScript bridge is required to track actions from your HTML In-app message. Some of the actions include click tracking, message closing and data tracking.

This document lists all the JavaScript methods available for use with HTML In-app templates. Once you prepare the HTML template, you need to integrate the JS Methods in your template for the actions and stats to be tracked.

Fixing template errors

While creating an In-app campaign on MoEngage, you may see up to 3 different warnings as shown below -
Screen_Shot_2021-09-01_at_5.05.33_PM.png

Below table lists these warnings and the resolution for those -

Error Message Impact Resolution
You have not included a close button in your template. When your users see this template, they will not be able to close the template without clicking on it. Your users will not be able to close the in-app message because you haven't added the close method in your template. Please include the JS Bridge method - MoEngage.closeMessage() in your templat
Click tracking is not implemented in your template. You will not be able to see any clicks for this campaign in your campaign stats. You will not be able to see clicks in your campaign analytics on MoEngage. Please include the JS Bridge method - MoEngage.trackClicks() as required.
Some of the uploaded assets are not referenced in your template. This message indicates that you you have uploaded a few assets but have not used some of those assets in your template. Clicks on View Uploaded Assets and ensure that you are not missing out on referencing any required asset in your template.

 

Custom HTML Upload for In-app Templates

When you select this option from the template selection screen of in-app campaign creation, you can directly paste the HTML of your template on MoEngage dashboard and upload assets as required. If you select this option, then you will be redirected to the code view editor where you can paste the HTML code of your template - 

Screen_Shot_2021-08-31_at_10.30.19_AM.png

 

ZIP file upload for In-app Templates

When you select this option from the template selection screen of in-app campaign creation, you can upload your HTML + Assets together as a single ZIP file.

Once you choose this option, a pop-up will open up where you can upload your template ZIP file 
Screen_Shot_2021-09-03_at_10.29.12_AM.png

When preparing your ZIP file, please ensure you follow the below steps - 

  • Ensure that your .zip file is less than 5MB in size
  • Files present inside of the Zip should not contain *, /, \, &, ~, &quote; in their names
  • All images should be in JPG, JPEG, PNG, SVG or GIF formats
  • Relative path specified for images should match zip folder structure including case sensitivity

Testing HTML Templates

To test the preview of your HTML Templates, you can make you use of the  device preview as shown below -

Screen_Shot_2021-09-01_at_3.39.53_PM.png

You can also click on the View portrait and landscape button to see a Landscape and Portrait Mode preview of your in-app campaign as shown below -

Screen_Shot_2021-09-01_at_3.39.43_PM.png

 

Sample Templates

The sample HTML templates are available in this help article.

 

Other new features

With HTML In-apps, you can now leverage the following features additionally - 

Show In-app messages in Landscape mode

If you need to show In-app campaigns in Landscape mode, you can now leverage the HTML In-app templates and go to Template Settings to configure this -

Screen_Shot_2021-09-02_at_10.47.49_AM.png

 

You need to upgrade your SDK Versions to 11.4.00 (Android) and 7.1.0 (iOS). Default selection for device orientation is Both which means that an HTML in-app campaign will be shown on both portrait and landscape mode by default.

Few pointers to note here:

  • If the in-app campaign is configured only for Portrait mode then the in-app message will be dismissed when the device rotates from Portrait to Landscape mode.
  • If the device is in Portrait mode and in-app campaign is only configured for Landscape mode then the in-app campaign will not be shown in this case.
  • The selected device orientation will stay the same across different variations and platforms.
  • On Android, on device rotation, the in-app message is dismissed and re-rendered again.

Show In-app messages on Tablets or TV

If you need to show your in-app messages on Tablets and TVs then you can leverage the HTML In-app campaigns -

Screen_Shot_2021-09-02_at_10.47.49_AM_2.png

The default selection is on.ly for Mobile so any additional devices that need to be targetted would have to be configured additionally during the campaign creation.

 

Was this article helpful?
0 out of 0 found this helpful