Drag and Drop Editor

The new Drag and Drop editor lets you customize everything about your In-app campaign. MoEngage allows you to customize and work with our pre-built templates or build a new campaign from scratch.

You can access the Drag and Drop editor in the content section of an In-app campaign. Here, you get two options. 

 

Video Tutorial

Start with a blank canvas

When you click on Start with a blank canvas, you will get redirected to the Drag and drop editor.

 

Content

The content section contains all the blocks you can add to your In-app campaign. To get started with your campaign, a row is automatically added where you must add the content blocks. 

  1. Title: The title block lets you add a title text to the campaign. You can change the styling and font of the title by clicking on the Title block. This will open a Content Properties section on the right-hand side where you can make further modifications. 



    • You can also delete or duplicate the block by clicking on the Delete and Duplicate icons below the block.

  2. Paragraph: The paragraph block lets you add text to the campaign. You can make similar modifications to the text here as the title block. 

  3. List: The list block lets you add an unordered list to the campaign. You can make similar modifications to the text here as the title block. 

  4. Image: The image block lets you add an image to the campaign. You can either drag and drop an image on the block or click on Browse and upload a new image. 



    • After adding your image, you can modify its width and alignment from the editor on the right-hand side. You can also click on Apply Effect to filter, resize, crop, or do more with your image.
    • You can add links to your image and enable click tracking on it by using attributes. 

  5. Button: The button block lets you add a button to the campaign. You can style the buttons and add actions to them as well. Drag and drop the button to the screen and click on it to get the edit options. 

  6. Divider: The divider block can be used to add a divider between two other content blocks or rows. You can modify the width and styling of the divider in the content properties section.

  7. Spacer: The spacer block can be placed between two content blocks or rows to add some separation between the two. 

  8. Social: The social block lets you add social media links to your campaign. You can add the relevant URLs in the content properties section on the right-hand side of the editor. 



    • You can also click on New Element in the content properties section to add any other social media links that you might want to include in the campaign. 

  9. HTML: The HTML block lets you add custom HTML to your campaign. 

  10. Video: The video block lets you add a video to your campaign. You can upload a YouTube video, a Vimeo video, or a URL for a video.

  11. Icons: The icon block lets you add an icon to your campaign. You can click on Apply Effects in the content properties section to filter, resize, crop, or do more with your icon.



    • Other than changing the icon image itself, you can also modify the URL of the icon and some text to the icon by enabling the More options button.

  12. Menu: The menu block allows you to create a menu in your campaign. You can add multiple items here and modify them in the content properties section.

  13. Text: The text block lets you add text to your campaign. You can edit the text directly inside the text block, and you can add font and styling options to it by clicking on the text block and accessing the editor above it. 

  14. GIFs: The GIFs block lets you add a video to your campaign. You can search for GIFs with Giphy and select the GIF that you want to add. 
info

Note

If you want to overwrite the CSS for a content block, you can toggle the Block identifier in the Content Properties section and retrieve the ID of the content block. You can use this ID to change the CSS for the content block by using it in the HTML element. Please take a look at the FAQs to learn more about how you can use this to modify fonts in the template.  

 

 

Portrait vs. Landscape Mode

The rendering of your In-app campaign varies a lot between portrait mode and landscape mode. You can modify and edit the content blocks that you use to ensure that your campaigns do not look out of place. 

  1. You can choose to hide a content block in either portrait or landscape mode.
    • Navigate to Block Options in the Content Properties section.
    • Ensure that the More options button is enabled. 
    • Click on the Mobile icon if you want to hide the content block in portrait mode.
    • Click on the Desktop icon if you want to hide the content block in landscape mode.



  2. You can also use the Auto width section under Content Properties to modify your In-app campaign for landscape mode. 
    • Select the Full width on mobile checkbox if you want the element to cover the width of the screen in portrait mode.
    • You can then modify the width of the content block on landscape mode by using the slider. 
    • Alternatively, you can also select the Auto width option which fixes the width of the content block automatically. 

 

Attributes

You can add attributes to images, videos, buttons, and GIFs. To do so, scroll down in the Content Properties section on the right-hand side of the editor and click on + Add New Attribute. You can either search from the attributes provided to you or add your own custom attributes. 

 

