In-App Templates

Overview

MoEngage In-App NATIV campaigns or In-App Presets is a collection of pre-created In-App campaign templates featuring effective use cases, with an inbuilt help to guide you through the use-case and allow you to create these campaigns in a matter of seconds. Templates or Presets are:

  1. Popular and effective use cases advocated by our customer success experts
  2. With an in-built help guide
  3. Easy to use
  4. Created in a matter of seconds

MoEngage offers Native templates and HTML templates.

Template Types

Use different types of templates based on your requirements:

Template Type Description
Popup These templates are rendered in the center of the screen over a transparent overlay. Use this template when you want to divert the user's attention towards a sale or discount.
Full Screen Full-screen templates occupy the whole screen and block the app completely. These templates are useful when you want to divert the user's attention to something like a mandatory app update. Know more here.
Rating The 5-star rating template is a special template of In-App Nativ. This is also a pop-up template and allows the user to interact with the template and provide a rating, which is used for re-targeting as well. Know more here.
Nudges

These are non-intrusive templates that allow your users to continue to interact with the app. Nudges are either embedded inside the app, at the top or bottom of the screen, or appear over the screen. Use these templates when you want to alert your users about some new information, sale day, and so on.
For nudges, you need additional SDK integration, as mentioned in the developer documentation. Make sure you do not select "On custom event" trigger criteria while creating nudges, as nudges do not work with event triggers.

Note: To ensure that your InApp Nudges are visible within the visible section of the app interface in iOS, toggle on the iOS Safe Area in the Template Settings section of the Content Creation Step for the iOS platform, as shown in the image below.

iOSSafeArea.png

Self Handled With the Self Handled Template, you can leverage MoEngage In-App campaign delivery, segmentation smart trigger, and personalize but render the message yourself as required. This allows you to create complex visuals for your messages while leveraging other In-App capabilities.

Customizing Native In-App Templates

While using our InApp Native campaigns, there are a few guidelines that need to be followed to ensure that your in-app templates look the best on all devices.

Customizing Images

We recommend our In-App Nativ users upload images of high definition but not exceeding 1 or 2 MB in size. This is because before an In-App 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 in-app message to this user.

Aspect Ratio of Images

The following are MoEngage recommended aspect ratios of images for each template type -

Template Name Recommended Aspect Ratio (width:height)
Popup - Image, Text & 3 Buttons Message re-sizes to fit images of most sizes. MoEngage recommends aspect ratio for this template is 1:1 and about 50*50 pixels or more in size.
Popup - Image, Text & Button Message re-sizes to fit images of most sizes. MoEngage recommends aspect ratios include 1:2, 2:3, 3:2, 2:1 etc. and at least 450*450 in dimension so that the image does not distort
Popup - Image, Header, Text & Button Message re-sizes to fit images of most sizes. MoEngage recommends aspect ratios include 1:2, 2:3, 3:2, 2:1 and so on, and at least 450*450 in dimension so that the image does not distort
Popup - Image & 2 Buttons Message re-sizes to fit images of most sizes. MoEngage recommends aspect ratios include 1:2, 2:3, 3:2, 2:1 and so on, and at least 450*450 in dimension so that the image does not distort
Popup - Rating with Image Message re-sizes to fit images of most sizes. MoEngage recommends aspect ratio for this template is 1:1 and about 50*50 pixels or more in size.
Popup - Image Message re-sizes to fit images of most sizes. High-resolution Max 1200*2000 pixels and Min 450*450 pixels
Popup - Image & Button Message re-sizes to fit images of most sizes. High-resolution Max 1200*2000 pixels and Min 600*600 pixels
Full Screen - Image, Text & Button Use Images of aspect ratio 3:4 or 3:5 and at least 450*600 pixels so that the image does not distort on larger devices device.
Full Screen - Image Use Images of aspect ratio 3:4 or 3:5 and at least 450*600 pixels so that the image does not distort on larger devices device.
Nudge - Image Use wide images with an aspect ratio of approximately 5:1 or 6:1.
SMS Sign-up
warning

Warning

Only enabled for the North America region.

For more information, reach out to support@moenage.com.

Use to enable users to sign-up and consent to receive SMS notifications. Two types of templates are available - Fullscreen - SMS Sign-up with image and Popup - SMS Sign-up without image.

Accepted image types

For In-App Nativ, you can upload .png, .jpeg, and .gif as images in any of the In-App native templates. Note that for using GIFs in Android In-App Native, you need to ensure that the integration steps mentioned here are done. GIFs are supported by default on the iOS platform.

Image Quality and Size

For In-App Nativ templates, try 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 so as to keep a good balance between image quality and time for download.

Scaling Images as per device dimensions

The In-App messages you create are rendered on devices with different form factors and dpi. As a result, the image that you upload on the dashboard is scaled down or scaled up when it is rendered on devices of different dimensions. For example, you upload an image of dimensions 600*1000 pixels (width * height) on a device for the template - Popup - Image. Now when this message is displayed on a device with width = 320 pixels where the in-app message occupies about 400 pixels width. In this case, we will scale down the image width to 300 pixels and calculate the height basis the aspect ratio of the image (3:5) which is 500 pixels. So the 600*1000 pixels image will be scaled down to 300*500 pixels. This way the image will never break. When images are scaled up or down, it is important to know that we only scale the width and calculate the height basis the aspect ratio of the image so that the image is not distorted when it is displayed.

