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.
|Minimum SDK version||Recommended SDK version|
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|
*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.
- For the web SDK, the initialization option
enableHtmlInAppMessagesoption will also allow these messages to function, but is deprecated and should be updated to
- 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 (early access)
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.
The ability to save custom templates is currently in early access. Contact your Braze account manager if you’re interested in participating in the early access.
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:
- Go to the Content section in the Message styles tab.
- Click Add custom font.
- Upload your font using the Media Library.
We accept the following file types for fonts:
.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.
The message-level font will only apply to the current message and any duplicated messages, but not to future templates.
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 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 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.
Before you add blocks, set up message-level styles for the message container, font, colors, and anything else you want to customize. You can then customize individual blocks as needed. The Close Button will remain at the top section of your message so that users always have an option to dismiss the modal.
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.
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.
If you’re having trouble selecting a certain block, you can use the up arrow in the block’s inline toolbar to move focus up to each parent block.
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.
You can save a few clicks by highlighting text inside the block before clicking the icon. The highlighted text will be added to the tool and copy will be generated immediately.
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.
- With the element selected, select next to the properties panel name (For example, if you have a button selected, next to “Button properties”).
- Click Copy styles and select the element where you would like to apply the copied style.
- Select again and choose Paste styles.
You can also use keyboard shortcuts to copy and paste styles:
|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
To send a test to either Content Test Groups or individual users, push must be enabled on your test devices before sending.
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.
- 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?
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.
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.