Adding Dynamic Content in Beefree for HubSpot Product Loops

Dynamic Content within Beefree

Dynamic content is a powerful tool that allows you to take your email or page template personalization to the next level. One article shared by American Marketing Association shows that emails with personalized subject lines are 26% more likely to be opened. In addition to higher open rates, personalized emails also lead to improved click-through rates, increased conversions, improved retention, and more. There are many benefits to personalized emails, and for that reason, Beefree includes a host of features and functionality to easily get you across the finish line with personalized emails and pages that speak volumes to your audiences.

Throughout this article, we are going to leverage two of Beefree's dynamic content options, Merge Tags and Display Conditions, to create a product loop for a Beefree email template inside of HubSpot. While we are using HubSpot as the CRM in this article, it is important to keep in mind that both Merge Tags and Display Conditions are syntax agnostic within Beefree. This means you can use our builder to add dynamic content to your email or page templates regardless of which sending platform you use.

Understanding a few HubSpot behaviors

Each contact inside of HubSpot has unique Contact Properties. Contact Properties can be a contact's name, email address, preferred language, or any other form of information that is unique to them. These properties are important, because they include the contact data that will populate the placeholders within the email template for the product loop.  

As we walk through the product loop example in this article, it is important that you know in advance the amount of products in your Contact’s Properties, and that you segment your contacts by categories such as: “Added 2 products to cart”, “Added 3 products to cart”, and so on. In this example, we will work with a “Added 2 products to cart” segment. This type of segmentation is important, because this article covers the product loop behavior for a HubSpot Professional plan. For a HubSpot Enterprise plan, this approach will still work, but you may have access to extended functionality not outlined on this page.

Note: You may be able to write a script and use the HubSpot API to automatically detect how many products are associated with a contact's properties, but this a more technical approach to creating a product loop. To keep this article as simple as possible, we will use the "Added 2 products to cart" segment.

As we walk through this example, we will discuss the following:

• Prerequisites
• How to create Contact Properties within HubSpot
• How to add Merge Tags to your design in Beefree
• How to add Display Conditions to your design in Beefree
• How to Export your design from Beefree to HubSpot
• How to preview your email in HubSpot and send a test email
• How to send the email to your segment

Prerequisites

Prior to adding dynamic content to a Beefree template, we need to first confirm we have all the prerequisite information we need to get started. This includes making sure we have our customer’s product data so we can add it to HubSpot.

Typically, eCommerce platforms will provide JSON format data that includes both customer information and product information. An example of customer information is a customer’s email address. An example of a product’s information is its price, image, or price url.

In this section, we will walk through how to manually add data from a JSON file to a contact’s properties in HubSpot. However, you can use the HubSpot API and run a script to automate this process. If you are comfortable with the HubSpot API and Python sample code, you can reference the sample script we put together as an automated example. If not, we will cover how to perform these steps manually.

Important: HubSpot cannot process JSON. That is why running your own script to preprocess it is necessary if you want to automate this process.

To manually add the information from a JSON file to HubSpot, we'll take the steps outlined in the following section. 

The JSON we’ll use in this example is the following:

In the JSON, you'll notice different fields and their corresponding values. Those are the two bits of information we need to manually add this information to HubSpot. 

How to create Contact Properties within HubSpot

We are going to take the following steps to create a new Contact Property within HubSpot :

1. Log in to HubSpot
2. Navigate to CRM>Contacts
3. Locate the contact you need to add information for
4. Enter the contact’s details
5. Click on Actions>View all properties
6. Click Manage Properties
7. Click Create Property
8. You’ll notice a side panel appear, add the Object type, Group, Label and Description. In this example, we are going to set Object type to “Contact” and Group to “Contact information”.
9. For the Label, type in a name for the new property. Here are a few names we chose: “Product 1 Image”, “Product 2 Image”, “Product 2 Name” and so on.
10. Select a Field type. In this example, we are selecting Single-line text.
11. Check the box for Property visibility and save the new property.

