While we do support importing MJML, we recommend using our editor to create
your emails. It’s the easiest way to create beautiful emails that work across
all email clients.
Overview
We allow uploading of custom-coded emails created using a markup language called MJML. You can upload custom MJML for all three types of emails in Loops (campaigns, loop emails and transactional emails). When uploading custom email, make sure the email is in a.zip
file with the following folder structure:
yourEmail.zip
Important: Please make sure the MJML file is titled
index.mjml
MJML
If you have your MJML ready, there is one step you need to complete before you can upload it into Loops…Add an unsubscribe URL
In your email code, you have to insert an unsubscribe link. This keeps you compliant with email sending restrictions. All you need to do is add a{unsubscribe_link}
tag into your MJML. When the email is sent, we will insert a contact-specific URL into this tag, which the contact can click to unsubscribe.
Add dynamic content
You may want to add dynamic content (for example, a contact property or event property) into your email. You can do this using dynamic content tags. When the email is sent, Loops will replace this tag with the actual value.Remember to use camelCase format when typing your event property tags.
EVENT_PROPERTY:
prefix:
DATA_VARIABLES:
prefix:
Emailify
Using Emailify, you can create well-designed emails inside Figma, then easily export them ready for Loops. Download the free Emailify plugin for Figma and launch it.
Add blocks to your email
To build your email you can drag and drop pre-made blocks provided by Emailify. Once added you can customize each block.
Loops will automatically download and host all of your email images so they
can be reliably displayed to your audience. This feature results in an odd
quirk that you should be aware of:Any text in your email that matches the path to one of your images will be replaced with the new path provided by loops.For example:
img/myImage.jpg
will be replaced with something like: https://something.com/lkjn98s08hbAF/img/lkwekHBlhk78kasj.jpg
For most situations this won’t be an issue, only text that exactly matches the path to one of your images will be replaced.Add dynamic content
You may want to add dynamic content (for example, a contact property) into your email. You can do this using dynamic content tags. For example, adding a first name value can be added like this:EVENT_PROPERTY:
prefix:
DATA_VARIABLES:
prefix:
Add the Loops footer
While creating your email, you need to include an unsubscribe link. To do this manually, add a link with the URL{unsubscribe_link}
.
Alternatively, Emailify contains a pre-made Loops footer. Click Footer, scroll down until you see the Loops logo and click.

Export your email
When you’re ready to export, click on Export HTML in the top right. Then in the dropdown select Loops, which will generate Loops-friendly MJML. You can add a Subject and Preview text in this step, too.

Email Love
Email Love is a Figma Plugin that enables you to design and export responsive and accessible HTML emails directly from Figma. Email Love includes an “Export for Loops” option that downloads an MJML file that can easily be imported into Loops. Download the Email Love Figma Plugin
Add components to your email
You can now start designing your email template using Email Love’s pre-built components. Select the frame you created in the previous section (where you want components to be added). From the plugin pane select one of the component types and then the component you want to add.
Customize components
You can customize every component you add to your design. Each component features layers and frames that replicate the structure of MJML. For example, selecting mj-section in a header component enables you to update the background color and selecting mj-image in the header enables you to update the logo. Go through each component and update the text, images, and styles as you wish.Add an unsubscribe link
For campaign and loops emails you need to include an unsubscribe link in your email. If you add a Footer component Email Love will automatically add a Loops unsubscribe link at the time of export. Alternatively you can code an unsubscribe link manually by adding a link element with the URL{unsubscribe_link}
.
Add dynamic content
You may want to add dynamic content (for example, a contact property) into your email. You can do this using dynamic content tags. For example, adding a first name value can be added like this:EVENT_PROPERTY:
prefix:
DATA_VARIABLES:
prefix:
Export for Loops
When your email is finished, click on the frame you want to export. Click Export and select “Loops” from the Export dropdown. Then click Export to Loops to generate a ZIP containing MJML and any included images, which you can then upload into Loops.Upload into Loops
Once you have MJML with an unsubscribe link included, you can upload it into Loops. Click the Code styling option in the editor panel. This will reveal the file picker, where you can upload your ZIP file.
.zip
file found inside the _zips (For upload to Loops.so) folder. Then click Upload.
If you exported from Email Love, upload the generated .zip
file then click Upload.
Your email is now uploaded into Loops and can be sent out!
