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.

If you decide to use your own html, you just copy/paste it in the code section. Preview and Unsubscribe tags:

<vtpreview> any text here </vtpreview>

and

<vtunsubscribe> any text here</vtunsubscribe>

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

Header

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

Example of 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>

Content

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

Footer

    </table>
               </td>
            </tr>
        </table>
     </center>
  </body>
</html>

Content description

Element blocks

  • they are <tr> elements inside a big table with class=“email-element”
  • need 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
  • they should only have one <td> with the class=“cell-wrap-td”
  • this <td class=“cell-wrap-td”> can have background-color. This color can be changed using our editor. If any content of this td has background-color, it can’t be changed
  • <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 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>
  • same as before, if item-editable/reccs-item will be put in multiple containers, they should have the same value for item-editable/reccs-item attribute
    • <tr>
      • <td  reccs-item=item1> item image </td><td item-editable=”item2”> item image </td>
    • <tr>
      • <td item-editable=item1> item title </td><td item-editable=”item2”> item title </td>

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

on all <a> tags linking to product url

class=”item-url”

on all <img> showing product image

class=”item-image”

on all tags showing product title

class=”item-title”

on all tags showing product description

class=”item-desc”

on all tags showing product price

This tags should not include currency. Currency should be displayed in a text before or after it.

class=”item-price”

on all tags showing product discountPrice

This tags should not include currency. Currency should be displayed in a text before or after it.

class=”item-discountPrice”

on all tags displayed when product doesn’t have discount price

should also include currency next to the price (before or after, as another tag or any other way)

class=”notDiscount” -> it gets removed when product is not on sale

on all tags displayed when product does have discount price

should also include currency next to the price (before or after, as another tag or any other way)

class=”isDiscount’” > it gets removed when product is on sale

on tags showing discount percent (it also includes the % sign)

class=”discountProcent” > it gets removed when product is not on sale

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