Once you save the new property, the field will become available under Contact Information for each of your contacts. 

The following image displays how the Create a new property side panel looks within HubSpot.

The following images displays the drop-down menu Field type options within HubSpot.

The following image displays the Property visibility checkbox option as the final step for manually creating a new contact property within HubSpot.

The following GIF displays an example of a  newly created Contact property: 

The following image displays a list of all the Product 2 Properties under Contact Information when each field is successfully added manually.

Now that the field is available, we can navigate to the Contact’s Contact Information, and begin filling in the fields based on the JSON values. This can be copied and pasted. For example, the Product 1 Name field can be completed by typing in "Green t-shirt" manually and saving the field's value. Once all the information is saved for each field, we can head over to Beefree and add the Merge Tag and Display Conditions syntax to the dynamic content portion of the email design.

How to add Merge Tags to your design in Beefree

The first step we are going to take is to create Merge Tags as placeholders for the contact's information to populate when the email sends. Throughout this step, keep in mind that HubSpot's version of Merge Tags are called Personalization Tokens. You can learn more about Personalization Tokens by reading the HubSpot documentation on personalizing your content.

The merge tags we are going to use for this example are the following:

The syntax for these Merge Tags intentionally use "i" instead of a set number like one or two, because this structure allows us to skip manually creating a merge tag for every Product and all of its details. Instead, we simply need to create one set of Merge Tags inside of Beefree, and this syntax coupled with the syntax for Display Conditions will iterate through each Product under a contact's properties inside of HubSpot.

To learn more about creating Merge Tags in Beefree, reference the Merge tags and Special links settings article. Once all of the Merge Tags are successfully created within Beefree, the finalized list under the Workspace Setting will look like the list in the following image. 

Once the merge tags are available in the workspace settings, we can add them anywhere in the Beefree email design as placeholders. For more information on how to add merge tags to a design, visit the How to Add Merge Tags in the Builder section of the Merge Tags article. 

How to add Display Conditions to your design in Beefree

Now that the merge tags are complete, we will add display conditions syntax to the row containing them.

To do this, we will take the following steps:

1. Click on the row.
   1. The row properties will open in the sidebar on the right-hand side of the screen.
2. Scroll down to the Dynamic Content section.
3. Click Add condition.
4. Complete the required information: Name, Description, Before, and After.
   1. For the before field, enter the following syntax:

      • {% for i in range(1, 3) %} {% set product_name = contact["product_" ~ i ~ "_name"] %} {% if product_name %}

   2. For the after field, enter:

      • {% endif %} {% endfor %} 

5. Note that in this example we are iterating over 2 products, so the range is (1,3) which represents 2 products to loop through. However, this syntax is very easy to edit for any segment with any number of products in their contact properties.
6. Save the condition.

The following image shows the Edit display condition modal for the row and the syntax mentioned in the previous steps added to each field.

How to Export your design from Beefree to HubSpot

Once the syntax for the Merge Tags and Display Conditions are added to the email design, we can then export the email to HubSpot. Beefree has a HubSpot connector that allows you to easily export from Beefree to HubSpot.

You can reference the Exporting your emails to HubSpot Marketing article to learn more about how to export from Beefree to HubSpot.

Alternatively, you can also watch the following YouTube video for additional visual context on how to perform these steps. 

How to preview your email in HubSpot and send a test email

Once you export the design from Beefree to HubSpot, you’ll be able to preview it and test it in HubSpot. Follow the steps outlined in the Send a test marketing email HubSpot article to test the email template, syntax, and the information it pulls from HubSpot into the placeholders. You should see the final result as two rows within the email, each displaying the corresponding product’s information. For example, the first row displays product one's details and the second row displays product two's details.

How to send the email to your segment

After confirming everything looks good, we can send the email to the “Added 2 products to cart” segment and the row will dynamically populate the content for the row based on the contact’s information inside of HubSpot. Follow the steps outlined in the HubSpot documentation to learn more about how to send an email using HubSpot.

The following image displays the final result inside of the email template.