Create a new email directly in the email node in the scenario, or in the **[Asset Manager](🔗)**. You can use both the visual or HTML builder. You will need to enter the code below to display the items left in the cart in the email.
Please watch closely the comments that explain how the code works. You will need to change some parts as explained there. You also need to decide which item attributes you want to display. You can display each attribute that is available as a column in your catalog, simply by calling `item.column_name`. You can also display any value tracked in the attribute `product_list` of the event `cart_update` by calling `product.value_name`.
The code below calculates the total price of the cart. If this information is available in your tracking (which we recommend to set up), you can instead just use a simple jinja `{{event.total_price}}`.
# Responsive Email Templates with MJML
MJML is a framework for developing responsive email templates, which renders across a wide range of email providers, web browsers and operating systems. MJML can either be used locally via “Node Package Manager” or in a provided online text editor with a live visual preview.
You can read more about its usage here: [Editor](🔗), [Documentation ](🔗), [Sample templates](🔗)
## Walk-through use case
MJML utilizes a grid system. <mj-section> enables you to put content into a row whereas <mj-column> enables us to display content next to each other in columns within a particular row. Width of the columns is shared evenly by default i.e. with 2 columns next to each other, each will occupy 50% of the space. The width of a row is 600px by default.
To insert custom HTML elements we would use the MJML tag <mj-text>. Within this tag, we can specify our own HTML elements. Say we want to display an image of a product with a URL, product description and product price all next to each other.
First, we create a row by using <mj-section> tag. Within this tag, we then create 3 columns using <mj-column>. As our description of a product is much longer than the price of a product we decide to allocate more space to this column specifying attribute width <mj-column width=”250”>. Notice that we don’t add units (e.g. pixels) and that the total width of all columns adds up to 600 (as we have mentioned previously the width of a row is 600px). To create URL links and to embed these into a picture we need to use classic HTML. This we can do by nesting our HTML code in the <mj-text> tag.
Notice, that we were able to use a very straight forward syntax while MJML ensures that the HTML code will display correctly on various browsers and email clients.
In the example above we have contained some CSS styling directly to our HTML using attribute “Style”. We can also write our CSS code in the “head section” as follows:
Note that the CSS will apply only to HTML elements and will have no impact on the MJML tags. To style MJML tags we need to use the supported attributes. As can be seen from the examples, we can directly embed Jinja into the code. However, Jinja used outside of the MJML elements (e.g. cycles) will be discarded.
To export the template to the Bloomreach Engagement App we need to convert it to HTML. This can be done in the online editor (see the callout above) by clicking at “view HTML”. We then paste the HTML code into an HTML builder in the Bloomreach Engagement app. At this stage, we can insert further Jinja for customization.
# Recommendations
The code example below allows you to insert product recommendations into an email as a dynamic block. Just add the code into a new predefined HTML block (go to Data and Assets > Asset manager > Blocks > New block).
Once the created dynamic recommendations block is dragged into an email, you can customize the block for look and feel without getting into HTML. Feel free to use the predefined templates to make your life even easier.
Please remember this block can get you started but make sure you test it and adjust to your needs and desired email client support. The block uses title, price, image and URL properties from the catalog. If you use other names for those properties it can be easily changed in the code.
If you prefer to start from scratch and define the list of parameters in the block by yourself or just like the direct HTML in the email the code examples below can help you start. Please remember to change the recommendations ID in the HTML code for the actual recommendation model you create in your project.
When you are done with editing and styling of your email, save it to use in the abandoned cart scenario.
# Vouchers
You can make use of Bloomreach Engagement's **[vouchers](🔗)** feature and send a personalized one-time voucher. In order to include a voucher in the email, use the line of code below.
`Use the discount code {{ vouchers['10%'].assign_available() }} to get a 10% discount and pay only {{ total_price* 0.9 }}`
You need to change the name of the voucher pool `("10%")` and have the variable `total_price` defined in the jinja code of your email.