Emails

In Yottly we work with two e-mail templates. The first one is static and the second is product template. The difference is between recommended products.

  • Segmentation: The appeared content is static – determinate. However it is also necessary to adjust the template according our rules what means adding obligatory “Mustache”. This ensures appropriate sending newsletters. More info about Mustache can be found here.
  • Personalized: The appeared content is not static but variable. The included products are appeared dynamically and added automatically by Yottly. Their selection is based on personalization and customer’s previous behavior. Recommended products are based on deep segmentation. That is why we use here more Mustache and define individual tags values.
  • Triggers
  • Custom: Here you can upload your own already prepared template or create a new one in our HTML editor.

How to upload ready asset?

  • First go to Templates and choose Emails. Then click on New template.

1

  • Now you need to choose which type of newsletters campaign are you going to use. You can find differences between them above in this text. Segmentation, Personalised and Triggers mails can be created right in Yottly through Drag&Drop editor. In case you have already prepared your own template, you can upload it in the section “Custom”. Or you can create a new template here by using code editor.

2

  • In case you do not want to use Drag &Drop editor you choose Custom and here upload your template or create new HTML template.

cusotm

  • Then you simply drop files to upload them. In case your newsletter template is valid you can press Save and whole process is done and template ready to be used in your campaigns. In case you are going to upload html template and images separately, the first needs to be upload html template and then images in zip. format.

asset email 3

 

Static template

Follows you can find specific rules and steps for uploading new static template.


Tracking pixel {{pixel}}

  • Tracking pixel allows Yottly to see if the newsletter has been opened by a customer. Due to this Yottly automatically adds Tracking pixel as an image at the beginning of document after opening tag </body> and mirror text 

    <img src=“{{pixel}}” />


Mirror text {{mirror_text}}

  • Mirror text is the first sentence from your e-mail. Customers can see this text beside an e-mail subject. Because of this you need to add it as the first tag
  • <p>{{mirror_text}}</p>
  • It is also possible to make a mirror text in your template invisible. It means that a mirror text will appear in a subject line only, not in the “newsletters body”. For hidden mirror text use:
    • <p style=“display:none;color:transparent;font-size: 1px;margin: 0; line-height: 18px”>{{mirror_text}}</p>

  • Newsletters use to include a link with webpage as a source of sent e-mail. The result is the possibility for customer to see the correct newsletter in case it appeared him wrongly or did not appear at all. For applying this feature in your newsletter please insert to your template the link above and also add Mustache {{externalLink}} to attribute href.

  • This link tends for unsubscribing customer from newsletter. To activate this insert to href attribute Mustache {{unsubscribeLink}}
  • <a href=“{{unsubscribeLink}}”>Please click here for unsubscribing from newsletter.</a>  

email {{email}}

  • This tag allows you to include the e-mail of your customer directly in your newsletter
  • For example:
    • E-mail has been sent to: {{email}} appears in newsletter as: E-mail has been sent to: customersname@mail.com

 

Product template

Product template is special because of unique content which is offering to customers based on their preferences, personalization and previous behavior. This means that every customer is receiving different content. The template is using the same Mustache as Static template complemented by Mustache below.

This kind of personalisation can be also used for API triggers.


Products

Yottly recommends in one template maximum of 10 products. One product comes wit various attribute (*=1, 2, …, 10):

  • {{product*_title}} – product’s name
  • {{product*_url}} – products’s URL
  • {{product*_image}} – link to image’s URL
  • {{product*_price}} – product price
  • {{product*_price_before}} – price before discount
  • {{product*_brand}} – product’s brand
  • {{product*_description}} – product’s description
  • {{product*_free_shipping}} – if shipping is free or not (true/false)
  • {{product*_pack}} – amount of pieces included in package

In case an image is producing by Yottly resizer you need to extend Mustache with an image’s size. As for example:

src=” {{product1_image}}/195/195

There is no need to use alll attributes. They are optional according to template’s settings. In case you want to use condition if/else, you can use the attribute Mustache.js

// IF

