matt-auckland / appboy-custom-html5-in-app-message-templates

HTML5 IAM Templates

Overview

Braze provides the ability to create campaigns with fully customizable In-App Messages using HTML5. We have provided a set of templates and some documentation to get you through the process of creating a customized in-app message.

Getting Started

To get started, clone this repo into any directory of your choice by clicking the "Clone or download" button in this repo, copying the URL, and enter git clone <copied url> into your terminal. This will download all of the templates and their respective files for you to edit.

Templates

Choose a template you would like to base your customized in-app message off of. Edit the files within the folder until you achieve the desired result. While developing, follow the instructions under "Previewing" and "Testing" to continuously view your updated customized template.

• Native Messages (Apps Only)
  • Fullscreen
  • Fullscreen with pagination
  • Fullscreen with rating
  • Modal
  • Modal with pagination
  • Modal with rating
• Web Messages (Browsers Only)
  • Fullscreen with pagination
  • Email Capture

Previewing

If you would like to preview your customized template using Google Chrome Dev Tools before uploading it to a Braze campaign:

1. Open template.html in a Google Chrome tab.
2. Open up Chrome Dev Tools in that Google Chrome tab (Mac: ctrl + option + i; Windows: F12, ctrl + shift + i).

3. Turn on Device Mode in Chrome Dev Tools (upper left hand corner of Dev Tools, next to the pointer button).

4. Toggle through different devices to ensure your template will display your message correctly.

Uploading Customized Templates to Braze

When you've finished customizing and testing your template, follow these instructions to upload your template to a Braze campaign:

1. Compress all of the necessary files (css, js, and image files, excluding template.html and README.md) into a zip file. Since Braze's Custom HTML IAM campaigns currently do not support zip files that contain folders, be sure to compress only the files, and not a folder of the files.

2. In Braze's dashboard, open up and create/edit your IAM campaign. Choose "Custom HTML" as your IAM type. Copy and paste the contents of template.html in the html box and upload your zip file.

Testing

If you would like to test your customized template on a mobile device by using a test Braze campaign, follow the instructions in Braze Academy. This testing procedure is available if you are using our updated in-app messaging format. If the UI in this link is not available in your dashboard yet, please contact [e-mail] to enable this new feature and in the meantime, test your message by sending to a test segment.

Communicating with Braze

Custom HTML in-app messages support syntax for communicating with Braze - enabling rich support for actions such as logging a Custom Event, or opening the Braze News Feed. For more information on doing this from within an app, click here, and for information on doing this on the web, click here.