In-App Messages HTML Preview
Learn about the new Preview features for custom HTML In-App Messages.
This is an opt-in feature. Ask your Braze account team to get access today!
We’ll ensure that any
Cross-Channel HTML Messages
This new HTML message type now lets you create one message that can be sent to both mobile and web!
New Asset Uploader
Upload campaign assets to the Braze Media Library using a simple drag-and-drop interface.
This new workflow makes it easy to upload files and copy/paste their URLs directly into your HTML.
We’ve also added the ability to upload newly supported file types, including:
|File Type||File Extension|
Using Braze’s Media Library CDN to host assets will ensure your messages are displayed on mobile devices even if a user has a poor internet connection or offline.
The code editor now includes Syntax Highlighting with a number of different color themes to choose from.
This helps to easily spot potential code errors directly in the message composer, and better organize your code (using spaces or tabs - whichever side of that argument you’re on).
Button Tracking Improvements
You can now track performance within your message using the new
This method replaces the previous automatic click tracking methods (i.e.
?abButtonId=0) which have been removed. Additionally, HTML In-App Messages are no longer limited to recording one button click event per impression.
For example, to close a message and log Button 2 click, you can use:
1 <a href="#" onclick="appboyBridge.logClick('1');appboyBridge.closeMessage()">✖</a>
You can also track new custom button names - up to 100 unique names per campaign, for example
appboyBridge.logClick("blue button") or
appboyBridge.logClick("viewed carousel page 3").
- Up to 100 unique Button IDs are allowed per campaign
- Each Button ID can not be longer than 255 characters
- Only alphanumeric, space, dash, and underscore characters are allowed.
Note: This method replaces the previous automatic click tracking methods (i.e.
?abButtonId=0) which have been removed.
Backward Incompatible Changes
The most notable incompatible change with this new message type is the SDK requirements. Users whose App SDK does not meet the minimum SDK version requirements will not be shown the message.
Zip files are no longer used to manage a message’s assets. Instead, you should use our new Asset Uploader and paste absolute asset URLs directly into your HTML - just like you would for an email campaign. See the Migration Steps for more information on transitioning away from zip files.
appboyBridge.closeMessage(). This allows cross-platform HTML since the web does not support deep links.
Automatic click tracking, which used
Creating a New Campaign
These new features require upgrading to the following Braze SDK version:
Because this message type can only be received by certain newer SDK versions, users that are on unsupported SDK versions will not receive the message.
Consider adopting this new message type once a significant portion of your user base is reachable, or target only those users whose app version is above the requirements. Learn More
New Message Type
When creating a “Custom Code” message, choose the new “HTML Upload with Preview” option as shown below:
Keep in mind that your mobile app users need to upgrade to the supported SDK versions to receive this message.
We recommend that you nudge users to upgrade their mobile apps before launching campaigns that depend on newer Braze SDK versions.
Uploading Asset Files
Use Braze’s Media Library to upload and host assets for your custom HTML messages.
We recommend uploading assets to Braze’s Media Library for two reasons:
- Assets added to a campaign via Media Library will allow your messages to be displayed even while the user is offline
- Assets uploaded to Braze can be more easily reused across campaigns.
To add new assets to your campaign, use the Drag-and-Drop section to upload a file and add associate the file with this campaign.
You can also add existing assets to your campaign that you’ve already uploaded to Braze’s Media Library.
Once your assets are added to a campaign, you can use the Copy Link button to store the file’s URL to your clipboard.
Then, paste the copied asset URL into your HTML as you normally would when referencing a remote asset.
You can press
CMD+F within the HTML Editor to search within your code!
Migrating Old “Zip File” Campaigns
Older campaigns that used zip-files are not supported in this new In-App Message composer.
If you want to migrate those older zip-file campaigns, follow these instructions:
- Download the .zip asset file to your computer, and unzip the files
- Upload all of your asset files into the new campaign. (Tip: you can select all files and drag-and-drop them in)
- For each newly uploaded asset, copy its uploaded file URL and replace them in your HTML’s older local asset references
For example, if your old HTML contains a reference that looks like this:
1 <img src="/cat.png" />
Replace it with its respective uploaded asset URL, like this:
1 <img src="https://cdn.braze.com/appboy/communication/assets/font_assets/files/5ee3869ae16e174f34fac566/original.png" />