Emailing Template Format

This article explains how to build an email template to be used in our email editor. You can still use any html for sending an email.

Also consider having this added in your Template Gallery

If you decide to use your own html, you can paste it in the code section. If the copied html does not follow our guidelines, editor is disabled.

Preview and Unsubscribe tags:

<vtpreview>any text here</vtpreview>
<vtunsubscribe> any text here </vtunsubscribe>

Those tags will be replaced with links to your unsubscribe and preview page.

  • body tag needs to contain one <table> with class=”emailHtml-container”
  • this table should have only one <tr> and one <td>
  • style from this table and it’s <td> will be copied inside the editor

Example of html header

<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" yahoo="fix">
   <center>
       <table class="emailHtml-container" align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable" style="font-family: 'Aleo', Raleway, Helvetica, Open Sans, georgia, serif; border-spacing:0px ;border-collapse:collapse">
           <tr>
               <td align="center" valign="top" style="background-color:#fff;padding:0px 0px 40px 0px">

<table class="builder-table-sortable">
<tbody><tr><td>

Content

Inside builder-table-sortable there will be <tr> elements with class=“email-element”.

Footer

The following are the closing tags for the above header.

</td></tr><tbody></table>
<!-- end of table sortable -->
               </td>
            </tr>
        </table>
     </center>
  </body>
</html>

Content description

Element blocks

  • there are <tr> elements inside with class=”email-element”
  • each of these <tr> needs to have data-block=”” and data-title=”” attributes. Data-block should be unique across template and data-title is used to describe content of block. Those are visible in the drag&drop section inside the editor.
  • each <tr> should only have one <td> with the class=”cell-wrap-td
  • this <td class=”cell-wrap-td”> tag can have background-color. This color can be changed using our editor. If any content of this <td> has background-color, it needs to be changed manually
  • <td> should contain a <table with class=”cell-wrap-table” with normal html table structure. Other elements inside this <td> might break design in visual editor.
Example of two blocks in a code editor

Example block element containing logo in the center

<tr class="email-element" data-block="logo2" data-title="Logo center" style="left: 0px; right: 0px;">
    <td style="background-color:#fff;padding:0px" class="cell-wrap-td">
        <table class="cell-wrap-table" style="width:100%;border-spacing:0px; border:0px;border-collapse:collapse" cellpadding="0" cellspacing="0" width="100%">
            <tbody>
                <tr>
                    <td style="text-align:center;width:100%;line-height:1px" valign="top">
                        <a href="http://example.com" style="line-height:1px"><img src="http://www.example.com/logo.png" style="max-width:100%; padding:0px 0px;margin:0px;" alt="" title="" img-editable=""></a>
                    </td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>

Example block element containing two products with recommendations

<tr class="email-element" data-block="products2reccs" data-title="Two recommended products" style="left: 0px; right: 0px;">
    <td style="background-color:#fff;padding-bottom:10px" class="cell-wrap-td">
        <table class="cell-wrap-table" style="width:100%;border-spacing:0px; border:0px;border-collapse:collapse" cellpadding="0" cellspacing="0" width="100%">
            <tbody>
                <tr>
                    <td reccs-editable="" style="padding:0px 2%" align="center">
                        <table reccs-item="" style="text-align:center;width:50%; float:left; display:inline-table" class="box-item">
                            <tbody>
                                <tr>
                                    <td style="padding-right:2%">
                                        <div class="box-image">
                                            <a href="#" class="item-url"><img class="item-image" src="http://cdn.domain.com/assets/images/productimage.png" title="" style="max-width:100%" alt="" width="280"></a>
                                        </div>
                                        <div style="text-align:center; padding:0px 0px 20px 0px" class="box-info">
                                            <a href="#" class="item-url" style="text-decoration:none;color:#444">
                                                <div class="item-title" style="text-align:center;font-size:16px; margin:0px; line-height:140%; padding:10px 0px">Denumire produs</div>
                                                <div class="isDiscount"><span style="color:#444; text-decoration: line-through;font-size:16px; margin:0px; line-height:140%; padding:0px"><span class="item-price">000.00</span>Lei</span>&nbsp; <span style="color:#ff3300"><span class="item-discountPrice" style="font-size:16px; margin:0px; line-height:140%; padding:0px">00.00</span>Lei</span>
                                                </div>
                                                <div class="notDiscount" style="font-size:16px; margin:0px; line-height:140%; padding:0px"><span style="color:#444;" class="item-price">00.00</span>Lei</div>
                                            </a>
                                            <div style="padding-top:10px"><a href="#" class="button item-url" style="text-decoration:none; text-align:center; padding:10px; background-color:#EA3F48; display:inline-block; margin:0px; color: #fff; line-height:140%; font-size:16px; border-radius:6px; font-family:georgia;letter-spacing: -.25px;font-weight:700">Adauga in cos<span style="font-size: 24px;vertical-align: top;height: 16px;margin-left: 6px;line-height: 16px;display: inline-block;font-weight: bold;">›</span></a> </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <table reccs-item="" style="text-align:center;width:50%; float:left; display:inline-table" class="box-item">
                            <tbody>
                                <tr>
                                    <td style="padding-left:2%">
                                        <div class="box-image">
                                            <a href="#" class="item-url"><img class="item-image" src="http://cdn.domain.com/assets/images/productimage.png" title="" style="max-width:100%" alt="" width="280"></a>
                                        </div>
                                        <div style="text-align:center; padding:0px 0px 20px 0px" class="box-info">
                                            <a href="#" class="item-url" style="text-decoration:none;color:#444">
                                                <div class="item-title" style="text-align:center;font-size:16px; margin:0px; line-height:140%; padding:10px 0px">Denumire produs</div>
                                                <div class="isDiscount"><span style="color:#444; text-decoration: line-through;font-size:16px; margin:0px; line-height:140%; padding:0px"><span class="item-price">000.00</span>Lei</span>&nbsp; <span style="color:#ff3300"><span class="item-discountPrice" style="font-size:16px; margin:0px; line-height:140%; padding:0px">00.00</span>Lei</span>
                                                </div>
                                                <div class="notDiscount" style="font-size:16px; margin:0px; line-height:140%; padding:0px"><span style="color:#444;" class="item-price">00.00</span>Lei</div>
                                            </a>
                                            <div style="padding-top:10px"><a href="#" class="button item-url" style="text-decoration:none; text-align:center; padding:10px; background-color:#EA3F48; display:inline-block; margin:0px; color: #fff; line-height:140%; font-size:16px; border-radius:6px; font-family:georgia;letter-spacing: -.25px;font-weight:700">Adauga in cos<span style="font-size: 24px;vertical-align: top;height: 16px;margin-left: 6px;line-height: 16px;display: inline-block;font-weight: bold;">›</span></a> </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>

