Atlas L6ynztjd84

Stay updated on the status of all your company's support tickets.

Customer portal

Learn how to edit emails in the Loops editor.

Once you have written content in your email, you can apply styles by highlighting the text.

This will bring up a formatting toolbar with options that give you a lot of control over your written content.

You can choose between different headings, style text 

 as well as add links. You can also change text size and color.

Text can also be easily changed into lists, quotes and inline code blocks.

Emails can be more than just text. You can add the following elements to your emails:

If you continue typing, you can narrow down the selections. You can use your arrow keys to select items and pressing Enter will confirm your selection.

You can alternatively add elements from the toolbar above the editor, or by hovering over an existing element in your email and clicking the 

As well as adding from the toolbar or the 

 icon, you can drag or paste images into the editor.

Add a link to an image by selecting the element and then clicking the link icon in the toolbar.

Uploaded images can become dynamic by selecting them and then clicking the 

 icon in the formatting toolbar. Paste in an image URL or add dynamic content.

 data variable in a transactional email, or use an 

You can also create dynamic URLs by combining text and dynamic content inside the image source field.

Keep in mind that the image must be publicly accessible for this to work and the URL must end with a supported image file extension for email (like 

). Additionally, these images should be hosted for a period of time that is relevant to the email's lifecycle as they will not be stored in Loops.

Note that, just as with other dynamic content, if the contact or event property used for your dynamic image is missing, the email will not be sent.

Buttons let you add call-to-action elements inside your emails.

Add links to buttons by selecting the element and then clicking the link icon in the toolbar.

