In the Emailify export panel, select the Bloomreach option from the dropdown list. When you're ready, click the Export For Bloomreach button to export the emails you've selected from Figma to HTML.
Importing a complete Emailify template
Use Bloomreach's HTML Builder when importing a complete Emailify email:
- Unzip the Emailify export.
- Open the email's
index.htmlfile in a text or code editor. - Create or open an email in Bloomreach's HTML Builder.
- Switch to Code mode and replace the existing code with the complete contents of
index.html, including its<head>and<body>. - Save the email and send a test before using it in a campaign.
Use the HTML Builder, rather than an HTML content block inside Bloomreach's Design Builder, when importing a complete Emailify export.
Emailify includes responsive CSS in the email's <head> to apply desktop column widths, along with conditional table markup for versions of Outlook that need a separate fallback. Bloomreach's Design Builder treats its HTML content block as a body fragment, so it may move the responsive styles into the email body and remove the Outlook-specific markup. When that happens, columns can stack on desktop instead of displaying side by side.
See Bloomreach's guide to using the HTML Builder for more details.
Using an Emailify section in the Design Builder
If you need to place an Emailify section inside a Design Builder email, you can try splitting the exported code:
- Copy the
<style>tags from the exported<head>into Settings -> Custom Head HTML in Bloomreach. - Copy only the content between the exported
<body>and</body>tags into the Design Builder's HTML content block.
This can restore the responsive CSS for email clients that support it, but the Design Builder may still remove Emailify's Outlook-specific conditional markup. Test the result in Gmail, Apple Mail, and desktop Outlook before sending. For the most reliable compatibility, use the complete export in Bloomreach's HTML Builder.
See Bloomreach's guide to Custom Head HTML for more details.