Velocity Complete Example
1. Create an email template.
First, create the email body without substitutions in order to have an idea of the final design of the letter in the recipient's inbox.
2. Create the substitution structure
The substitutions can be set in the parameters substitutions and global_substitutions of email/send, or in the parameter global_substitutions of template/set. The substitutions can be used in the following parameters:
- body.html
- body.plaintext
- body.amp
- subject
- headers
- options.unsubscribe_url
- from_name
3. Create email/send request
Replace the changing content in body and other parameters (see above the parameters in which it is possible to use substitutions) by the substitutions using use cases. Add the substitutions structure and other parameters according to the method documentation.
Example of Velocity powered email
View HTML email body with substitutions. The result is as follows:
Request body, email/send:
"api_key": "KEY", "message": { "template_engine" : "velocity", "body": { "html": "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="https://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Untitled Document</title> </head><body> <table width="600" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td style="text-align:right; vertical-align:middle;"> <span style="color:#999999; font-size:11px; font-family:Arial, Helvetica, sans-serif; line-height:normal;">Your promo code: $trigger.promocode</span> </td></tr><tr> <td height="10" style="line-height:10px; height:10px;"> </td></tr><tr> <td height="10" style="border-bottom:#047DFF 3px solid; line-height:10px; height:10px;"> </td></tr><tr> <td height="20" style="border-left:#bbbbbb 1px solid; border-right:#bbbbbb 1px solid;"> </td></tr><tr> <td style="border-left:#bbbbbb 1px solid; border-right:#bbbbbb 1px solid; padding:0 30px 0 30px;"> <span style="font-family:Arial, Helvetica, sans-serif; color:#333333; font-size:17px;">Hello<a href="#" style="color:#3e77aa; text-decoration:none;"> $user.name.</a></span> </td></tr><tr> <td height="20" style="border-left:#bbbbbb 1px solid; border-right:#bbbbbb 1px solid;"> </td></tr><tr> <td style="border-left:#bbbbbb 1px solid; border-right:#bbbbbb 1px solid; padding:0 30px 0 30px;text-align: left"> <span style="font-family:Arial, Helvetica, sans-serif; color:#333333;font-weight:bold; font-size:24px; line-height:normal;">We Have Recommendations For You </span> </td></tr><tr> <td height="20" style="border-left:#bbbbbb 1px solid; border-right:#bbbbbb 1px solid;"> </td></tr><tr> <td style="border-left:#bbbbbb 1px solid; border-right:#bbbbbb 1px solid; padding:0 30px 0 30px;"> <p style="font-family:Arial, Helvetica, sans-serif; color:#333333; font-size:17px; line-height:normal;">You have been looking for a $lookingfor.deviceType with $lookingfor.screenResolution display, $lookingfor.ppi ppi, $lookingfor.ram RAM. </p><p style="font-family:Arial, Helvetica, sans-serif; color:#333333; font-size:17px; line-height:normal;">Want to have a cosultation? Easy! Our managers will help you to make the right choice by phone: $trigger.deliverytelephone. </p></td></tr><tr> <td height="20" style="border-left:#bbbbbb 1px solid; border-right:#bbbbbb 1px solid;"> </td></tr><tr> <td style="border-left:#bbbbbb 1px solid; border-right:#bbbbbb 1px solid;"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="30"> </td><td style="text-align:left; vertical-align:middle;"><span style="font-family:Arial, Helvetica, sans-serif; color:#333333; font-size:17px; line-height:normal; ">Your $trigger.discount promo code: <span style="font-family:Arial, Helvetica, sans-serif; color:#ee1212; font-size:25px;">$trigger.promocode</span></span></td><td width="30"> </td></tr><tr> <td width="30"> </td><td style="text-align:left; vertical-align:middle;"><span style="font-family:Arial, Helvetica, sans-serif; color:#333333; font-size:12px; line-height:normal; ">The discount is valid till $dateFormat.format('full_date', $date_exptime)</td><td width="30"> </td></tr></table> </td></tr><tr> <td style="border-left:#bbbbbb 1px solid; border-right:#bbbbbb 1px solid; height:35px"> </td></tr><tr> <td style="border-left:#bbbbbb 1px solid; border-right:#bbbbbb 1px solid;"> <table border="0" cellpadding="0" cellspacing="0" style="width: 648px;"> <tbody> <tr> <td width="200"> </td><td><div style="text-align: center; vertical-align: middle; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color:#047DFF; border-bottom: #047DFF 5px solid;"><span style="color:#cccccc"><a href="#" style="color: #ffffff; font-size: 28px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; line-height:50px;" target="_blank">Find More!</a></span></div></td><td width="200"></td></tr></tbody> </table> </td></tr><tr> <td height="20" style="border-left:#bbbbbb 1px solid; border-right:#bbbbbb 1px solid;"> </td></tr><tr> <td style="border-left:#bbbbbb 1px solid; border-right:#bbbbbb 1px solid;"> <table width="648" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="30"> </td><td align="left" valign="top" style="text-align:left; vertical-align:top;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="border-bottom:#eaeaea 1px solid"> <table width="100%" border="0" cellspacing="0" cellpadding="5"> </table> </td></tr>#foreach( $product in $products ) <tr> <td style="border-bottom:#eaeaea 1px dashed; padding-bottom:10px; padding-top:10px;"> <table width="100%" border="0" cellspacing="0" cellpadding="5"> <tr> <td width="130" rowspan="2"><a href="$product.url"><img src="$product.imgUrl" width="130"/></a></td><td width="330" height="15"><span style="font-family:Arial, Helvetica, sans-serif; color:#333333; font-size:15px;"><a href="$product.url" target="_blank" style="color:#3e77aa; text-decoration:none;">$product.title</a></span></td><td rowspan="2" align="center"><span style="font-family:Arial, Helvetica, sans-serif; color:#3e77aa; font-size:17px;">$product.price</span></td></tr><tr> <td width="330" valign="top"><span style="font-family:Arial, Helvetica, sans-serif; color:#333333; font-size:12px;">$product.description</span></td></tr></table> </td></tr>#end <tr> <td style="border-bottom:#eaeaea 1px solid; padding-bottom:10px; padding-top:10px;"> <table width="100%" border="0" cellspacing="0" cellpadding="5"> </table> </td></tr></table> </td><td width="30" align="center" valign="top" style="text-align:center; vertical-align:top;"> </td></tr></table> </td></tr><tr> <td height="20" style="border-left:#bbbbbb 1px solid; border-right:#bbbbbb 1px solid;"> </td></tr><tr> <td height="20" style="border-left:#bbbbbb 1px solid; border-right:#bbbbbb 1px solid; border-top:#bbbbbb 1px solid; height:20px; line-height:20px;"> </td></tr><tr> <td style="vertical-align:top;border-bottom: 3px solid #047DFF; border-left:#bbbbbb 1px solid; border-right:#bbbbbb 1px solid; font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; text-align:left"> <table cellpadding="0" cellspacing="0" style="border:0;border-collapse:collapse;width:100%"> <tbody> <tr> <td width="50"> </td><td style="vertical-align:middle;height:29px"> <a href="#" target="_blank" style="color:#3e77aa;text-decoration:none"> <img src="https://unisenderfiles.storage.unisender.com/KBpictures/UniOne/smart.png" alt="Телефоны, MP3" title="Телефоны, MP3" width="23" height="23" style="border:0;vertical-align:bottom;"> Smartphones, Tablets </a> </td><td style="vertical-align:middle;height:29px"> <a href="#" target="_blank" style="color:#3e77aa;text-decoration:none"> <img src="https://unisenderfiles.storage.unisender.com/KBpictures/UniOne/lap.jpg" alt="Ноутбуки, планшеты и ПК" title="Ноутбуки, планшеты и ПК" width="23" height="23" style="border-width:0;vertical-align:bottom"> Laptops, PC </a> </td><td width="30"> </td></tr><tr> <td width="50"> </td><td style="vertical-align:middle;height:29px"> <a href="#" target="_blank" style="color:#3e77aa;text-decoration:none"> <img src="https://unisenderfiles.storage.unisender.com/KBpictures/UniOne/tv.png" alt="Аудио, Видео, Фото" title="ТВ, Аудио, Видео, Фото" width="23" height="23" style="border-width:0;vertical-align:bottom"> TV, Audio, Video </a> </td><td style="vertical-align:middle;height:29px"> <a href="#" target="_blank" style="color:#3e77aa;text-decoration:none"> <img src="https://unisenderfiles.storage.unisender.com/KBpictures/UniOne/home.png" alt="Бытовая техника и интерьер" title="Бытовая техника и интерьер" width="23" height="23" style="border-width:0;vertical-align:bottom"> Home, Garden, Tools </a> </td><td width="30"> </td></tr><tr> <td height="20" width="50"> </td><td> </td><td> </td><td width="30"> </td></tr></tbody> </table> </td></tr><tr> <td height="10" style="border-left:#bbbbbb 1px solid; border-right:#bbbbbb 1px solid; line-height:10px; height:10px;"> </td></tr><tr> <td style="border-left:#bbbbbb 1px solid; border-right:#bbbbbb 1px solid; "> <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="600" align="center" valign="middle" style="border-left:#CCC 1px solid; text-align:center; vertical-align:middle;"><a href="#" target="_blank" style="color:#666666; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#3e77aa; line-height:normal;">Unsubscribe</a> </td></tr></table> </td></tr><tr> <td height="20" style="border-left:#bbbbbb 1px solid; border-right:#bbbbbb 1px solid; border-bottom:#bbbbbb 1px solid; height:20px;"> </td></tr></table> </body></html>" }, "subject": "Recommendations", "from_name": "SENDER", "recipients": [ { "substitutions": { "date_exptime":"15/09/2017", "user": { "name":"John" }, "trigger": { "promocode":"SUPERFREE1000", "deliverytelephone":"+1031341553356", "discount":"-5%" }, "lookingfor": { "deviceType":"tablet", "screenResolution":"1920 X 1080", "ppi":"326", "ram":"2GB" }, "products": [ { "title":"Amazon Tablet", "price":"50$", "description":"One of the best tablets for such a low price. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. ", "url":"#" } , { "title":"Lenovo Tablet", "price":"75$", "description":"One of the most stylish tablets on the market. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", "url":"" } , { "title":"Asus Tablet", "price":"100$", "description":"One of the most handy tablets on the market. Ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor", "url":"#" } ] } } ] }} |
Result (in the recipient's inbox):
