Create an in-app message
You can create an in-app message or in-browser message using the Braze platform using campaigns, Canvas, or as an API campaign. We recommend using the drag-and-drop editor for most use cases, and planning out your messages and preparing all materials ahead of time using our In-app message prep guide.
Prerequisites
Before you start, make sure you have the following:
| Requirement | Description |
|---|---|
| Braze SDK | Integrate the Braze SDK into your app or website. |
| Campaign or Canvas | Use a campaign for a single targeted message or Canvas for a multi-step user journey. |
| Message plan | Prepare your content and assets using the in-app message prep guide. |
Editing experience
For most in-app messages, use the drag-and-drop editor. It supports modal and fullscreen messages with the same core layouts as the traditional editor, plus rows, Content Blocks, templates, multi-page flows, and ongoing feature updates. See Create an in-app message with drag-and-drop for step-by-step guidance.
Use the traditional editor when you need slideup messages or custom HTML.
Switching a drag-and-drop message to the traditional editor converts the message to HTML. You can’t switch it back to the drag-and-drop editor.
Start your message
- Go to Messaging > Campaigns and select Create Campaign.
- Select In-App Message. Note that in-app messages aren’t available in multichannel campaigns.
- Name your campaign something clear and meaningful.
- Add Teams and Tags as needed.
- Tags make your campaigns easier to find and build reports out of. For example, when using the Report Builder, you can filter by particular tags.
- Add and name as many variants as you need for your campaign. You can choose different platforms, message types, and layouts for each of your added variants. For more on this topic, refer to Multivariate and A/B testing.
If all of the messages in your campaign are going to be similar or have the same content, compose your message before adding additional variants. You can then choose Copy from Variant from the Add Variant dropdown.
- Create your Canvas using the Canvas composer.
- After you’ve set up your Canvas, add a step in the Canvas builder. Name your step something clear and meaningful.
- Choose a step schedule and specify a delay as needed. Note that steps containing in-app messages cannot be action-based.
- Filter your audience for this step as necessary. You can further refine the recipients of this step by specifying segments and adding additional filters. Audience options will be checked after the delay at the time messages are sent.
- Choose your advancement behavior.
- Choose any other messaging channels which you would like to pair with your message.
You can’t have multiple in-app message variants in a single step.
You can find more Canvas-specific information in In-app messages in Canvas.
Delivery platforms
Choose the platforms that receive the message. Platform selections apply to individual variants, so you can test engagement across different platforms.
| Platform | Message delivery |
|---|---|
| Mobile Apps | Android, iOS, Kindle, and tvOS apps |
| Web Browsers | Web apps |
| Both Mobile Apps & Web Browsers | Android, iOS, Kindle, Kepler, tvOS, and Web apps |
| Roku Devices | Roku apps |
Message types
After selecting a delivery platform, choose a message type and layout. The available types depend on the delivery platform and editing experience. For appearance, behavior, and creative specifications, see In-app message types.
| Message type | Editing experience | Availability and layouts | When to use |
|---|---|---|---|
| Fullscreen | Drag-and-drop and traditional | Image and text or image only. The traditional editor can enforce portrait or landscape orientation. | Critical announcements or promotions that need the user’s full attention. |
| Modal | Drag-and-drop and traditional | Text with an optional image or image only. Roku supports modal messages only. | Promotions and feature prompts that need to stand out without covering the entire screen. |
| Slideup | Traditional | Appears at the top or bottom of the app screen. | Short announcements, such as new features or cookie notices, that shouldn’t block the rest of the screen. |
| Custom HTML | Traditional | Supports custom HTML, CSS, and JavaScript. Enable allowUserSuppliedJavascript for JavaScript. |
Custom layouts or interactive experiences that the standard message types don’t support. |
| Email capture form | Traditional | Available for supported app and web platform selections. | Collecting email addresses from users in your app or website. |
| Web modal with CSS | Traditional | Available when you select Web Browsers. | Web-only modal messages that need custom CSS. |
Custom code messages must include a close or dismissal control. You can use the following snippet:
<a href="appboy://close">X</a>
Composition
The available fields depend on your platform, message type, layout, and editing experience.
| Field or setting | What it controls | Notes |
|---|---|---|
| Language | Adds language-specific Liquid conditions. | Add languages before writing your content. |
| Image | Adds an uploaded image, image URL, badge, or Font Awesome icon. | Options depend on the message type. |
| Header and Message | Sets the message text. | Supports Liquid and other personalization. |
| Button Text and On-click behavior | Sets up to two buttons and their actions. | Available actions depend on the selected platforms. |
| Message Close | Controls how users dismiss the message. | Choose automatic dismissal or wait for the user to dismiss. |
| Slideup Position | Places a slideup at the top or bottom of the app screen. | Available for slideup messages only. |
| HTML and assets | Defines custom code and uploaded assets. | Available for custom code message types. |
| Key value pairs | Sends extra custom fields to user devices. | Configure these on the Settings tab. |
For drag-and-drop composition, see Create an in-app message with drag-and-drop.
The Compose tab lets you edit the message’s content and behavior.
The content of the Compose tab varies based on your selected message options.
Language
Select Add Languages and select your desired languages from the provided list. This will insert Liquid into your message. We recommend selecting your languages before writing your content so you can fill in your text where it belongs in the Liquid. See our full list of available languages.
Image
Depending on your message type, you can Upload Image, Pick a Badge, or use Font Awesome. To upload an image, select Add Image or provide an image URL. Selecting Add Image opens the Media Library, where you can select a previously uploaded image or add a new one. Each message type and platform may have its own suggested proportions and requirements—be sure to check what those are before commissioning or making an image from scratch.
If you are pulling in images with Connected Content or Liquid, ensure that your image URL begins with https://. Using http:// will crash your app.
Header and body
Enter your header and message copy. You can use Liquid and other personalization. Keep headers and message content clear and concise.
Some message types don’t need and therefore don’t ask for headers.
Generate AI copy
To generate message copy, use the AI copywriting assistant.
Create right-to-left messages
For languages such as Arabic and Hebrew, see Creating right-to-left messages.
Button text
When available for your message type, you can have up to two buttons appear under your body of text. You can create and edit custom button text and color. You can also add a Terms of Service link within email capture forms.
If you only use one button, it automatically adjusts to take over the available space at the bottom of your message instead of leaving room for an additional button.
Choosing a primary button
Use Button 2 for your primary call to action. Give it a contrasting color so it stands out from the rest of the message.
On-click behavior
When a user selects a button in your in-app message, the following actions may be available based on the platform and workspace configuration.
| Action | Description |
|---|---|
| Close message | Closes the current message. |
| Open web URL | Opens a web page. You can choose to open the URL inside the app. |
| Deeplink into application | Opens content within your app. For more information, see Deep linking to in-app content. |
| Log custom event | Logs a custom event. |
| Log custom attribute | Sets a custom attribute for the current user. |
| Request push permission | Shows the native push permission prompt. For more information, see Push primers. |
The Request push permission, Log custom event, and Log custom attribute options require the following minimum SDK versions:
To combine multiple actions or perform additional SDK actions not available in the dashboard (such as adding to a subscription group or setting an email subscription type), you can use Braze Actions deeplinks.
iOS device options
For messages that include iOS apps, select Change to send to all devices, all iOS devices, iPads only, or iPhones and iPod Touches only.
Message close
Choose between the following options:
- Dismiss automatically: Select how many seconds the message remains on the screen, up to 60 seconds.
- Wait for user to dismiss: Keep the message open until the user dismisses it.
Dismissing a message logs an impression but not a click. For how clicks are tracked by user action, see Click tracking.
Slide up position
This setting only applies to the Slideup message type. Choose between having your slideup appear From Bottom of App Screen or From Top of App Screen.
HTML and assets
This setting only applies to the custom code message type. Copy and paste HTML into the available space and upload your assets using a ZIP file.
Email capture input placeholder
This setting only applies to the email capture form message type. Enter custom copy that will appear as the placeholder text for the email input field. This defaults to “Enter your email address”.
Design
Use the Design tab to adjust the visual appearance of a message created in the traditional editor. The available settings depend on the platform, message type, and layout.
| Setting | What it controls |
|---|---|
| Color profile | Applies a reusable color profile from the in-app message templates gallery. |
| Text alignment | Aligns supported header and body text to the left, center, or right. |
| Header and text | Sets text color and opacity. |
| Buttons | Sets the background, text, border, and opacity for each button. |
| Background color | Sets the message background color and opacity. |
| Screen overlay | Sets the color and opacity around modal and fullscreen messages. |
| Close control | Sets the color of the chevron or other close control. |
Always preview and test your message before sending.
Custom code message types don’t include the Design tab. Add HTML, CSS, JavaScript, and assets in the Compose tab. For web-specific CSS templates, see Web modal with CSS.
Additional settings
Key-value pairs
You can add key-value pairs to send extra custom fields to user devices.
- In the message composer, select the Settings tab.
- In Key value pairs, select Add new pair.
- Enter a key and value for each pair. To add another pair, select Add new pair again.
Delivery and targeting
Choose a campaign trigger
Choose an action that triggers the campaign, then set the campaign’s start and optional end time.
To trigger an in-app message from a custom event, log the event through the SDK.
In-app message campaigns support the following action triggers:
- Start a session in the app or website
- Make a purchase
- Perform a custom event logged through the SDK
For server-triggered and local messages, see Trigger in-app messages.
Trigger messages offline
Braze sends eligible messages and their triggers to the user’s device. After a message is cached, it can display when its trigger occurs while the device is offline.
After an in-app message campaign is stopped, users who started a session before it stopped may still see the cached message when they perform the trigger event. These users count as unique impressions.
Choose a priority
Set the order in which eligible in-app messages display when multiple messages share a trigger. Campaigns and Canvas Message steps use the same priority ordering.
You can choose between the following message priorities:
- High priority (shown before other messages)
- Medium priority (default)
- Low priority (shown after other messages)
The high, medium, and low options are priority buckets. New or newly assigned messages receive the highest position within their bucket unless you set an exact priority.
Select Set exact priority to drag campaigns and Canvases into a specific order. You can also pin a message to keep it at the top of the high-priority bucket.
Choose users to target
Use segments and filters to target users. Braze calculates exact segment membership before sending the message to the device.
If an in-app message step has a delay, Braze evaluates segment membership after the delay. If the user is eligible, the message syncs during the next available session.
Re-evaluate campaign eligibility and Liquid
For campaigns, select Re-evaluate campaign eligibility before displaying when eligibility depends on frequently changing attributes or the message needs current profile data.
When you select this option, the SDK makes an additional request to confirm that the user is still eligible. Braze also evaluates Liquid and Connected Content immediately before displaying the message.
This option prevents cached messages from displaying when the user no longer meets the campaign’s eligibility criteria.
This option requires a network connection and adds a request before display. Don’t use it for messages that must trigger while the user is offline.
Use data added by REST API in a message
User data that the /users/track endpoint adds in the same session can sometimes be used in that user’s in-app message. For example, if a user is in the audience for an in-app message that is waiting on a trigger, starts a session, and in that same session the REST API updates their profile, that new data can appear in the in-app message when Re-evaluate campaign eligibility before displaying is selected. Braze won’t template the in-app message until it’s time to render.
If one trigger both sends data to Braze and fires the in-app message, the message can’t use that newly updated profile data, even with a scheduled delay. Use two separate triggers instead: one to send the data, and one to trigger the in-app message.
Configure Canvas message controls
Canvas in-app messages include controls for expiration, trigger actions, and a delay of up to two hours. For details, see In-app messages in Canvas.
Things to know
Active in-app message campaign capacity
To maintain message delivery performance, stop action-based in-app message campaigns that are no longer needed.
The default capacity is 200 active, action-based in-app message campaigns per workspace. Your workspace may have a different capacity. This doesn’t apply to Canvases.
The count includes active campaigns that haven’t reached their end time and campaigns without an end time. It excludes campaigns that have passed their end time, reached their maximum impressions, or are no longer enabled.
Local time delivery evaluation
When an in-app message campaign uses the user’s local time zone, Braze evaluates the campaign’s start and end time in that time zone. A cached message displays only when the user is eligible and its trigger occurs within the configured delivery window.
Next steps
After composing your in-app message, continue building and validating the campaign or Canvas:
- Configure Canvas or finish scheduling your campaign
- Target users and configure conversion events
- Preview and test the message
- Review in-app message reporting