Creating an in-app message with drag-and-drop

With the drag-and-drop editor, you can create completely custom and personalized in-app messages in either campaigns or Canvas using the drag-and-drop editing experience.

If you want to use your existing custom HTML templates or templates created by a third party, they must be recreated in the drag-and-drop.

Not sure whether your in-app message should be sent using a campaign or a Canvas? Campaigns are better for single, simple messaging campaigns, while Canvases are better for multi-step user journeys. After you’ve selected where to build your message, let’s dive into the steps to create a drag-and-drop in-app message.

Prerequisites

SDK requirements

Minimum SDK version	Recommended SDK version
Web: 2.5.0+     iOS Swift: 5.0.0+     Android: 8.0.0+	Web: 4.8.1+     iOS Swift: 6.5.0+     Android: 26.0.0+

More information on minimum SDKs

Messages created using the drag-and-drop editor can only be sent to users on the minimum SDK versions (see table above). If a user hasn’t updated their application (that is, they’re on an older SDK version), they will not receive the in-app message.

To take advantage of all features available in the drag-and-drop editor, update your SDKs to the recommended SDK versions. This allows you to take advantage of the following additional features:

• Text links that do not dismiss the message
• Button action to request push primer

The following outlines the individual minimum SDK requirements for these features:

Text links*	Request push primer
iOS Swift: 6.2.0+     Android: 26.0.0+	Web: 4.8.1+     iOS Swift: 6.5.0+     Android: 26.0.0+

*If you include a link in your in-app message that redirects to a URL and the end user is not on the minimum SDK versions specified, clicking on the link will close the message and the user will not be able to return to the message to submit the form.

Additional prerequisites

• For the web SDK, the initialization option allowUserSuppliedJavascript must be set to true. The enableHtmlInAppMessages option will also allow these messages to function, but is deprecated and should be updated to allowUserSuppliedJavascript.
• If you are using Google Tag Manager, you must enable “Allow HTML In-App Messages” in the GTM configuration.

Step 1: Create an in-app message

Create a new in-app message or Canvas step, then select Drag-And-Drop Editor as your editing experience.

Step 2: Select your template

After selecting the drag-and-drop editor as your editing experience, you can choose to:

• Start with a blank modal template
• Use a Braze drag-and-drop in-app message template
• Select a saved drag-and-drop in-app message template

Click Build message to begin designing your in-app message in the drag-and-drop editor.

You can also access all templates from the Templates section of the dashboard.

Step 3: Build and design your in-app message

The drag-and-drop editing experience is divided into two sections: Build and Preview & Test.

Set message-level styles

You can set certain styles to be applied across all relevant blocks in your in-app message from the Message Styles tab. The styles set in this section are used everywhere in your message except where you override it for a specific block. For an easier design experience, we recommend that you set up message-level styles first before you customize styles at the block level.

To return to the Message Styles tab at any time:

• Click the close X button on individual block properties
• Select the message container, message close X button, or editor background

Add a custom font

To add a custom font:

1. Go to the Content section in the Message styles tab.
2. Click Add custom font.
3. Upload your font using the Media Library.

We accept the following file types for fonts: .ttf, .woff, .otf, .woff2. For more information, see Asset files.

You can add multiple variations of a font family as some styling options may not be available for custom fonts. Currently, we don’t support adding fonts via URL.

Drag and drop in-app message components

The drag-and-drop editor uses two key components to make in-app message composition quick and easy: rows and blocks. All blocks must be placed in a row.

Rows

Rows are structural units that define the horizontal composition of a section of the message by using cells.

When a row is selected, you can add or remove the number of columns you need from the Column customization section to put different content elements side by side.

You can also slide to adjust the size of existing columns.

As a best practice, format your row and column properties before formatting any of the blocks inside the rows. There are many places where you can adjust the spacing and alignment, so starting from the foundation makes it easier to edit as you go.

Blocks

Blocks represent different types of content you can use in your message. Simply drag one inside an existing row segment, and it will auto-adjust to the cell width.

Every block has its own settings, such as granular control on padding. The right-side panel automatically switches to a styling panel for the selected content element. For more information, see Editor Block Properties.

