HTML In-App Templates
 

PREREQUISITES

Ensure that you have Android SDK Version to 11.4.00 and iOS SDK Version to 7.1.00

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 -

  • Use HTML templates for showing pop-ups inside your mobile apps. This will unlock features like surveys, lead gen, spin the wheel, and so on with In-App campaigns. 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
    HTML.gif

  • 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 to the sample templates and template preparation guide here.

  • After selected, 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 web view and MoEngage SDK will render the HTML as it is without any operations on it.

When you prepare the HTML templates to display as In-App messages remember the following:

  • Use the Sample HTML Templates provided by MoEngage. You can either directly download and upload them on MoEngage or edit 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 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 web view 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.), leverage the MoEngage JS methods for iOS and MoEngage JS methods for Android 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 web view. Disabling has to be done from HTML  using the meta tag.
    • On iOS devices with the notch, update the CSS to support the safe area, so that content does not overlap with the notch

  • For background images provided inside the HTML template as described in the image, 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, an absolute URL is 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 following 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 or audio files from your In-App campaigns for conveying information to your users. These are especially helpful during the user onboarding process.
Image / GIF Promote offers or content or products or services with your In-App campaigns and grab user attention with rich images or GIFs.
Input You can capture user input like an 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 or product or service in a single pop-up using 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

The following table describes the warnings and the resolution

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 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 the 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
  • The relative path specified for images should match zip folder structure including case sensitivity

Personalization of HTML Template Content

You can personalize the content for all HTML templates. In step 2 of campaign creation, on the Content tab, go to the line of code you wish to personalize and type @.

You can personalize the content using User Attributes, User Events, Product Sets, Content APIs and Content Blocks.

For more information, refer to

HTMLInApp.gif

Do the following:

  1. Type @ to personalize the content.
  2. Click either Data personalization or Content Block.
  3. Click the Data personalization tab and from the drop-down, select one of the following
    1. User Attributes
    2. Select one of the following as for alternate (Fallback) to the personalization:

      • No Fallback
        Choose the option for personalized content. The option results in no alternates when the personalization does not work.
      • Do not send In-App
        Choose the option where if the personalization does not work, In-App messages are not sent.
      • Replace Text
        Type or paste the text used when the personalization does not work.
    3. Product Sets
    4. Content API
      1. Modify the values of the parameters of the Content API.
  4. Click the Content Block
    1. Select the content block to be inserted
    2. Click Insert only the content of the content block.
       

      INFORMATION

      When the option is selected

      • Only the content is inserted
      • The content is disconnected from the content block
      • Any content update in the content block is not reflected in the inserted content.
  5. Click Done.

Testing HTML Templates

To test the preview of your HTML Templates, use the device preview as described:

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 -

DeviceOrientation.png

 

You need to upgrade your SDK Versions to 11.4.00 (Android) and 7.1.0 (iOS). The default selection for device orientation is Both which means that an HTML In-App campaign is displayed 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 the 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.

DeviceTypes.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?
2 out of 2 found this helpful