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.
To enable HTML in-app messages in the Web SDK, your SDK integration must supply the enableHtmlInAppMessages
initialization option to Braze: for example appboy.initialize('YOUR-API_KEY', {enableHtmlInAppMessages: true})
. This is for security reasons - HTML in-app messages can execute javascript so we require a site maintainer to enable them.
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 |
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 ?
, while subsequent parameters should be separated by &
.
Examples:
https://example.com/?abButtonId=0
- Button 1 clickhttps://example.com/?abButtonId=1
- Button 2 clickhttps://example.com/?utm_source=braze&abButtonId=0
- Button 1 click with other existing URL parametersmyApp://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
In-app messages support only Button 1 and Button 2 clicks. URLs which do not specify one of these two button IDs will be logged as generic “body clicks”.
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 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 Browsers” under “Send To” and “Web Email Capture Form” under “Message Type”.
To enable Email Capture in-app messages, your SDK integration must supply the enableHtmlInAppMessages
initialization option to Braze, e.g. appboy.initialize('YOUR-API_KEY', {enableHtmlInAppMessages: true})
. This is for security reasons - HTML in-app messages can execute javascript so we require a site maintainer to enable them.
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>
Full screen videos will not render correctly on iOS and are not supported at this time. You must include the playsinline
attribute to show the video within the HTML message instead.
iOS does not support autoplay by default. To update this default option, you can modify the ABKInAppMessageHTMLViewController