Introduction

Orientation compatibility ensures a consistent user experience across various device displays. For an engaging user interaction, it’s important to design UI components that adapt seamlessly to portrait and landscape modes.

In this article, we will create an in-app HTML pop-up to introduce the new Brand Kit feature in a design app. This pop-up will automatically adjust to landscape and portrait orientations, offering a visually appealing experience regardless of how the user holds their device.

Expected Result

Users will see a well-designed pop-up in both landscape and portrait views that provides relevant information or promotional content, increasing awareness and usage of the promoted feature.

Create an In-App Campaign

In this section, let us create an In-app HTML pop-up that automatically adjusts to landscape and portrait orientations.

Step 1: Target users

1. Navigate to the sidebar on the left and click Engage > Campaigns and click + Create campaign, or click + Create new > Campaign.
2. Under Inbound, click In-app.
   
   You are taken to the first step "Target users" of defining your campaign.
3. Enter the following details:
   • Campaign name: Enter a name for the campaign. For example, "HTML In-app campaign."
   • Campaign tags: Select the relevant campaign tags.
4. In the Target Platforms section, select iOS.
5. In the Trigger Criteria section, select On app open.
   
6. In the Select trigger time section, select Immediately to send the message.
7. In the Target audience section, select Filter users by to specifically target only those users who have not yet used the new feature and exclude users who have opted out of Push notifications on their devices or who have already adopted the new feature.
8. Click Next to move to the second step, "Content," where you can define the content that will go into your campaign.

Step 2: Content

MoEngage In-app campaign offers a variety of templates for all your use cases. It also provides the option to start from scratch.

1. 1. Select the template you want to show the user. You can select any HTML In-app message template to design the pop-up. For this use case, we will select the Popup—Promotional template. You can customize it on the Template Settings page.
      
   2. Design the pop-up message by performing the following steps:
      • • Update the title: "Introducing Brand Kit!"
          • Style: Use a bold and attractive font to grab attention.
            
        • Include a Description: Provide a brief overview of what the feature does and how it benefits the user.
          • Text: "Our new Brand Kit helps you store and manage your brand assets like logos, fonts, and color palettes all in one place. Try it now and streamline your design process!"
          • Style: Ensure the text is concise and easy to read.
            
        • Add Visual Elements: Include relevant images, icons, or animations that visually explain the feature.
          • Example: Use an image of the app interface showing the Brand Kit with logos, fonts, and color palettes.
          • Upload the file and then use the relative path in the HTML code, as shown in the video below.
        • Include a Call-to-Action (CTA) Button: "Get started"
          • Link: Direct the button to the section of the app where the feature can be accessed or to a tutorial.
          • Style: Make the button stand out with a vibrant color and clear font.
            
        • View the template in both landscape and portrait mode: Click View portrait and landscape to view the pop-up in landscape view.
          
   3. Click Next to move to the third step, "Schedule and goals," where you can define your campaign's schedule and goals.

Step 3: Schedule and goals

Here, you can select the campaign schedule, add the conversion goal, choose the campaign's priority, and define custom delivery controls.

1. In the Send campaign section, define when you want to start and end your In-app message with the frequency and limits.
2. In the Conversion Goals section, add conversion goals that you would like to track.
3. In the Campaign priority section, assign a priority to this campaign. Assigning a priority helps you decide which In-app message to show to a user when they are eligible for more than one message at a specific time. For example, selecting Critical ensures that the users will always see this even when there are other campaigns for which they are eligible.
4. In the Delivery Controls section, define the controls based on your requirements. For more information, refer to Create In-app Campaign. 
5. Click Publish.

Conclusion

In this use case, we created an In-app campaign to ensure a consistent user experience across various device displays. 

This automated campaign will help you enhance user experience by leveraging orientation compatibility and our exceptional UI components, which adapt seamlessly to portrait and landscape modes.

Now that we have published the campaign, we can track our CTR and conversions (if defined) to understand how well it is performing. For more information, refer to In-App Campaign Analytics.