Customization

In addition to the out-of-the-box In-App Message templates, you can also create customized message templates with the following features:

• Custom HTML templates - create a customized template with HTML, JavaScript, and CSS.
• Modal with custom CSS (web only) - add custom CSS to standard templates for more flexible styling options.
• Email Capture Form (web only) - collect email addresses into Braze.
• Reusable Color profiles and CSS - save and re-use color profiles for in-app message templates.
• Video - add video to a custom in-app message.

HTML In-App Messages

While Braze’s out-of-the-box in-app messages can be customized in a variety of ways, you can gain even greater control over the look and feel of your campaigns using messages designed and built using HTML, CSS, and JavaScript. With some simple composition, you can unlock custom functionality and branding to match any of your needs. HTML in-app messages allow for greater control over the look and feel of a message, including:

• Custom Fonts and Styles
• Videos
• Multiple Images
• On-click behaviors
• Interactive Components
• Custom Animations

Custom HTML messages can use the JavaScript Bridge methods to log events, set custom attributes, close the message, and more!

Check out our Github repository which contains detailed instructions on how to use and customize HTML in-app messages for your needs, and for a set of HTML5 in-app messages templates to help you get started.

JavaScript Bridge

HTML in-app messages for Web, Android, and iOS support a JavaScript “bridge” interface to the Braze Web SDK, allowing you to trigger custom Braze actions when users click on elements with links or otherwise engage with your content. These methods exist with the global appboyBridge variable.

For example, to log a custom attribute and custom event, then close the message, you could use the following JavaScript within your HTML in-app message:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<button id="button">Set Favorite Color</button>
<script>
// wait for the `appboyBridge` ready event, "ab.BridgeReady"
window.addEventListener("ab.BridgeReady", function(){
  // event handler when the button is clicked
  document.querySelector("#button").onclick = function(){
    // track Button 1 clicks for analytics
    // Note: this requires Android SDK v8.0.0, Web SDK v2.5.0, and iOS SDK v3.23.0
    appboyBridge.logClick("0");
    // set the user's custom attribute
    appboyBridge.getUser().setCustomUserAttribute("favorite color", "blue");
    // track a custom event
    appboyBridge.logCustomEvent("completed survey");
    // send the enqueued data to Braze
    appboyBridge.requestImmediateDataFlush();
    // close this in-app message
    appboyBridge.closeMessage();
  };
}, false);
</script>

appboyBridge methods

The following JavaScript methods are supported within Braze’s HTML in-app messages:

Link-Based Actions

In addition to custom JavaScript, Braze SDKs can also send analytics data with these convenient URL shortcuts. Note that these query parameters and URL schemes are all case sensitive.

Button Click Tracking

To log button clicks for in-app message analytics, you can add abButtonId as a query parameter to any deep link, redirect URL, or <a> tag.

Use ?abButtonId=0 to log a “Button 1” click, and ?abButtonId=1 to log a “Button 2” click.

As with other URL parameters, the first parameter should begin with a question mark ?, while subsequent parameters should be separated by an ampersand &.

Examples:

• https://example.com/?abButtonId=0 - Button 1 click
• https://example.com/?abButtonId=1 - Button 2 click
• https://example.com/?utm_source=braze&abButtonId=0 - Button 1 click with other existing URL parameters
• myApp://deep-link?page=home&abButtonId=1 - Mobile deeplink with Button 2 click
• <a href="https://example.com/?abButtonId=1"> - <a> tag with Button 2 click

Open Link in New Window

To open links in a new window, set ?abExternalOpen=true. The message will be dismissed before opening the link.

For deep linking, Braze will open your URL regardless of the value of abExternalOpen.

Open as Deeplink (mobile only)

To have Braze handle your HTTP(S) link as a deep link, set ?abDeepLink=true.

When this query string parameter is absent or set to false, Braze will try to open the web link in an internal web browser inside the host app.

Custom Events (mobile only)

For mobile apps, you can log log a custom event by setting a link’s URL to appboy://customEvent together with a name URL parameter.

For example, appboy://customEvent?name=eventName will log a custom event of eventName.

