HTML In-App Templates

HTML In-App templates offer a flexible way to create highly customized in-app messages that stand out. These templates empower you to engage users with unique experiences and collect valuable data directly from your application. This article describes the types of HTML In-App templates available and how to use them with your MoEngage campaigns.

For more information about creating HTML In-App campaigns, refer to HTML Templates for In-App Campaigns.

Available Templates

Using HTML In-App Templates

This GIF shows how to quickly use these HTML templates with your MoEngage In-App campaigns:

Carousel Template

The Carousel template lets you display multiple products, services, or offers that scroll automatically. This is a great way to showcase a variety of items without taking up too much screen space.

Download the Carousel Template

Customization Details

1. Set up different calls to action (CTAs) for each image in the carousel. The highlighted code in the image below shows how to define actions for each element:
   
   
   For example, clicking one element redirects the user to https://www.moengage.com, while clicking another only tracks an event. You can define any actions as listed in the MoEngage JS Bridge documentation. The moengage.trackClick(2) function within the highlighted code tracks clicks. The argument within the function, such as (1) or (2), helps you differentiate clicks on different carousel elements.
2. For mobile devices, this template works best in portrait mode. In landscape mode, users will see a scroll bar. On tablets and TVs, this template appears correctly in any orientation.

Survey Template

The Survey template helps you gather user interest, feedback, and opinions directly within your app. This is useful for understanding user sentiment and improving your product.

Download the Survey Template

Customization Details

1. Capture survey responses as user attributes. For example, line 88 in the code snippet below captures the user's input as the survey_response user attribute. You can customize this attribute name as needed.
2. Trigger a MOE_RESPONSE_SUBMITTED event when users submit a response. The highlighted code under line 88 tracks this event with the survey_response event attribute, containing the user input from your feedback form. You can customize the event and event attribute name as needed. After this event is tracked, you can use it to send data outside MoEngage or trigger follow-up campaigns.
3. The data from this template appears in MoEngage user profiles, as shown below:
4. For mobile devices, this template works best in portrait mode. In landscape mode, users will see a scroll bar. On tablets and TVs, this template appears correctly in any orientation.

Lead Generation Template

The Lead Generation template helps you capture email addresses, mobile numbers, or other details from your anonymous app users. This is useful for converting unknown visitors into identifiable leads.

Download the Lead Generation Template

Customization Details

1. Save the user's input directly into standard MoEngage attributes, such as First Name and Email.
2. Trigger a MOE_RESPONSE_SUBMITTED event when a user submits this form. You can use this event to send the collected data to an external API endpoint using MoEngage Streams or Connector Campaigns. The highlighted code in the image below tracks the input data as user attributes and events:
3. After this form tracks the data, you can view it in user profiles, as shown below. You can also use the event to send data outside MoEngage through various integrations.

Promotional Template

The Promotional template helps you highlight ongoing offers and best-selling products or services. This is an effective way to drive sales and engagement within your mobile app.

Download the Promotional Template

Customization Details

1. Use this template to promote ongoing offers or sales within your mobile app.
2. You can set the URL that opens when a user clicks the button and track clicks by implementing the MoEngage JS Bridge, as shown below:

Important Considerations

When working with HTML In-App templates:

• HTML/CSS Expertise: You need a basic understanding of HTML and CSS to customize these templates effectively.
• MoEngage JS Bridge: Familiarity with the MoEngage JS Bridge is essential for defining interactive actions and tracking events.
• Testing: Always thoroughly test your customized templates across different devices and screen orientations to ensure optimal display and functionality. For more information, refer to Test Your In-App Campaign.
• Responsiveness: Design your templates to be responsive, adapting to various screen sizes and resolutions, to provide a consistent user experience.
• Debugging: Use browser developer tools or in-app debugging tools to identify and resolve any rendering or functionality issues with your custom HTML.

These templates offer a powerful tool for engaging your users. By following these guidelines, you can create effective and personalized in-app experiences.