Specific tags rules

Rules for block rows containing reccommendations

  • in .html the <tr class=“email-element”> containing reccs should also have data-logic=“{}” attribute. Empty is considered “{}”
  • there must be at least 1 tag (usually <td> or <tr> inside a table) with reccs-editable=“” attribute (the html block containing each product information).
  • Don’t put reccs-editable=”” on the child tag right after <tr class=”email-element” <td> <table reccs-editable.. (the visual editor won’t work). A solution is to wrap it under another <div> tag.
  • all tags with reccs-item=“” attribute should be on same level (not inside other tags)
  • first element with reccs-item will be put inside <tag vtproduct data-id></tag>, with reccs-item attribute removed and all children that have item-* classes will get respectively replaced with tags **|product.url|** for <a href, **|product.image|** for <img src
  • tags with classes “isDiscount” and “notDiscount” to display correct prices should be siblings (same level within parent) and close to each other
  • tag content that has class discountProcent will be replaced with rounded percent followed by %

Multiple products on the same line:

  • inside reccs-editable tag should be at least one tag with reccs-item attribute that will be substituted inside returning html (reccs-editable tag content will be replaced with reccs-item (vtproduct with data-id=”posX”)
    • <tr reccs-editable>
      • <td reccs-item>
  • if one reccs-item content/data can’t be put together into one parent <tag>, so there will be two <tr> to display first image of products and then titles of the products there should be a reccs-group attribute. Reccs-group tag content will be replaced with reccs-item (vtproduct with data-id=”posX”)
<td reccs-editable>
<table> 
<tr reccs-group>
<td reccs-item> 
...

Rules for rows containing manually editable items

Classes that need to be added inside the [item-editable] container:

Multiple products on the same line:

If products images and titles can’t be put all together into the same <tag> then item-editable value should be as follows: item-editable=”item1” up to the number of products in the row:

<tr>
<td item-editable=”item1”> show image </td>
<td item-editable=”item2”> show image </td>
<td item-editable=”item3”> show image </td>
</tr>
<tr>
<td item-editable=”item1”> show title and price</td>
<td item-editable=”item2”> show title and price</td>
<td item-editable=”item3”> show title and price</td>
</tr>

Note: no other *-editable attributes should be inside item-editable

Item attributes to be displayed:

Elements having the following classes are being replaced with specific item values

  • item-url – href attribute of <a> is replaced with product url
  • item-image – src attribute of <img> is replaced with product image
  • item-title – replaced with product title
  • item-desc – replaced with product description
  • item-price – item price
  • item-discountPrice – item discount Price

Price and discountPrice tags will not include currency. Currency should be displayed in a text before or after it.

Some other custom classes that can be added to html tags.

  • notDiscount – gets removed when product is not on sale (does not have discountPrice)
  • isDiscount – gets removed when product is on sale (has discount price)
  • discountProcent – gets replaced with the discount percent, when item has discount Price

All other elements having the class name like item-attributeName will have their content being replaced with the value of the item attribute.

<span class="item-customName"></span>

Here is a full list of values replacements being made when email content is saved.

Rules for Text tags

  • To make texts editable please add data-editable attribute to any <div> <p> <span> tags

Rules for IMG tags

  • Please add img-editable attribute on <img> tags
  • take parent width (usually TD) by having max-width 100%
  • height is not set, neither max-height when client has the option to upload images

Rules for A tags

  • if button add class=”button” (only on the <a>)
  • if <a> contains an img then should only have img-editable on the <img> tag and not link-editable on the <a>

Solution for product images with different heights

  • On the <img tag with   class=“item-image”  add height=”170”

            ex: <img class=“item-image” src=“http://cdn.domain.com/assets/images/productimage.png” title=“” style=“max-width:100%” alt=“” width=“180” height=”170”>

OUTLOOK

Images must have the width attribute ex:  width=“180”

Filters for tags and dynamic values:

We use Jinja as our template engine: Entire documentation can be found here: http://jinja.pocoo.org/docs/dev/templates/

|date -> this will format a timestamp as readable date

|pretty_price -> this will format numbers with two decimals (if there are decimals) or remove them if it’s an integer.

|truncate -> will truncate a string to a specific value

In order to pass params to these filters, please use (“params”). For example:

**|my_variable|default(“my variable is not defined”)|**

Related Articles