In-app messages HTML Preview

Learn about the new Preview features for custom HTML In-App Messages.

New features

Interactive preview

The message preview screen now shows a more realistic preview that renders the JavaScript included in your message.

This means you can now preview and interact with your custom messages (i.e. click-through pagination, submit forms or surveys, watch JavaScript animations, etc.)

New HTML in app preview

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 HTML In-App Message Cross Channel

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
Font Files .ttf, .woff, .otf, .woff2
SVG Images .svg
Javascript Files .js
CSS Files .css

Syntax highlighting

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).

New HTML In-App Message Syntax Highlighting

Button tracking improvements

You can now track performance within your message using the new appboyBridge.logClick(button_id) JavaScript method. This allows you to programatically track “Button 1”, “Button 2”, and “Body Clicks” using appboyBridge.logClick("0"), appboyBridge.logClick("1"), or appboyBridge.logClick(), respectively.

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").

Requirements

  • 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

  1. 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.

  2. 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.

  3. The appboy://close deeplink which was previously supported on mobile apps has been removed in favor of the Javascript, appboyBridge.closeMessage(). This allows cross-platform HTML since the web does not support deep links.

  4. Automatic click tracking, which used ?abButtonId=0 for button IDs, and “body click” tracking on close buttons have been removed. The code examples below show how to change your HTML to use our new Click Tracking javascript methods:

Before After
<a href="appboy://close">Close Button</a> <a href="#" onclick="appboyBridge.logClick();appboyBridge.closeMessage()">Close Button</a>
<a href="appboy://close?abButtonId=0">Close Button</a> <a href="#" onclick="appboyBridge.logClick('0');appboyBridge.closeMessage()">Close Button</a>
<a href="app://deeplink?abButtonId=0">Track button 1</a> <a href="app://deeplink" onclick="appboyBridge.logClick('0')">Track button 1</a>
<script>
location.href = "appboy://close?abButtonId=1"
</script>
<script>
window.addEventListener("ab.BridgeReady", function(){
  appboyBridge.logClick("1");
  appboyBridge.closeMessage();
});
</script>

Creating a new campaign

SDK requirements

These new features require upgrading to the following Braze SDK version:

New message type

When creating a “Custom Code” message, choose the new “HTML Upload with Preview” option as shown below:

New HTML In-App Message Early Access Dropdown

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:

  1. Assets added to a campaign via Media Library will allow your messages to be displayed even while the user is offline
  2. 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 by selecting Add from 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.

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:

  1. Download the ZIP asset file to your computer, and extract the files
  2. Upload all of your asset files into the new campaign. (Tip: you can select all files and drag-and-drop them in)
  3. 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" />
WAS THIS PAGE HELPFUL?
New Stuff!