Customization

You can either use our Customizable In-App Message Types (Web Modal CSS, Custom Web Messages, or the Email Capture Form), which will allow you to refine specific types of messages with precise granularity, or create Custom In-App Message Templates to use over and over again. You can also put video into your messages.

Customizable In-App Message Types

Web Modal CSS

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.

Custom Web 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, and anything supported by HTML5 is also supported by Braze.

JavaScript Bridge (appboyBridge)

HTML in-app messages 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. The following javascript methods are supported in Braze’s HTML in-app messages:

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
// Closes this in-app message
appboyBridge.closeMessage()

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/module-appboy.html#.logCustomEvent
appboyBridge.logCustomEvent(eventName, eventProperties)

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/module-appboy.html#.logPurchase
appboyBridge.logPurchase(productId, price, currencyCode, quantity, purchaseProperties)

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/module-appboy.html#.requestImmediateDataFlush
appboyBridge.requestImmediateDataFlush()

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/module-display.html#.showFeed
appboyBridge.display.showFeed()

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setFirstName
appboyBridge.getUser().setFirstName(firstName)

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setLastName
appboyBridge.getUser().setLastName(lastName)

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setEmail
appboyBridge.getUser().setEmail(email)

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setGender
appboyBridge.getUser().setGender(gender)

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setDateOfBirth
appboyBridge.getUser().setDateOfBirth(year, month, day)

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setCountry
appboyBridge.getUser().setCountry(country)

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setHomeCity
appboyBridge.getUser().setHomeCity(city)

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setEmailNotificationSubscriptionType
appboyBridge.getUser().setEmailNotificationSubscriptionType(notificationSubscriptionType)

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setPushNotificationSubscriptionType
appboyBridge.getUser().setPushNotificationSubscriptionType(notificationSubscriptionType)

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setPhoneNumber
appboyBridge.getUser().setPhoneNumber(phoneNumber)

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setCustomUserAttribute
appboyBridge.getUser().setCustomUserAttribute(key, value)

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#addToCustomAttributeArray
appboyBridge.getUser().addToCustomAttributeArray(key, value)

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#removeFromCustomAttributeArray
appboyBridge.getUser().removeFromCustomAttributeArray(key, value)

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#incrementCustomUserAttribute
appboyBridge.getUser().incrementCustomUserAttribute(key, incrementValue)

// Has the same behavior and arguments as https://js.appboycdn.com/web-sdk/latest/doc/module-appboy.html#.registerAppboyPushMessages
appboyBridge.web.registerAppboyPushMessages(successCallback, deniedCallback)

Additionally, for analytics tracking, any <a> or <button> elements in your HTML will automatically log a “click” action to the campaign associated with the in-app message. To log a “button click” instead of a “body click,” either provide a query string value of abButtonId on your link’s href (e.g. <a href="http://mysite.com?abButtonId=0">click me</a>), or provide an id on the HTML element (e.g. <a id="0" href="http://mysite.com">click me</a>). Note that the only button ids currently accepted are “0” and “1.” A link with a button id of 0 will be represented as “Button 1” on the Dashboard, while a link with a button id of 1 will be represented as “Button 2.”

HTML in-app messages can trigger custom Braze actions when users click on elements with links. The supported link schemes are:

Supported Scheme Corresponding Action Supported Query Strings
Normal Web URL or Deep Linking For web URLs, Braze will open the new content of the link in a webview within your app by default, or in an external browser when query abExternalOpen is true. The HTML5 in-app message will be dismissed before opening the link. For deep linking, Braze will open your URL regardless of the value of abExternalOpen. abExternalOpen and abButtonId
appboy://close Braze will dismiss the HTML in-app message. None
appboy://feed Braze will dismiss the HTML in-app message and display a modal News Feed. abButtonId
appboy://customEvent Braze will log a custom event and will NOT dismiss the HTML in-app message. name
All additional queries will be set as properties of the custom event.

