HTML Nudge Templates

Nudges are non-intrusive templates embedded within the app at the top or bottom or appearing on the screen. Unlike pop-ups, they allow your users to continue interacting with the app. You can use these templates to alert users about new information, sale days, and similar updates.

The In-app HTML editor offers customizing pre-built nudge templates and creating nudge templates from scratch.

library_add_check

Prerequisites

HTML nudge templates are supported for the following SDKs:

  • In-App Android SDK version 8.8.0 or later
  • In-App iOS SDK version 6.00.3 or later

Pre-Built Nudge Templates

Perform the following steps to find and use the pre-built HTML nudge templates:

  1. In the Content section of the campaign creation page, select the filters shown below to find the pre-built HTML nudge templates.
    Screenshot 2025-02-19 at 12.21.13 PM.png

    MoEngage provides the following pre-built HTML nudge templates to help you get started:

  2. Hover over a desired template and click Select Template. The HTML code of the template is populated in the Code View section, where you can edit the template's elements.
    2025-02-19_12-34-36 (1).gif

Nudge - Emoji Rating

You can use this template to collect feedback from your users. By default, it has emojis for rating and a button to submit feedback.

Screenshot 2025-02-19 at 12.43.44 PM.png

You can make the following changes to the elements in the Code View of the HTML template:

  • Change color: You can specify custom color codes for various elements. Scroll to lines 159 and 170 of the HTML code and replace them with the color codes of your liking, as shown below, to modify the background color of the nudge container and the submit button, respectively.2025-02-19_15-43-37 (1).gif
  • Change emojis: You can change the emojis and their feedback message by modifying the values under const emojiData on line 177.Screenshot 2025-02-19 at 3.59.47 PM.png
  • Track data: Clicks and data tracking have been added by default to the template. If you add more buttons, make sure to add click tracking. For more information about tracking, refer here. Screenshot 2025-02-19 at 4.24.59 PM.png

Nudge - Notification with Two Buttons

You can use this template to nudge users about a new offer. By default, the template contains a text body and two buttons.

Screenshot 2025-02-19 at 4.29.03 PM.png

You can make the following changes to the elements in the Code View of the HTML template:

  • Change color: You can specify custom color codes for various elements. Scroll to line 172 of the HTML code and replace the color codes in the highlighted places below to modify the colors of the elements.Screenshot 2025-02-19 at 4.32.59 PM.png
  • Edit links: On line 201, you can modify the link assigned to the BUY MEMBERSHIP NOW button, which redirects the user to a custom URL.Screenshot 2025-02-19 at 4.37.32 PM.png

Nudge - Feature Announcement

You can use this nudge template to spotlight a new feature on your app. By default, this template contains a text body and a button.

Screenshot 2025-02-19 at 4.59.21 PM.png

You can make the following changes to the elements in the Code View of the HTML template:

  • Change color: You can specify custom color codes for various elements. Replace a color code, as shown below, to modify the colors of the elements.
  • Change text: You can also edit the text body on line 163 based on your needs.2025-02-19_17-10-27 (1).gif
  • Adjust: You can adjust the nudge size based on the content of the nudge, as shown below.2025-02-19_17-05-08 (1).gif

Nudge - Countdown Timer

You can use this nudge template to create a sense of urgency among your users for sale days. By default, this template contains a countdown timer with text.

Screenshot 2025-02-19 at 5.14.38 PM.png

You can make the following changes to the elements in the Code View of the HTML template:

  • Change color: You can specify custom color codes for various elements. Scroll to line 93 of the HTML code and replace color codes in the highlighted places below to modify the colors of the elements.Screenshot 2025-02-19 at 5.20.43 PM.png
  • Modify timer: You can modify the timer on line 108 based on your needs, as shown below.2025-02-19_17-28-06 (1).gif

Create Nudge Template

Perform the following steps to create a nudge template:

  1. On the Content section of the campaign creation page, click the Start from scratch tab.
    Screenshot 2025-01-27 at 2.59.37 PM.png
  •  

You can create a template using the following options:

  1. Hover over Custom HTML upload or Zip upload and click Create nudge, as shown below.
    2025-02-17_11-31-26 (1).gif

Custom HTML Upload

Follow the steps outlined to create a nudge using custom HTML:

  1. Hover over Custom HTML Upload and click Create nudge. You will be redirected to the Code View editor section.
  2. Use your custom HTML code in the Code View section and upload assets as needed.

2025-02-17_11-33-13 (1).gif

Zip upload

Using this method, you can upload your HTML and assets together as a single ZIP file. 

info

Note

Ensure to follow the guidelines mentioned below before uploading your file:

  • Ensure that your .zip file is less than 5MB.
  • Files inside the Zip should not contain *, /, \, &, ~, &quote; in their names.
  • All images should be in JPG, JPEG, PNG, or SVG formats.
  • You cannot upload GIF files, but you can add them to the template via URLs.
  • The relative path specified for images should match the zip folder structure, including case sensitivity.

Perform the following steps to create a nudge using Zip upload:

  1. Hover over Zip Upload and click Create nudge. The Zip template dialog box appears.
  2. Drag and drop your ZIP file or upload it from your computer and click Done

2025-02-17_11-38-10 (1).gif

Customize the Nudge Template

Once you have uploaded your HTML code or the zip file, you can customize your nudge template for orientation, position, device types, and more. To customize, click Template Settings

2025-01-27_15-17-47 (1).gif

You can perform the following actions in the Template Settings section:

  • Change orientation: In the Allowed Device Orientation section, you can adjust the orientation type of the nudge.
    Screenshot 2025-01-27 at 3.19.47 PM.png
  • Select device types: In the Allowed device types section, you can select the required device type.
    Screenshot 2025-01-27 at 3.21.04 PM.png
  • Adjust placement and proportions: In the Placement and Proportions section:
    • You can change the nudge placement to be on the Bottom or Top.
      2025-01-27_15-22-30 (1).gif
    • You can adjust the Nudge height and Nudge width to your liking.
      2025-01-27_15-27-01 (1).gif
    • You can change the position of your nudge under Margin.
      2025-01-27_15-31-17 (1).gif

For information on testing and previewing the template, refer to HTML In-app Templates.

 

 

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

How can we improve this article?