Creating emails with product frames in HTML

In SALESmanago you can send dynamic emails that have in their content:

  • products recently viewed by a website visitor
  • products from a cart abandoned before checkout

You can either manually add code to an email template using the HTML wizard, or create one in the drag & drop wizard (using the advanced widget “Product frame” to automatically add code in the right places). Either option is valid depending on your needs.

Learn how to create and send a message with an abandoned cart using the wizard >>

Learn how to create and send a message with recently viewed products using the wizard >>

 

How to create a product frame in the HTML wizard?

To an HTML-coded template, you can add a frame into which product information can be loaded. This data must exist in an XML file so that it can be put to the template in place of placeholders. The common product information is name, price, image and subpage URL.

              Product information               Placeholder in an HTML template1
Image $prodRec[1].imgSrc$
Product page URL $prodRec[1].url$
Name $prodRec[1].name$
Category $prodRec[1].category$
Description $prodRec[1].description$
Price $prodRec[1].price$
Promotional price $prodRec[1].promoPrice$
Custom detail2 $prodRec[1].detail1$
Description length limit3 $prodRec[1].detail1.length[50]$

Placeholder in an HTML template1 – if you wish to include 2 (or more) products in the template, do it like this:

$prodRec[1].imgSrc$ – the number in square brackets refers to a specific product, in this case the placeholder would be replaced with the entry of product №1. If you put a different value in the brackets, for example $prodRec[2].imgSrc$, then the placeholder would be replaced with the entry of product №2, and so on.

Custom detail2 – you can use custom details to enter any additional product information present in your XML file. You can load up to 5 custom details to a template: $prodRec[1].detail1$ ; $prodRec[1].detail2$ ; $prodRec[1].detail3$ ; $prodRec[1].detail4$ ; $prodRec[1].detail5$

Description length limit3 – lets you specify the limit of characters for longer pieces of product information. You can set the maximum number of characters that will be loaded into a single field in a template by adding the parameter .length[value] In the case of the example in the table, that number would be 50 characters. Generally speaking, it is prudent to add limits for all fields that could potentially disrupt the layout with unnecessarily long text.

 

How to send messages with a product template? 

In HTML, either type of template is coded in the same way. Whether it will be used to send abandoned carts or recently viewed products, you can decide as you send it from automation rules (in action settings).

How to send a message with an abandoned cart using automation rules >>

How to send a message with recently viewed products using automation rules >>

IMPORTANT: If you code the template for a number of abandoned products, and then a user abandons X-n products, the message will not be sent to that user. However, if a user abandons X+n products, the message will display only products, starting with ones that were added to the cart first.

One message with recently viewed products can contain up to 12 individual products. If a user viewed less product during their last visit, other similar products (by category) will be added to the message to match the maximum number.

 

Product frame example

This example is a correctly coded product frame for 3 products. It can be copied into a template.







$prodRec[1].description$

$prodRec[2].description$

$prodRec[3].description$

$prodRec[1].price$

$prodRec[2].price$

$prodRec[3].price$

GET IT

GET IT

GET IT

 

HTML code for the example frame:

<table align="center" border="0" cellpadding="0" cellspacing="0" width="680" style="border:none; display:block; width:680px;" bgcolor="#ffffff">
<!--zdj-->
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="680" style="border:none; display:block; width:680px;" bgcolor="#ffffff">
<tr>
<td width="20"></td>
<td width="200">
<a href="$prodRec[1].url$">
<img border="0" src="$prodRec[1].imgSrc$" alt="" title="" width="200" style="border:none; display:block; width:200px;"/>
</a>
</td>
<td width="20"></td>
<td width="200">
<a href="$prodRec[2].url$">
<img border="0" src="$prodRec[2].imgSrc$" alt="" title="" width="200" style="border:none; display:block; width:200px;"/>
</a>
</td>
<td width="20"></td>
<td width="200">
<a href="$prodRec[3].url$">
<img border="0" src="$prodRec[3].imgSrc$" alt="" title="" width="200" style="border:none; display:block; width:200px;"/>
</a>
</td>
<td width="20"></td>
</tr>
</table>
</td>
</tr>
<!--break-->
<tr>
<td height="20"></td>
</tr>
<!--opis-->
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="680" style="border:none; display:block; width:680px;" bgcolor="#ffffff">
<tr>
<td width="20"></td>
<td width="200" align="center">
<p style="margin: 0;padding:0;font-size:16px;color:#343434;font-family:open sans,arial,sans-serif;">$prodRec[1].description$</p>
</td>
<td width="20"></td>
<td width="200" align="center">
<p style="margin: 0;padding:0;font-size:16px;color:#343434;font-family:open sans,arial,sans-serif;">$prodRec[2].description$</p>
</td>
<td width="20"></td>
<td width="200" align="center">
<p style="margin: 0;padding:0;font-size:16px;color:#343434;font-family:open sans,arial,sans-serif;">$prodRec[3].description$</p>
</td>
<td width="20"></td>
</tr>
</table>
</td>
</tr>
<!--break-->
<tr>
<td height="10"></td>
</tr>
<!--cena-->
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="680" style="border:none; display:block; width:680px;" bgcolor="#ffffff">
<tr>
<td width="20"></td>
<td width="200" align="center">
<p style="margin: 0;padding:0;font-size:20px;color:#b91111;font-family:open sans,arial,sans-serif;">$prodRec[1].price$</p>
</td>
<td width="20"></td>
<td width="200" align="center">
<p style="margin: 0;padding:0;font-size:20px;color:#b91111;font-family:open sans,arial,sans-serif;">$prodRec[2].price$</p>
</td>
<td width="20"></td>
<td width="200" align="center">
<p style="margin: 0;padding:0;font-size:20px;color:#b91111;font-family:open sans,arial,sans-serif;">$prodRec[3].price$</p>
</td>
<td width="20"></td>
</tr>
</table>
</td>
</tr>
<!--break-->
<tr>
<td height="15"></td>
</tr>
<!--button-->
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="680" style="border:none; display:block; width:680px;" bgcolor="#ffffff">
<tr>
<td width="20"></td>
<td width="200" align="center" bgcolor="#3a3963" height="30">
<p style="margin: 0;padding:0px;font-size:20px;color:#ffffff;font-family:open sans,arial,sans-serif;"><a href="$prodRec[1].url$" style="text-decoration: none; color: #ffffff">GET IT</a></p>
</td>
<td width="20"></td>
<td width="200" align="center" bgcolor="#3a3963" height="30">
<p style="margin: 0;padding:0px;font-size:20px;color:#ffffff;font-family:open sans,arial,sans-serif;"><a href="$prodRec[2].url$" style="text-decoration: none; color: #ffffff">GET IT</a></p>
</td>
<td width="20"></td>
<td width="200" align="center" bgcolor="#3a3963" height="30">
<p style="margin: 0;padding:0px;font-size:20px;color:#ffffff;font-family:open sans,arial,sans-serif;"><a href="$prodRec[3].url$" style="text-decoration: none; color: #ffffff">GET IT</a></p>
</td>
<td width="20"></td>
</tr>
</table>
</td>
</tr>
</table>