Supported Query Strings

You can customize your link actions by appending the optional URL query strings below to your HTTP(S) link:

Query String Name Value Action
abButtonId {0,1} Braze will use the value specified as the button’s ID for analytics tracking
(https://www.picsart.com?abButtonID=0) *
name Arbitrary string This represents the custom event name for use with appboy://customEvent (e.g., appboy://customEvent?name=eventName).
abExternalOpen {true, false} 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. To have Braze open the web link in an external web browser, set this parameter to true.
abDeepLink {true, false} 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. To have Braze handle your HTTP(S) link as a deep link, set this parameter to true.

Analytics tracking is enabled by default for all links that have the abButtonId query (see above). A link with abButtonId=0 will be represented as Button 1 on the Dashboard, while a link with abButtonId=1 will be represented as Button 2.

Examples:

  • appboy://close
    • sample close button: <a href="appboy://close">Close</a>
  • appboy://feed?abButtonId=0
  • appboy://customEvent?name=eventName&property1=value1&property2=value2
    • This would log an event called eventName with the properties property1=value1 and property2=value2.

If you are interested in customizing your in-app messages, please make sure your design or development team is aware of these parameters.

HTML In-App Message Templates

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

Customizable Features
  • Fonts
  • Styles
  • Images + Videos
  • On-click behaviors
  • Interactive Components
  • Animation

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.

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

In-App 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.

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.

Video

You are able to display HTML5 videos in our customizable in-app message types with sound included. You can either use an embedded link from a third party (like Youtube) using custom a HTML5 file, or upload a video to your Braze account in the assets.zip folder. This uploaded video will then be sent to the device for local playback, so there is no need for a network connection to play the video. This second option is recommended mostly for shorter videos.

Android

To use a video in Android in-app messages, all you need to do is create a custom HTML5 file using one of our templates on Github.

Then, copy and paste the following HTML snippet into your code, replacing the source parameters with your actual file names.

1
2
3
4
5
<video class="video" autoplay muted playsinline controls>
          <source src="mov_bbb.mp4" type="video/mp4">
          <source src="mov_bbb.ogg" type="video/ogg">
          Your device does not support HTML5 video.
</video>

Then, in your working directory, add the video file and zip all the files. Make sure to include the CSS/JavaScript but exclude the HTML.

Finally, upload the files to your Braze account using the HTML + Asset Zip in your In-App Message Compose tab. You can either upload the ZIP or enter it’s URL.

Video_IAM

iOS

To use a video in iOS in-app messages, you may require developer assistance. You are required to create a custom view controller in order to allow inline playback of HTML5 videos. You are able to modify our default view controller here to make this process simpler.

Modify the file using the following snippets:

UIWebView Settings

1
2
webView.allowsInlineMediaPlayback = YES;
webView.mediaPlaybackRequiresUserAction = NO;

WKWebView Settings

1
2
3
WKWebViewConfiguration *config = [WKWebViewConfiguration new];
config.allowsInlineMediaPlayback = YES;
config.mediaTypesRequiringUserActionForPlayback = WKAudiovisualMediaTypeVideo;

Then, add the following snippet to your HTML code and use the code in your message.

1
2
3
4
5
<video class="video" playsinline autoplay>
          <source src="mov_bbb.mp4" type="video/mp4">
          <source src="mov_bbb.ogg" type="video/ogg">
          Your device does not support HTML5 video.
</video>

Then, in your working directory, add the video file and zip all the files. Make sure to include the CSS/JavaScript but exclude the HTML.

Finally, upload the files to your Braze account using the HTML + Asset Zip in your In-App Message Compose tab. You can either upload the ZIP or enter it’s URL.

Video_IAM

Web

To use a video in Web in-app messages, embed a link from a third party (like Youtube) into your Custom Web Message.

WAS THIS PAGE HELPFUL?
New Stuff!