Dividers help separate or group content in your emails. Change spacing around dividers by clicking the drag-and-drop icon on the left and changing the padding values (

You can add a row of social icons by clicking the star icon in the editor toolbar.

You have options for icon width and color (black, grey or white) plus padding. You can add more icons by clicking the plus icon. Drag icons to rearrange them.

To change the alignment of the icons, click on the block settings icon (more info below).

Columns allow you to arrange content side by side, creating dynamic layouts for your emails. You can use columns to place elements like images, text, buttons, and more next to each other. Currently, we support a maximum of two columns. Nesting columns within columns is not yet supported.

You can add columns to your email in several ways:

 to open the slash menu then start typing "columns" or click on the 

: Click on the columns icon to insert a column layout.


: Click and hold the block settings icon (six dots) to the left of a block. Drag the block next to another one until you see a vertical gray line on the right, which indicates a new column will be created. 

Once you've added columns, you can customize their appearance and behavior to suit your design needs.

You can adjust the width of a column by clicking and dragging the gray bar between the columns.

You can also adjust how much space appears between columns by dragging the green bar that appears on hover.

When emails are viewed on a mobile device (when there is less horizontal space available) you can choose if your columns should stack vertically for better readability or stay as columns.

 (click on the drag-and-drop icon to the left) you'll find 

 is selected, columns will be stacked when the viewport is 479px or smaller.

You can drag elements like text blocks, images, and buttons in and out of your columns.

 key (Windows) while hovering over the element you want to move. Then click and drag the block settings icon (six dots) to move the block to its new position.

Columns consist of multiple layers—the outer container and the inner column blocks. You can style both layers individually.

Click on the drag-and-drop icon of the column block without holding any keys to access the outer container settings. Here, you can set the background color, padding, border radius, and alignment for the entire columns section.

To edit the settings of an individual column or the elements inside it, hold down the 

 key (Windows) while clicking on the element. This allows you to "drill through" the layers and select the block settings for the inner element.

: Keep in mind that nesting columns within columns is not supported. If you need a complex layout, consider adjusting your design to fit within the two-column limit.

: Use the block settings to ensure that padding and alignment are consistent across your columns for a polished look.

Block settings let you edit properties of different element "blocks" in your email.

If you hover over a block in your email, you'll see a drag-and-drop icon appear on the left.

You can drag this icon to re-order elements in your email.

If you click this icon you will open the block settings menu. Here you'll see styling options for padding, radius, background color and horizontal alignment.

You can also duplicate and delete blocks from this menu.

We add an automatic footer into campaign and loops emails, which includes your company name, address and an unsubscribe link.

Unsubscribe links help prevent your messages from being marked as spam and ensure that your messages are willingly being received by an engaged audience, helping your deliverability.

, where your contacts can manage their own subscriptions.

Adding Content

Create re-usable elements for your emails.

Components are re-usable elements for emails. They help you create frequently-repeated sections of emails once, which you can then easily drop into new emails.

Changes made to components can be synced to all other instances. You can also choose to make local edits to a single component instance without updating others.

Components can be created from and added to all emails created in Loops (campaign, loops and transactional emails). They also work in both Plain and Styled emails.

Some useful examples of components are logos and social icons. These elements are typically the same across multiple emails; using components will make sure they are the same everywhere.

Most of the time you will want your logo to have the same alignment, spacing and size in your emails. Similarly, you will want the same set of social icons readily available to drop into every new email you create.

To create a component, click on the block settings icon on the left side of an element in the editor. Then click 

A modal will appear where you can name your component. Use a descriptive name so you can easily find your component in the future.

. You will see your new component appear in the Components list on the left of the editor.

All components you create are available in all of your emails, i.e. a component created in a campaign email is also available to insert into transactional emails.

 at the top of the left-hand menu to reveal your components list, then simply click on a component to insert it.

If you want to change the location of a component in your email, you can drag and drop it within the editor just like other blocks.

If you already have a component in your email, clicking 

 in the block settings menu will add a copy of that component into the email, including any local edits made.

You can tell if an element in your email is a component by looking for a purple outline around the block in the editor. You will also see a purple label containing the component's name just above the formatting toolbar.

To edit a component, edit its content as you would any other part of your email.

This will create local edits to that single instance; these edits are not synced to other components in use elsewhere. This means you can make tweaks and changes to a single instance of a component without updating all other instances.

If a component has local edits, you will see a purple dot in the components icon in the formatting toolbar.

If you want to save your changes to all instances of the component, click on the block settings icon and then click 

. Note that any local edits made to the component in other emails will be preserved.

Alternatively, you can click on the component, click on the components icon on the far right of the formatting toolbar (you'll notice a purple dot denoting that the component has edits), then click 

If you make local edits to a component that you want to revert, you will find a 

 option in both the block settings menu and formatting toolbar.

In the Components list, find the component you want to rename, then click the 

Deleting a component only deletes the component; it does not remove the component from emails.\ A deleted component's contents will be retained by any email it was added to.

Components

Loops offers two different email styling options, Styled and Plain.

By default new emails are created as "Styled" emails in the editor. This option offers a range of design options that can be used to design the base theme for your email, like text and background colors, padding and borders.

A Styled email layout is a responsive central column with a maximum width of 600 pixels.

Plain emails are full-width emails with no base design options (though you can always style individual content as described at the top of this page). Plain emails better mimic emails sent from clients like Gmail and Apple Mail.

If the Styled option is enabled (see above), you will see a Style panel when clicking the pencil icon.

This panel shows options for changing base styles for your email.

This includes all text, headings, links, buttons and dividers in your email, as well as design options for the main email body (padding, background and border).

Any changes you make in the style panel will be applied to all matching elements in your email.

If you want, you can always edit specific elements individually from their own formatting toolbar. (However, if you make changes in the email's style panel afterwards, individual styling will be overwritten.)

There are helpful "Reset to default" icons if you ever want to return styling back to Loops' default.

We've included a helpful language selector in the style panel. Using this will tell email clients which language your emails are written in.

This increases the accessibility of your emails, plus some email clients may use this language information to auto-translate email content or offer translation options.

The language selector does not have a default value. We recommend selecting the correct language for each of your emails.

If you send campaigns and loops in different languages, we recommend using a 

 to store language information for each contact. Then, when it comes to sending emails, create emails in different languages (using the language switcher to specify the language), and 

 for each email to match the language stored for each contact.

For transactional emails, create a new email in each required language. You will need to store language information for each recipient in your application and map transactional IDs to their respective language groups.

Saved styles let you create repeatable styles that can be easily applied to new emails.

Once applied, Saved styles can be tweaked on each email and changes will also be synced back to the main style set. This makes the same change on any other email that the styles are applied to.

If your email is in Plain mode (see above), styles cannot be applied.

 check icon or press Enter. This will create a Saved style based on the current styling options selected in the style panel and apply it to the current email.

You can now add this Saved style to other emails.

To add an existing style to an email, open the style panel and select a Saved style from the dropdown.

To edit a Saved style, first open an email with it applied, or apply it to an email. Then change individual style options to your liking.

When individual styles are changed, you'll notice they are highlighted in purple, which denotes styles that have deviated from the main Saved style.

A purple "Update" button also appears. Clicking this button updates the Saved style and also 

applies the changes to all emails that have the Saved style applied

. This makes it really easy to change styles across many emails at once.

Alternatively you can create a new Saved style based on your changes by clicking the 

This new Saved style will be applied to the current email. (Emails using the previous Saved style will retain that Saved style's settings.)

You are free to make one-off custom design changes on an individual email. Just avoid clicking the "Update" button shown above as this will sync the changes to all other emails using the Saved style.

Any subsequent updates made to the underlying Saved style will be synced to your email but your individual style changes made directly on the email will override any synced changes.

After making design changes to an email with a Saved style applied, you can get back to the Saved style's defaults by clicking the reset button next to the "Saved" title.

This will re-apply the Saved style's design to your email and remove 

To remove a Saved style from an email click on the 

This will revert back to any styles directly applied to the email before the Saved style was applied.

You can easily duplicate a Saved style if you want to create a similar style for different emails.

Open an email with a Saved style applied, click the 

Give your new Saved style a new name then click the 

This will create a new Saved style using the current styles and apply it to your email.

To delete a Saved style from your account, make sure the style is applied to the email you have open and then click the 

To make sure there are no design changes to emails in your account, the settings from the deleted Saved style will get applied individually to each email it was active on.

However, please note that any overrides made to the saved style in the affected emails will still be retained even after the style is deleted.

Managing styles

Add context and personalization to emails.

Every email you send from Loops can contain dynamic content connected to the contact you're sending to or the event that triggered the email.

 in Loops have different dynamic content available to them:

 in your audience. There are a set of default properties like name and source, but you can also add any number of custom contact properties. If you sync contact data to Loops with the API, an integration or with CSV uploads, you can include that data in your email.

 are pieces of data that can be sent along with every 

 (which are used to trigger loop emails) via integrations or API calls.

If you want to add dynamic content to a [custom MJML email](/creating-emails/uploading-custom-email), check the [Dynamic tag syntax](#dynamic-tag-syntax) section below.

To add dynamic content to emails, simply select the corresponding icon in the toolbar of the email editor.

You can also add dynamic content in all of the sending setting fields. An icon appears on the right when you hover over each field.

Depending on whether you're editing a campaign, loop or transactional email, you will have different options (explained above).

When the email is sent, the dynamic content will be replaced with actual values from the contact, event or data variable.

If you send an email and the dynamic content is missing a value, the email will not be sent. Make sure to add fallback values to avoid missed sends.

A common example of using dynamic content is to personalize an email greeting by using a contact's first name.

Once you've clicked on the icon in the toolbar, select the contact property you want to add. In this case, 

When the email is sent, the contact's data will be added to your email, like this: 

 (if the contact doesn't have a First name value, it will read 

Any contact attributes you sync with Loops either through the 

 can be added to an email to personalize it.

Likewise, any data variables you add to your transactional emails, or event properties you add to your events, will also appear as options in the editor.

For example, say you wanted to create a 

 email with metrics about a contact over the last week. You could sync those metrics to Loops as 

These properties will automatically be available to insert into any emails triggered by that event.

It is important to set a fallback variable for any dynamic content you add to your campaign and loop emails.

If a contact does not have a value for the related contact property, or you don't remember to include an event property for an event-triggered email, the email will fail to send.

Fallback values can be used to make sure default content is added to the email and ensure that it is sent.

For example, if you set a fallback variable for “First Name” as “there”, if a contact does not have this contact property, the email will include “there” in the place of the contact's name.

This is a great way to make sure that your emails still feel personalized to contacts even if there is no property available.

As well as adding dynamic content using the toolbar icons, you write "tags" directly in the email body. This is especially useful when 

These tags are the only way to add dynamic content in 

If you have a custom contact property named 

 that you want to add to a campaign, you can write it surrounded by curly brackets in the email:

 value for each contact will be added to the email.

For a list of all of your contact properties, visit the 

 is the name you use within the brackets in your email, for example 

To add dynamic data to emails within loops using event properties, the tag requires an 

To add data variables in transactional emails, the tag requires a 

It's important to use camelCase format to type your tags. If you have any questions about how to format your tags, reach out to us!

Personalizing emails

Use Loops with Emailify, Email Love or MJML.

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.

We allow uploading of custom-coded emails created using a markup language called MJML.

 in Loops (campaigns, loop emails and transactional emails).

MJML is a markup language that helps you create responsive emails. It's an established framework that helps you create beautiful emails that work across all email clients. You can read more about it at 

 (via the Emailify and Email Love plugins)

Sometimes you just want that special touch to an email that only Figma can give you. We get it! That's why we support plugins 

, which help you create beautiful emails in Figma then export into Loops.

If you have your MJML ready, there is one step you need to complete before you can upload it into Loops...

In your email code, you have to insert an unsubscribe link. This keeps you compliant with email sending restrictions.

 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.

<a href="{unsubscribe_link}">Unsubscribe</a>


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.

 (in campaigns and loops) can be added like this:

In loops triggered by events you can add 

Using Emailify, you can create well-designed emails inside Figma, then easily export them ready for Loops.

To build your email you can drag and drop pre-made blocks provided by Emailify.

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.

 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.

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:

In loops you can add event properties with an 

In transactional emails you can add data variables with a 

While creating your email, you need to include an unsubscribe link.

To do this manually, add a link with the URL 

Alternatively, Emailify contains a pre-made Loops footer. Click 

, scroll down until you see the Loops logo and click.

You are then free to edit the text and design of the footer (just leave the link URL value as-is).

, which will generate Loops-friendly MJML.

You can add a Subject and Preview text in this step, too.

 button and wait for the code to be generated.

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.

Editing emails

Adding Content

Components

Managing styles

Personalizing emails

Uploading a custom email

Sending settings

Duplicating emails

General list of email-safe fonts