Background Images

Configure background images for the In-App messages.

  1. On the Content tab of step 2 of campaign creation, click Template Settings
  2. In the Template background image, use one of the following:
    • Click Image URL and type or paste the URL of the image.
    • Click Upload Image and drag and drop the image or click the upload from the computer the stored image.

Backgroundimage.png

warning

Warning

Background images are not scaled like the other images of the In-App content. Instead, the background image fit the width and height of the message that is calculated by the inner widgets. The background image might stretch due to the calculations.

Background Color

Background color allows you to add a background to your in-app messages. It can also be removed to make your messages transparent.

  1. On the Content tab of step 2 of campaign creation, click Template Settings.
  2. In the Background color, select the color.
  3. In the Phone Background color, select the color.

Backgroundcolor.png

Nudge Templates

Nudge templates help you display non-intrusive in-app notifications that facilitate a seamless in-app experience for your users. Nudges help you engage your users by offering impactful personalization, thus improving your ROI. MoEngage offers the following nudge templates to choose from.

Template Name Description
Popup- Gif & button This template contains background images, gifs, and buttons. Use this template for announcements.
Nudge- Rating This template contains background images, text, ratings, and buttons. You can customize the rating text in the template. Use this template to capture feedback from users. 
Nudge- Text & button This template contains background images, text, and buttons.  Use this template for new offers, promotional messages, and showing tips and tricks messages to users.
Nudge- Image & text This template contains background images, text, and an image. Use this template for new offers, promotional messages, and announcements.
Nudge - Gif This template contains a background image and a gif. Use this template for announcements.
Nudge - Video This template contains a background image and a video. Use this template for announcements.
Popup- Video & button This template contains a background image, video, and button. Use this template for announcements.
Nudge- Image only This template contains a background image and an image. Use this template for new offers and promotional messages.
Nudge- Text only This template contains a background image and text. Use this template for new offers and promotional messages and to display information such as tips and tricks.
Nudge- Image, text & button This template contains a background image, text, images, and buttons. Use this template for new offers and promotional messages and to display information such as tips and tricks
info

Note

Nudges are supported from InApp iOS SDK version 4.15.00 and InApp Android SDK version 7.0.0. For more information, refer to In-app Nativ Nudges.

To create an In-app campaign with Nudge Templates, do the following:

  1. In the second step of In-app campaign creation,  type Nudges in the Search templates search bar or choose Nudges in the Filter By Type filters on the left-hand filter menu. All the Nudge templates are displayed in the template selector.
  2. Choose the desired Nudge template by hovering over it and clicking Select. You can see a preview of the template on hover. On template selection, the template editor is displayed.
  3. Fill in the following fields in the template editor to create your nudge. Note: You can view the customizations made to the template in the preview as and when you make a change.
      • Template Settings
        Section Field Description

        Placement and Background

        Nudge Placement Nudges are placed at the bottom of the screen. Select Bottom-left or Bottom-right.
        Default display size Select the display size of the nudge in this dropdown list. Minimised and Fullscreen are the options available.
        Minimised container width Select the width of the nudge container using this field. This option is available only for the minimized display.
        Nudge background

         Select one of the following to add a background to the nudge:

        1. Upload image - you can upload an image from your computer using this option.
        2. Image URL - you can add a URL from where the background image should be picked using this option.
        3. Background Color - you can add a background color to the nudge with this option.
        Animation Entry Animation Select the animation to be used for the nudge's entry (when the nudge is shown to the user first) from the dropdown list.
        Exit Animation Select the animation to be used for the nudge's exit (when the nudge is dismissed or removed) from the dropdown list.
        Close Button Display Toggle the Display button to show a close button or hide it from the nudge. 
        Type Select the type of button to be displayed from the dropdown list. Some options are available only for the Android platform, and some are available only for iOS, and this is specified by mentioning the platform name within parentheses. For example, if a Button Type is applicable only to the Android platform, it would be mentioned as <ButtonName>(Android).
        Close button placement Specify the position of the close button using this dropdown list. You can choose either Right or Left.
        Margin Margin Specify the margin for the nudge container.
        Top, Bottom, Right, and Left Specify the top, bottom, right, and left margins for the nudge container.
        Border Width Specify the border width in pixels using this scale.
        Radius Specify the radius for the border in pixels using this scale.
        Border Color Click the textbox to select the border color.
      • Gif - You can add Gifs to your nudges using this section.
        Section Field Description

        Upload Image

        Upload image Select the gif to be displayed in the nudge from your computer using this option.
        Image URL Add a URL from where the gif should be picked and shown in the nudge using this option.
        Margin Margin Specify the margin for the GIF.
        Top, Bottom, Right, and Left Specify the top, bottom, right, and left margins for the GIF.
        Padding Margin Specify the padding margin width for the GIF in pixels using this scale.
        Top, Bottom, Right, and Left Specify the radius for the border in pixels using this scale.
        Radius Specify the radius for the border for the gif padding in pixels using this scale.
        Border Color Click the textbox to select the border color for the gif padding.
        Border Width Specify the border width for the gif inside the nudge container in pixels using this scale.
        Radius Specify the radius for the border for the gif inside the nudge container in pixels using this scale.
        Border Color Click the textbox to select the border color for the gif inside the nudge container.

        You can click on the gif in the preview to customize it as well.

      • Buttons
        Section Field Description

        Button

         

         

         

         

        Button Type Specify the type of button: Filled, Outlined, and Text.
        Button text Specify the text to be displayed on the button.
        Font size
        Specify the font size for the button text.
        Font color Specify the font color for the button text.
        Custom font Specify the name of the custom font (as available in your app bundle) for the button text.
        Button color Specify the button color by clicking the text box and selecting the color gradient.

        Actions

         

        Default The default action for the button is Dismiss (on click, the nudge will be dismissed). You can remove this default action by clicking the Delete icon next to the Default dropdown.
        Custom

        Click +Action to add a custom action. Select the action in the Custom dropdown list. The default action is closing the nudge. You can add custom actions as well. For more information, refer to Custom Actions.

        Margin Margin Specify the margin for the Button.
        Top, Bottom, Right, and Left Specify the top, bottom, right, and left margins for the Button.
        Padding Margin Specify the padding margin width for the Button in pixels using this scale.
        Top, Bottom, Right, and Left Specify the radius for the border in pixels using this scale.
        Radius Specify the radius for the border for the Button padding in pixels using this scale.
        Border Color Click the textbox to select the border color for the Button padding.
        Border Width Specify the border width for the Button inside the nudge container in pixels using this scale.
        Radius Specify the radius for the border for the Button inside the nudge container in pixels using this scale.
        Border Color Click the textbox to select the border color for the Button inside the nudge container.

        You can click on the button in the preview to customize it as well.

        NudgeTemplates.gif

  4. Preview the template.
  5. Test your campaign. For more information, refer to Test In-app campaigns.
  6. Schedule your campaign in the third step and publish.

