Video Tutorial: Uploading your emails to Braze
This video tutorial is a complete step-by-step guide showing you how to upload HTML emails from the Figma Emailify plugin to Braze.
In the Emailify export panel, select the Braze (API) option from the dropdown list, then paste in a valid Braze API key and REST endpoint region, which can be found and generated via your Braze dashboard page.
To create emails to braze, youโll need a Braze API key with the templates.email.create permission enabled.
When you're ready, click the Upload To Braze button to start exporting the emails you've selected from Figma to HTML, and have them automatically be uploaded to your Braze marketing templates; which you can view by logging into your Braze account, clicking the Templates sidebar item, clicking Email Templates, then clicking the HTML Editor option and browsing the Saved HTML Templates list below.
Important: Disable Inline CSS Setting โ
If the Braze Inline CSS setting is active in your Braze account, this will re-process your HTML by moving styles from a CSS stylesheet into the body of your HTML email, which has already been handled by Emailify, so if this toggle is enabled, it will strip out other styles and break part of your layout on mobile and desktop.
Please ensure that the Enable Inline CSS in the Sending Settings -> Advanced section is disabled. Emailify automatically inlines and minifies the HTML, and re-processing it in Braze will break the code.
To turn off Inline CSS for a single email, navigate to the Edit Sending Info -> Advanced tab of the Drag & Drop Editor in Braze and disable Inline CSS. This can also be set globally in Braze via Settings -> Email Preferences.
If you are using an older version of Braze, you can find the the Global Inline CSS toggle (to turn off) in Manage Settings -> Email Settings -> Inline CSS
Updating Braze Templates uploaded from Emailify โ
If you'd like to have your Braze templates automatically update instead of being created as new templates each time, you can optionally enable the Enable Updatable Templates toggle in the plugin's export settings (when the Braze (API) option is selected).
This will automatically append a brazeTemplateId
value to the Figma frame's layer name that was uploaded, and then re-use that ID when the same frame is re-uploaded to Braze via the API upon the next export from the plugin.
Please note, you will need to ensure the Enable Updatable Templates toggle is also enabled prior to uploading your initial template, as this will append the Braze Template ID of the original template that's uploaded to Braze into your FIgma frame name; this ID will then be used for any future re-uploads to update that same template in your Braze account (instead of creating a new one each time), provided that the Enable Updatable Templates toggle remains enabled, too).
To update emails in Braze, youโll need a Braze API key with the templates.email.update permission enabled.
Universal links and App Links (SparkPost) โ
To turn any of your Emailify links into a universal link for SparkPost, you can add [[data-msys-sublink='open-in-app']]
to the end of your URL (eg. http://www.example.com[[data-msys-sublink='open-in-app']]), which will automatically include that data-msys-sublink
data attribute in your <a>
link tag (eg. <a href="https://example.com" data-msys-sublink="open-in-app">
).
Then, make sure your app is set up to handle the custom path properly. Refer to SparkPostโs article on Using SparkPost click tracking on deep links. This article contains example code for iOS and Android.