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-Message Templates

We’ve designed a set of HTML5 in-app messages templates to help you get started. Check out our [Github repository][22] 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
• iOS
• Web

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>

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

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

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>