These templates are no longer maintained and we recommend using our new HTML In-App Message Editor. For more information, please see the following resources:
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.
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.
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)
- Web Messages (Browsers Only)
If you would like to preview your customized template using Google Chrome Dev Tools before uploading it to a Braze campaign:
- Open template.html in a Google Chrome tab.
- Open up Chrome Dev Tools in that Google Chrome tab (Mac: ctrl + option + i; Windows: F12, ctrl + shift + i).
When you've finished customizing and testing your template, follow these instructions to upload your template to a Braze campaign:
- 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.
- 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.
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 [email protected] to enable this new feature and in the meantime, test your message by sending to a test segment.
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.