SMS Sign-Up Template

warning

Warning

Only enabled for the North America region. For more information, reach out to support@moenage.com.

SMS Sign-Up template enables you to request consent from your users to receive the SMS notifications. For more information on compliance for the North America region, refer to SMS for North America Region.

Configure the template for opting in for receiving notification. MoEngage provides two templates for the SMS Sign-Up.

  • Fullscreen - SMS Sign-up with image
  • Popup - SMS Sign-up without image

Template-InApp.png

Fullscreen - SMS Sign-up with image

While creating the SMS sign-up with the image template ensure you modify the image and text according to your needs and do the following:

  1. 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.
  2. Configure the Terms of Service according to your needs.
  3. Configure the Privacy Policy according to your needs.
  4. Configure the button to receive consent.
    Template-InApp-WithImage.png
Field Description
Mobile No Provide the mobile number used to receive consent and subscribe for notification.
Message Add the Opt-In keyword.
For more information about keywords, refer to Configure Subscription & Keywords.

Popup - SMS Sign-up without image

While creating the SMS sign-up without the image template ensure you modify the text according to your needs and do the following:

Configure the button to receive consent

  1. 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.
  2. Configure the Terms of Service according to your needs.
  3. Configure the Privacy Policy according to your needs.
  4. Configure the button to receive consent.
    Template-InApp-WithoutImage.png
Field Description
Mobile No Provide the mobile number used to receive consent and subscribe for notification.
Message Add the Opt-In keyword.
For more information about keywords, refer to Configure Subscription & Keywords.

Personalization

You can personalize the content using User Attributes, User Events, Product Sets, Content APIs, and Content Blocks. For more information, refer to:

In-App_Native.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
      • 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.
      info

      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.

Frequently Asked Questions

  1. What happens if an in-app message goes beyond the device height?
    A: If an in-app message when rendered has a height more than the device height then, in this case, the in-app message will not be rendered.
  2. Are images mandatory for in-app templates?
    A: No, images are mandatory only for in-app templates which contain images. If images are not provided for the in-app messages with images, they will not be shown on the device.
  3. Is text scaled across different device sizes?
    A: Currently, the text is not scaled across different device sizes. So if you specify a specific font while creating the message, the same font size will be used in the in-app message on all devices.
  4. Can I remove images from in-app messages?
    A: Currently images are mandatory for in-app messages with images to be displayed on end-user devices.
  5. Can I remove the color from in-app messages?
    A: Yes you can remove the color from the in-app message by setting the opacity to 0
  6. What happens to in-app messages when the app is in landscape mode?
    A: When the app is in landscape mode, pre-built in-app messages are not shown as of now but HTML In-Apps will be shown if landscape orientation is allowed while creating the HTML In-App.
  7. Are in-app messages supported on tablets?
    A: No, we do not support pre-built in-app messages on tablets right now, but HTML In-Apps are supported.

Previous

Next

Was this article helpful?
1 out of 4 found this helpful

How can we improve this article?