Customization

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

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, custom event, and 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:

Method Name Description
appboyBridge.closeMessage() Close the current in-app message.
window.addEventListener("ab.BridgeReady", function(){...}, false) Callback method for when the appboyBridge has finished loading. All javaScript code should be run within this callback function.
appboyBridge.requestImmediateDataFlush() Flush queued data to the Braze servers. JS Docs
appboyBridge.logClick(button_id_string) Log a button click for a given button ID. When button_id_string is left blank, a body-click will be logged instead. This method was introduced in Android SDK v8.0.0, Web SDK v2.5.0, and iOS SDK v3.23.0
appboyBridge.logCustomEvent(eventName,eventProperties) Log a custom event. JS Docs
appboyBridge.logPurchase(productId, price, currencyCode, quantity, purchaseProperties) Log a purchase. JS Docs
appboyBridge.display.showFeed() Show the News Feed. JS Docs
appboyBridge.getUser().addAlias(alias, label) Adds an alias to a user. Introduced in Web SDK v2.7.0, Android v8.1.0, and iOS SDK v3.26.0 JS Docs
appboyBridge.getUser().addToCustomAttributeArray(key, value) Adds to a custom attribute array. JS Docs
appboyBridge.getUser().setFirstName(firstName) Set a user’s first name. JS Docs
appboyBridge.getUser().setLastName(lastName) Set a user’s last name. JS Docs
appboyBridge.getUser().setEmail(email) Set a user’s email address. JS Docs
appboyBridge.getUser().setGender(gender) Set a user’s gender. JS Docs
appboyBridge.getUser().setDateOfBirth(year, month, day) Set a user’s date of birth. JS Docs
appboyBridge.getUser().setCountry(country) Set a user’s country. JS Docs
appboyBridge.getUser().setHomeCity(city) Set a user’s city. JS Docs
appboyBridge.getUser().setEmailNotificationSubscriptionType(notificationSubscriptionType) Set email notification subscription status. JS Docs
appboyBridge.getUser().setPushNotificationSubscriptionType(notificationSubscriptionType) Set push notification subscription status. JS Docs
appboyBridge.getUser().setPhoneNumber(phoneNumber) Set a user’s phone number. JS Docs
appboyBridge.getUser().setCustomUserAttribute(key, value) Set a custom user attribute. JS Docs
appboyBridge.getUser().removeFromCustomAttributeArray(key, value) Remove a custom user attribute. JS Docs
appboyBridge.getUser().incrementCustomUserAttribute(key, incrementValue) Increment a custom user attribute. JS Docs
appboyBridge.getUser().setLanguage(language) Set a user’s language. Introduced in Android SDK v5.0.0 and Web SDK v2.6.0. JS Docs
appboyBridge.getUser().setCustomLocationAttribute(key, latitude, longitude) Set a custom location attribute. Introduced in Android SDK v5.0.0. JS Docs
appboyBridge.web.trackLocation() Request and track a user’s location (web only). This method is a no-op when called in a non-web environment. JS Docs
appboyBridge.web.registerAppboyPushMessages(successCallback, deniedCallback) Register for web push (web only). This method is a no-op when called in a non-web environment. JS Docs

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 ?, while subsequent parameters should be separated by &.

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

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.

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 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, and you should 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, this message type can be found by selecting “Web Broswers” under “Send To” and “Web Email Capture Form” under “Message Type”.

emailimage

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.

Other <video> options that can be used can be found here.

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>
WAS THIS PAGE HELPFUL?
New Stuff!