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.
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
- 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.
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 -
|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.|
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 -
While creating an In-app campaign on MoEngage, you may see up to 3 different warnings as shown below -
Below table lists these warnings and the resolution for those -
|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 -
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
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 *, /, \, &, ~, "e; 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 -
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 -
The sample HTML templates are available in this help article.
With HTML In-apps, you can now leverage the following features additionally -
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 -
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.
If you need to show your in-app messages on Tablets and TVs then you can leverage the HTML In-app campaigns -
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.