As you build your in-app message, you can select a mobile, tablet, or desktop view in the toolbar to preview how your in-app message will look for your user groups. This will ensure that your content is responsive, and you can make any necessary adjustments along the way.

Creative details

Fullscreen on larger screens

On a tablet or desktop browser, a fullscreen in-app message will sit in the center of the app screen. Any edits to the max width of the fullscreen message will only apply to tablet and desktop devices.

Customize background image

You can add an image to the background of your message from the Message styles tab. The scrollable section of your message must be selected to add a background for the entire message.

Adding Liquid

To add Liquid into your in-app message, select Add Personalization from the editor toolbar. Here, you can add various personalization types such as default attributes, device attributes, custom attributes, and more!

Next, take your generated Liquid snippet and insert it into your message. After you’ve finished designing and building your in-app message, go to Preview & Test to preview your message.

Using the AI copywriter

When a text block is selected in your in-app message, click in the block toolbar to launch the AI-powered copywriting assistant. The AI copywriting assistant passes a brief product name or description to OpenAI’s GPT3 copy generation tool to generate human-like marketing copy for use in your messaging.

Resetting styles to default

Properties that you have changed from their default styling are marked with an orange dot. To quickly reset a specific property to its default style, hover over the field and select Reset to default.

You can also reset all styling for a selected element by selecting the next to the properties panel name and selecting Reset to default styles.

Copying and pasting styles

After making changes to the styling of an element, you can copy and paste those styles to another element. When pasting styles, only the properties relevant to that element are applied.

1. With the element selected, select next to the properties panel name (For example, if you have a button selected, next to “Button properties”).
2. Click Copy styles and select the element where you would like to apply the copied style.
3. Select again and choose Paste styles.

Keyboard shortcuts

You can also use keyboard shortcuts to copy and paste styles:

Action	Mac	Windows
Copy styles	⌘ + Shift + c	Ctrl + Shift + c
Paste styles	⌘ + Shift + v	Ctrl + Shift + v

Step 4: Test your in-app message

The Preview & Test section allows you to preview your in-app messages across different devices and send a test message to your device. Here, you can ensure that the details are aligned across all your platforms for your drag-and-drop in-app message campaign. It’s extremely important to always test your in-app messages before sending your campaigns to help you visualize what your final message will look like from your user’s perspective.

Preview message as a user

You can preview messages from the Preview & Test tab, as though you were a user. You can select a specific user, a random user, or create a custom user:

• Random User: Braze will randomly select a user from the database and preview the in-app message based on their attributes or event information.
• Select User: You can select a specific user based on their email address or external_id. The in-app message will preview based on that user’s attributes and event information.
• Custom User: You can customize a user. Braze will offer inputs for all available attributes and events. You can enter any information you would like to see in the preview email.

Test checklist

• Have you tested the message on different devices?
• Do the images and media show up and act as expected?
• Does the Liquid function as expected? Have you accounted for a default attribute value in the event that the Liquid returns no information?
• Is your copy clear, concise, and correct?
• Do your buttons direct the user where they should go?

Frequently asked questions

Why are body clicks not appearing on my analytics page?

Body clicks are not automatically collected for in-app messages created with the drag-and-drop editor. For more details, refer to the SDK changelogs for iOS and Android.

Can I segment based on button clicks?

Yes, you can segment based on button clicks for up to two buttons in your message. To do so, set the Identifier for Reporting for your buttons to “0” and “1”, which will correspond to the segmentation filters “Clicked in-app message button 1” and “Clicked in-app message button 2” respectively.

Can I customize my in-app message using custom HTML or JavaScript or transfer existing HTML messages into the editor?

No.

How can I create a slideup in-app message?

Currently the editor is limited to modal and fullscreen messages only. You can switch between display types in the Message container section of the Message styles panel.

Can I save my in-app message as a template after I build it within my campaign or Canvas?

Yes. For any in-app message you want to re-use in a future campaign or Canvas step, you can save it as a custom template using the Save as template button, available after you exit the editor. Before you can save it as a template, you must first launch the campaign OR save it as a draft.

You can also create and save in-app message templates by navigating to Templates > In-App Message Templates.