The list of attributes provided by MoEngage is: 

  1. Navigation: This action will allow you to open a webpage inside your app in web view when your users click on the content block you assigned this attribute to. 



  2. Track Event: This action allows you to track an event on click of the In-app message and also track an event attribute along with this. 



  3. Set User Attribute: This action will assign a value of your choice to any user attribute that you want to modify. As soon as the user clicks on a content block with this attribute, the user attribute that you chose will be set as the value you entered.



  4. Copy Coupon Code: This action allows you to add a Coupon code to a content block. When the user clicks on the content block, the coupon code will get copied in their keyboard. You can also add some personalization to this attribute.



  5. Call: You can now call a user as soon as they click on on the content block you assigned this attribute to. Enter the Mobile No. to do so. 



  6. SMS: You can send a message to the user as soon as they click on your message. Enter the Mobile No. and the Message content to send your SMS. 



  7. Custom Action: You can also define custom actions in your mobile app which can then be executed when the user clicks on the In-app campaign. 



  8. Navigate to Notification Settings: When a user clicks on the content block with this attribute, they will be redirected to their notification settings for your app. 
info

Note

  • Click tracking is automatically enabled for all content blocks where an action is added.
  • If you add multiple types of action on a single content block, then each action will account for one tracked click. 

 

Rows

You can drag and drop a row onto the screen to create a layout for your In-app campaign. All content blocks are added to a row where their positioning and placement can be modified. 

Row Properties

When you click on a Row on the editor, you can access the Row Properties section on the right-hand side of your screen. In this section, you can modify the background of the row, the layout of the row, the column structure, and more. 

You can also modify the background color of the row, and add an image or video to it if you want. 

 

info

Note

The Content area background color option provides a background color to the text of the row. If you choose to use the Row background color option instead, it fills in the entirety of the background of the row.

 

Settings 

The settings in the editor can be used to standardize a default font and link color for all your links. 

 

Explore pre-built templates

To find the pre-built templates for drag and drop editor, you can either click on Explore pre-built templates or find them through the filter. 

  • Search: Search for Drag and drop in the Search templates section.



  • Filter By Editor: Select the Drag and drop checkbox and view the available templates. 

You can customize all of the blocks on the pre-built templates and create your In-app campaign. 

 

Templates

You can save, change, or reset a template by clicking on the menu icon on the top right-hand side of the editor. When you click on Change template, you will be redirected to the template selection menu where you can choose to work with a blank canvas or use one of MoEngage's prebuilt templates. 

 

info

Note

The Mirror Platforms option on the top of the Drag and drop editor lets you simultaneously make the same changes in both iOS and Android platforms. 

 

Template Settings

You can select the Allowed device orientation by navigating to Template Settings at the bottom of the editor. You can also select the device types where you want the In-app campaign to be visible. 

 

FAQs

How to Use Custom Fonts in the In-App Drag and Drop Editor?

To incorporate custom fonts into your templates using MoEngage's in-app drag and drop editor, follow these detailed steps:

1. Host Your Font File

First, ensure that your custom font file is hosted on a secure domain or a publicly accessible URL. For example, you can use a URL like https://yourdomain.com/fonts/yourfont.ttf.

For demonstration purposes, here's a sample link to the Roboto font: https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2

To confirm a successful upload, clicking the URL should initiate a font file download.

2. Select a Template

Choose a template within the editor that you wish to modify. This template should be compatible with the drag-and-drop functionality.

inapp select template.png

3. Modify Element Identifiers

Identify the elements (like text or headings) where you want to apply the custom font. Click on the element in the template to open its properties.

  • For a heading element: Enable the block identifier feature and assign a unique identifier, such as heading_id.
  • For a text element: Similarly, assign a unique identifier like text_id.

In this case, we want the same font to be applied to both elements, so we will use the text_id identifier for both elements.

inapp add block id value.png

4. Add HTML Content Block

Drag and drop an HTML content block into your template at the desired location. Note that this HTML element will not be visible to the user and we will use it to only modify the font style within the template.

inapp add html block.png

5. Insert Custom Font Code

Replace the existing code in the HTML content block with the following CSS to define and apply your custom font:

<style>
@font-face {
font-family: 'customfont',
src: url('https://yourdomain.com/fonts/yourfont.ttf'); /* Use your hosted font URL */
}

div[class$="text_id"],
#text_id {
p, h1 {
font-family: customfont !important;
}
}
</style>

This CSS snippet utilizes the @font-face rule to define 'customfont' using the font hosted at your provided URL. It then ensures that any paragraph (p) or heading (h1) within elements with IDs text_id will use the custom font.

inapp add css code.png

6. Preview and Publish

Preview the changes in the editor to ensure the custom font is applied correctly. Once satisfied, you can proceed to publish your campaign.

 

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

How can we improve this article?