Add & preview liquid in the visual editor

In Design Studio, you can personalize your emails using liquid, a templating language that lets you pull in data about your recipients, events, objects, and more. This article shows you have to add liquid using the Personalization panel in the visual editor.

Use the Personalization panel to add the data you want into your messages without having to memorize our syntax or remember all of your attributes.

After you add your liquid, enter Preview mode to check that your data renders as you’d expect!

How to add liquid

You can add liquid to text-based standard components in these ways:

• Through the Personalization panel, which helps you insert attributes without remembering syntax
• Typing {{ on the canvas or in a property field to open liquid autocomplete
• Manually typing liquid on the canvas
• Using the Agent:
  • From Rules, you can prompt the Agent to conditionally display components based on liquid logic
  • From the Agent panel

Learn more about conditionally displaying content and hiding components based on screen size.

Add attributes through the Personalization panel

To use the Personalization panel:

1. In the left-hand panel, click the Personalize tab.

   

2. Under Previewing as, choose a person whose example data you want to add to your message. Pick an email address from the dropdown, or click Or find a profile to preview to search by email address, profile attribute, or segment.

   

   If your email has multiple languages, the panel shows which language version that person gets. When you pick a person, Design Studio opens that version.

3. Under Data Type, choose what kind of data you want to add.

4. Hover over an attribute and click +.

5. Choose how you want to add the data. If you click Add or Add with fallback, Design Studio inserts the liquid wherever your cursor is. If you click Copy or Copy with fallback, you can paste the liquid into any text area on your canvas.

   Add or copy with a fallback so your messages don't fail to send

   Emails fail to send if a recipient doesn’t have the data specified in the liquid. You can remedy this by including a fallback conditional or filter!

Add liquid with autocomplete

Type {{ in any text-based component to open liquid autocomplete. The menu lists your available snippets and customer data. Select an item to insert it.

Autocomplete also works in text fields in the Properties panel. Select a component, open the Properties panel, and type {{ in a field like a button link, image URL, or alt text to insert liquid there.

Preview liquid

To preview your liquid with sample data, turn on Preview in the canvas toolbar.

If the Personalization panel isn’t open, click in the canvas toolbar. In Preview mode, you can view sample data, but you can’t add any new liquid.

Preview people who have your attribute data and who don’t so you know how your fallback content renders.

From here, you can also preview across device sizes, with visual impairments in mind, and more.

Review liquid errors

If there’s an issue with your liquid syntax, you’ll see “Errors found” in red at the top of the preview. Click this to see a list of issues.

Sample data won’t render if any of your liquid has errors. Messages with liquid errors will also fail to send, so make sure you fix any issue you find.

Learn more about liquid errors and how to fix them.

Understand data types

You can add attributes stored on people, events , relationships , objects , or triggers for API-triggered broadcasts and transactional messages through the Personalization panel.

Some data types may be disabled in the Personalization panel. This could mean:

• The person you’re previewing doesn’t have any data for that type. For example, they don’t have a specific profile attribute.
• The message isn’t linked to an automation that provides the data, like an automation.

Try switching to a different person who has the right data, or double-check that your message is linked to the correct automation.

Profile attributes

You can add profiles attributes to any Design Studio message. People data is available across any type of automation, broadcast, and transactional message.

After you add profile attribute data using the Personalization panel, you’ll see the liquid key customer on the canvas.

Any other data—events, relationships to objects, trigger attributes, use their own keys.

Events

You can add event data after you link to an automation that’s triggered by an event. You can only add attributes from the trigger event; you can’t add any other event data performed by the person you’re previewing.

When you navigate back to your Design Studio message and open the Personalization panel, we automatically surface a person who has performed the event in the trigger. Click the Data Type dropdown and choose Events to find available attributes.

Event trigger data uses the liquid key event. Learn more about event trigger attributes.

Relationships

You can add relationship and object attributes to any Design Studio message. This data is available across any type of automation, broadcast, and transactional message. You must first set up objects to then relate them to people.

Note, you can’t currently add trigger data for objects or relationship-triggered automations through the Personalization panel. But you can add it manually to a text-based component.

When referencing trigger data for object or relationship-triggered automations, you’ll use the trigger key. For non-trigger data, you’ll use the objects and/or relationship keys.

Trigger

The Trigger data type only applies to API-triggered broadcasts. It’s easier to preview trigger data from the broadcast itself because you can add a test payload. In Design Studio, you can only filter for someone who’s already triggered your broadcast, which may take more steps.

To preview data from previous sends in Design Studio, the message must be linked to a broadcast that’s already been triggered. Then in Design Studio, you can preview liquid with previously sent trigger data:

1. Click in the canvas toolbar to open the Personalization panel.
2. Choose Trigger under Data Type. Then select a previous send to pull in data from the previous 30 days.
3. Click Preview to check your trigger liquid.

Trigger data for API-triggered broadcasts uses the liquid object trigger. Learn more about trigger keys.

Transactional

The Transactional data type lets you test trigger data for transactional messages.

To test transactional trigger data within Design Studio, you first need to link your email to a transactional message. Then you can add attributes and values to the Personalization panel under Transactional Data (JSON). This represents the message_data object in the transactional API request.

Turn on Preview in the canvas toolbar to see your liquid render with the sample data.

You can also test trigger data within the transactional message editor.