HTML push notifications

This reference article covers how to implement HTML push notifications in your Android application.

Platform availability

This feature is only available for Android—not FireOS.

How it works

In Braze SDK version 3.1.1, HTML can be sent to a device to render multiplier text in push notifications.

This example is rendered with the following HTML:

1
2
3
<p><span style="color: #99cc00;">M</span>u<span style="color: #008080;">lti</span>Colo<span style="color: #ff6600;">r</span> <span style="color: #000080;">P</span><span style="color: #00ccff;">u</span><span style="color: #ff0000;">s</span><span style="color: #808080;">h</span></p>

<p><em>test</em> <span style="text-decoration: underline; background-color: #ff6600;"><strong>message</strong></span></p>

Keep in mind that, Android limits which HTML elements and tags are valid in your push notifications. For example, marquee is not allowed.

Supported HTML tags

Currently, Google doesn’t list their supported HTML tags for Android directly in their documentation—this information can only be found in their Git repository’s Html.java file. Keep this in mind when referencing the following table, as this information was pulled from this file, and their supported HTML tags could be subject to change.

Setting up HTML push notifications

To render multicolor text in a push notification, you can update your braze.xml or BrazeConfig:

• braze.xml
• brazeconfig

1
<bool translatable="false" name="com_braze_push_notification_html_rendering_enabled">true</bool>

1
2
3
4
BrazeConfig brazeConfig = new BrazeConfig.Builder()
  .setPushHtmlRenderingEnabled(true)
  .build();
Braze.configure(this, brazeConfig);

1
2
3
4
val brazeConfig = BrazeConfig.Builder()
    .setPushHtmlRenderingEnabled(true)
    .build()
Braze.configure(this, brazeConfig)