{{#product1_free_shipping}}

Doprava zdarma

{{/product1_free_shipping}}

// ELSE

{{^product1_free_shipping}}

Dopravné 69,-

{{/product1_free_shipping}}

 

Abandoned cart trigger

Abandoned cart trigger template is special because of unique content which is offering to customers personalisation based on their current content of cart and previous behavior. This means that every customer is receiving different content. The template is using these special Mustache:

 

Hero product

  • {{hero_product*_title}}
  • {{hero_product*_price}}
  • {{hero_product*_price_before}}
  • {{hero_product*_url}}
  • {{hero_product*_image}}
  • {{hero_product*_description}}
  • {{hero_product*_brand}}

*=1,2,3,4

 

Personalised substitutes

  • {{substitute*_product_title}}
  • {{substitute*_product_price}}
  • {{substitute*_product_price_before}}
  • {{substitute*_product_url}}
  • {{substitute*_product_image}}
  • {{substitute*_product_description}}
  • {{substitute*_product_brand}}

*=1,2,3

 

Personalised complements

  • {{complement*_product_title}}
  • {{complement*_product_price}}
  • {{complement*_product_price_before}}
  • {{complement*_product_url}}
  • {{complement*_product_image}}
  • {{complement*_product_description}}
  • {{complement*_product_brand}}

*=1,2,3

 

Shopping intention trigger

Shopping intention trigger template is special because of unique content which is offering to customers based on their preferences, personalization and previous behavior. This means that every customer is receiving different content. The template is using these special Mustache:

 

Main product

  • {{main_product_title}}
  • {{main_product_price}}
  • {{main_product_price_before}}
  • {{main_product_url}}
  • {{main_product_image}}
  • {{main_product_description}}
  • {{main_product_brand}}

 

Personalised substitutes

  • {{substitute*_product_title}}
  • {{substitute*_product_price}}
  • {{substitute*_product_price_before}}
  • {{substitute*_product_url}}
  • {{substitute*_product_image}}
  • {{substitute*_product_description}}
  • {{substitute*_product_brand}}

 

Personalised complements

  • {{complement*_product_title}}
  • {{complement*_product_price}}
  • {{complement*_product_price_before}}
  • {{complement*_product_url}}
  • {{complement*_product_image}}
  • {{complement*_product_description}}
  • {{complement*_product_brand}}

*=1,2,3

Right before consumption trigger

Right before consumption template is special because of unique content which is offering to customers based on their preferences, personalization and previous behavior. This means that every customer is receiving different content. The template is using these special Mustache:

 

Main products

  • {{fmcg*_title}}
  • {{fmcg*_price}}
  • {{fmcg*_price_before}}
  • {{fmcg*_url}}
  • {{fmcg*_image}}
  • {{fmcg*_brand}}
  • {{fmcg*_description}}

*=1,2,3,4

 

Personalised complements

  • {{complement*_title}}
  • {{complement*_price}}
  • {{complement*_price_before}}
  • {{complement*_url}}
  • {{complement*_image}}
  • {{complement*_brand}}
  • {{complement*_description}}

*=1,2

 

Yottly editable templates

  • Make your e-mail templates easily editable by adding class .yottly-editable to your templates. Thanks to this you can easily edit CSS styles, change URL addresses, images, edit texts and more directly in Yottly app.
  • To make your template editable you need to add to each tag classes below, which signifies that tag is editable
  • To make your e-mail templates editable directly in Yottly app you need to add to HTML elements attribute “class”.yottly-editable. Thanks to this Yottly can recognize that an element is editable and it can proceed it
  • After using yottly-editable class in your HTML elements you will be able to use for template’s editing an editor which you can see on the image below. Adding and editing components is here very intuitive and based mostly on adding direct links on images or products

.yottly-editable

 


.yottly-editable

  • If you want to make your element editable for Yottly you need to add to atribute “class” the value yottly-editable. The values below will work only in case the value yottly-editable will be specified. This allows Yottly to recognize that CSS styles for every element. can be edited as well
  • <h1 class=“yottly-editable”>HELLO YOTTLYh1>

.yottly-text

  • This value allows Yottly to recognize that text in element is editable
  • <h1 class=“yottly-editable yottly-text“>HELLO YOTTLYh1>

  • If you want to make also links editable you need to add to atribute class a value link
  • <a href class=“yottly-editable link“><h1 class=“yottly-editable yottly-text“>HELLO YOTTLY</h1></a>
  • In case the tag does not include text, add link-no-text value
  • <a href class=“yottly-editable link link-no-text“><img src=“example.jpg” alt=“example.image” /></a>

  • In case yoou have included to a newsletter banners and want to make it editable, you need to insert value yottly-image
  • <img src=“editable-image.jpg” alt=“Editable image” class=“yottly-editable yottly-image” />

Styles consistency

  • In case you want to keep elements styles consistent even while editing them you need to add the same attribute class for all these elements. This allows Yottly to recognize that these are the same elements and all changes done during editing process will appear on all of them in the same way
  • <div class=“container” id=“product1”><h1 class=“product-name”>Product 1</h1><p class=“product-description”>Product 1 description</p></div><div class=“container” id=“product2”><h1 class=“product-name”>Product 2</h1><p class=“product-description”>Product 2 description</p></div>

 

Code editor

  • Code editor allows you to edit your e-mail template directly in Yottly app
  • Different buttons on the top allow you also to see how your template will appear on various devices such as desktop, tablet or phone
  • You can also use classic buttons such as Undo, Redo, Preview or Save and preview
  • You can also adjust the extent of editor and template by mving a middle bar left or right
  • It is possible to hide preview at all with Hide preview button, in this case you will see html code on full screen
  • Do not forget about Send testint mail option. It is always very useful to send newsltter on few adresses and check if all links, banners and subsribing link are working appropriately

ode editor

  • It is also possible to change editor theme according to your preferences

editor theme

  • Editing a template is easy. Simply click on the template’s part you want to edit. Then you will be automatically forwarded in HTML code to a place which reffers to selected part and you can start with editing.

html editor

 

Updated on October 24, 2019

Was this article helpful?

Related Articles