Be sure to URL encode spaces and other special characters as you would in any other URL. For example, appboy://customEvent?name=event%20name sends event name.

Additional query parameters will be passed as property key-value pairs.

appboy://customEvent?name=eventName&property1=value1&property2=value2 would log an event called eventName with the properties property1=value1 and property2=value2.

News Feed (mobile only)

For mobile apps, you can open the News Feed by setting a link’s URL to appboy://feed.

For example, <a href="appboy://feed">View Feed</a>.

Close In-App Message (mobile only)

To close an in-app message, you can set a link’s URL to appboy://close.

For example, <a href="appboy://close">Close</a> will close the in-app message.

Modal with CSS (Web Only)

If you choose to use a web-only Web Modal with CSS message, you can apply your own template or write your own CSS in the provided space. This space is already pre-filled with the CSS shown in your message preview, but feel free to adjust it slightly to meet your needs.

If you choose to apply your own template, click Apply Template and choose from the In-App Message Template Gallery. If you don’t have any options, you can upload a CSS Template using the CSS Template builder.

Web Email Capture Form

Email capture messages allow you to easily prompt users of your site to submit their email address, after which it will be available within the Braze system for use in all your messaging campaigns.

To navigate to this option, you must create an in-app messaging campaign. From there, ensure Send To is set to Web Browsers, then select Web Email Capture Form for your Message Type.

Customizable Features

• Header, body, and submit button text
• An optional image
• An optional “Terms of Service” link
• Different colors for the header and body text, buttons and background
• Key-value pairs
• Style for header and body text, buttons, button border color, background, and overlay

Reusable Message Templates

You can save in-app message and in-browser message templates on the dashboard to swiftly build new campaigns and messages using your style. Go to Templates & Media, then the In-App Message Templates tab. From this page, you can either edit existing templates or click + Create and choose Color Profile or CSS Template to create new templates to use in your in-app messages.

Color Profile

You can customize the color scheme of your message template by either entering HEX color code or by clicking the colored box and selecting a color with the color picker.

Click Save Color Profile on the bottom right when you’re finished.

Managing Color Profiles

You can also duplicate and archive templates! Learn more about creating and managing templates and creative content in Templates & Media.

CSS Template

You can customize a complete CSS template for your Web Modal In-App Message.

Name and tag your CSS Template, then choose whether or not it will be your default template. You can write your own CSS in the provided space. This space is already pre-filled with the CSS shown in your message preview, and you should feel free to adjust it slightly to meet your needs.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.ab-message-header, .ab-message-text {
  color: #333333;
  text-align: center;
}

.ab-message-header {
  font-size: 20px;
  font-weight: bold;
}

.ab-message-text {
  font-size: 14px;
  font-weight: normal;
}

.ab-close-button svg {
  fill: #9b9b9b;
}

.ab-message-button {
  border: 1px solid #1b78cf;
  font-size: 14px;
  font-weight: bold;
}
.ab-message-button:first-of-type {
  background-color: white;
  color: #1b78cf;
}
.ab-message-button:last-of-type, .ab-message-button:first-of-type:last-of-type {
  background-color: #1b78cf;
  color: white;
}

.ab-background {
  background-color: white;
}

.ab-icon {
  background-color: #0073d5;
  color: white;
}

.ab-page-blocker {
  background-color: rgba(51, 51, 51, .75);
}

As you can see, you can edit everything from the background color to font size and weight, and so much more.

Managing CSS Templates

You can also duplicate and archive templates! Learn more about creating and managing templates and creative content in Templates & Media.

Video

To play a video in an HTML In-App Message, include the following <video> element in your HTML, and replace the video names with your file’s name (or the remote asset’s URL).

To use a local video asset, be sure to include this file when uploading assets to your campaign.

To support iOS devices, you must include the playsinline attribute since full screen playback is not supported at this time.

You can find other possible <video> options on MDN Web Docs

1
2
3
4
5
<video class="video" autoplay muted playsinline controls>
  <source src="https://video-provider.com/YOUR_VIDEO_FILE.mp4" type="video/mp4">
  <source src="https://video-provider.com/YOUR_VIDEO_FILE.ogg" type="video/ogg">
  Your device does not support playing this video.
</video>