SparkPost 提供咗一個非常好用的 Template 功能，你可以花時間砌個靚靚仔仔嘅 html email 然後經過 Subsitution 將可變數據代入，成為一個獨一無二嘅電郵（personalized email），再經由 SparkPost 寄出，再利用 SparkPost 嘅 Tracking 功能，睇下個客喺收到電郵之後有咩反應。祇不過 html email content 就大有學問。
我哋嚟講講哩個 html email template 點做：
SparkPost 提供咗一個 template 例子（My First Email）俾你：
冇用嘅，可以忘記佢。
今時今日，html email 係要 responsive，即係好似網頁咁，用 desktop browser 同用手機﹑tablets 睇都會 ok 靚仔，唔會趕客。所以我哋要花心機搞 responsive html email。
由零開始係好難嘅，我哋去搵網友幫手，最好係 open sources 添：
1 同 2 嘅 Billing email 差不多，不過 1 有用到 image，而 image 喺 html email 係有條件限制，因為怕咗啲 hacker，大部份 email client 都唔鍾意 email 入面有 image 嘅，咁，我哋就攞 1 嚟玩玩，向難度挑戰。
未加工前：
記住：
- 一邊靠左，一邊靠右
- 兩個 columns
- Total 上面條線差不多到中間
SparkPost 冇得俾你上載你個 image file，我首先用 embedded image 方法：準備好你隻 image file，利用嚟個 online 服務 base64-image.de，上載你隻 image 然後請佢幫忙 convert：
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAAAoCAYAAAASRL/NAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTM0A1t6AAAIB0lEQVR4Xu2ae2wVRRTG+QdUYjBUbBC0f5SHpCJB0BLBgAEkCMEXFKI8DCANFqgBgSKPGEDkjYgGS0CMgIAEhIAi0gixRKyhGAStyEsRqNrEIkWjQe3x/k5n1umwt49bH5Dsl5zs7HRnZ+/55jvn7GzrRYgQIUKECBEiRIgQ4T/HtUkZUpU1TH5cGjXDhukxOXVE0OZvDZIGho6zZqaJkCjCnNoweaCS0Kx1prTuMEHadZ0pnXotkc59lkjXR5ZLep/F2tc6fXLsmixJShkWlywzTYRE4TqzgRJToZLbO0+XB4aukxHP7pZnFhfIjJWHZNbrh9Vo0zdqxh7pN/ItJQsyGeuTZKaJkCgCcmKOxcEpaVnS5cFlMnrmXlm0+Zi8ffi8fFTyh1wqni/FH6dLj1c/UztQckm2F5XJsh2nZMzz+dJj0CpJaZetynNJMtNESBTWkYQoyMHRqANijl/8U8pLN6v9fGKsEnTbSwek796z0uqNIllz7Af58JufZNeJX2TKK4WqplQl6W8lmWkiJAqcSGgjrJFjIAdlfJvfVsp/XCOlRwZoG3Kwpkvz5enCYiUKJUHUi59/Lx+c+U1DHwQT7shjEUH/AHBiUiwskXMIayiHcAY5v5csV4JOvNdC+0oKuyspkNN1z1m5fv3hwIbuP6dKyp6/Xzp0n6OFAyoy00RIFKx0VjwFATnHhjVUo0TF2hDEOcfhuwul0YRlkjxzh4Y3wtw1qwqkzc4vZe3+EsndfUYeHb1VwyVh00wTBv5WyebNm3fZ9abPWq1w8uRJyczMlNTUVB3fuHFjycjIkBUrVtT6Xv8bcCKlNNUa6kE1kAI5F44O07AGMRjt+gvelPqrd8qt2wpkTMFxGZR/VK5bsktmFxzRNipCiSiyUS0JwoGlpaWVxiRKkCEhrkFc7HjlAydSJhOabLWGlRVlyK+np6kR2iCNtiUIxRSeK5W+uw+pmpps2KOEFZypKBju7rVAiwUzTRgqOcwaKzx2DJAIQXl5ee4YJX7Tpk1CvyFGLScnh+OVDZyIM0nwF4vXKBGYzT/lZTsqCoZYHwoivBHWUAvFAcebpmxQ0gh/5KI564r0hZbcZqYJQ+Ao33Bm7KhIhCCXBMwPaYaYq0NFKIidAQhCIeVlW5QMqyAIos/mINSCighxqIgjRQJhjiNFxAubvtJqriYEsbpt2xo5w4a6RAjy7+kSbhHWd0WCrRqcyaovGJ0rX2zdp0YbO7hwi55vaz5B1tzwlKS1v1NtyvSpMjxzpEzKGS8zZ03T9uDhT8jwsRNlydZTWnSkpGVX5QR1HqvZJnHXbPhJMAe5Y6Rjx45CwcAfrjrw5s8+G3mjePFOOf/+EbVjI1bL4X4vy6nsdXqe3+Y5Jan3Q/2UnPUbt0h6t+7Sf8gQPR87fpwSRX8Q4mKltpkmDOo8CPBzhjX6QwgKzs3fAvTs2VP7wwjHCGkuUfb6qsw8my4UlMm9CwsLtc+g0vWukU/rvDAaxnKQWyRA0pnpm6VoUK7ktZwqn3Saq8eNN2erJTVpIo89OUZ6DxispKCmVmlt9Th77kItvQmXhE3IN9OEQX+EdbIpDioZKz8Rgrwxl5klqqYEGUICMwvAIujnfijfDbG0/cq0VuA9qHWHyVpms4OAYjBIQUWHYuo62G2RkrM2OUtSWrSUe+7vK02b36KK6dKjh9zXu6/ccVcnDW/sKLA3V9My2zqZHxGWj7w+EJzHI8hrhxr3jacE/762qHDNGRv02XE+of79agXe9slD5Axyx+nvLigpkAFBKIlQB0EH+iyVDp3vVZJQEKQQ5iAMy125Vl9UB417R/MP5JtpwnDZw1f37hIzEJxXRRDg72GkW4unBP++XIea3dBpcyRta964eP21g271xHIFYY6Vj4oIa5BEqIOknSk5Gvr2tZ+l4QxiUM67eflKGPbwkFGqHvbyKNtvTBlR3VZP6MNXs/JBcF7F2AAok+viEWVzDG1r7n2tGiDEVZJDbtBnx5m8E1iddi4giN0EtntI7BQL7AZsTBqj5BDeNAfFzl9LztTQZknJmlhRvZGT8osvae5BiSiSe1azWaoP7zvZ/3GegeC8JgRZQFRYnnPuEdYXVJEQZUrzwPxQBoFcg9psn2knDpxoP9TxPQcHQxJKOvLp1xrqCG+Qg6ooBibNmCvd+/VXkigM7E42e3BsG+k3oep3s/UH+E4G1ikhBoJzf6xLEKvWr6BMsq5k1SnICW0WwXV+bmKcGwHqTA7AidYsSSiJcMfHONR0qKxctjcZr0auIe9QrUEMOYewxrtUarsJ+nJaww92wY+qOK0MdxU6pvnAnvs7AXaMdZI5BghTp1NhBX32mez1zEkf5s7vtjH+bggPrM4vxC5BGCQlx8Idnwz4AMdnbRTFu82C9UW6402bPjZFUQ05h7CGcux3IGtmmjDoD4hHkP9DjVXaxiGvWAXYAgOS3FVMGyf5oQdzEj0I+u0zmWONzY5z5+cZnUVQe7jOxFj95A8Kh2ZpWZKWPlUJQFUYSuGTOH2U0nxWoCBgjKsca2aaMOgPiEcQ8EMIfazqqiozCMMhcRQYmL8pG0PwN/tM3MMLb6Fh0pod5ys1ZK6aw3eotQqiKsjiZRbCUAhfXgljFWrhX68GhhJjzUwTBn34qgjCGV4YUZCcUZIliiNOcPKJAlWxmv3r4lRVeg3GM1kiPJUpXIW45v4WV+lYnUNdhAgRIkSIECFChAgRIkSI8O+jXr2/ADH+xsQw8CLVAAAAAElFTkSuQmCC
一大堆符號，照抄就對了。首先 create 一個新 template 將個 open source html 抄哂入去，然後改一改個 image 嗰行，如圖：
再喺你個 program 發個 email 俾自己，我用 C#：
var transmission = new SparkPost.Transmission();
transmission.Content.TemplateId = "invoice"; // xFilm5.Controls.Utility.Config.SparkPost_TemplateId_DN;
//transmission.Content.From.Email = "support@directoutput.com.hk";
//transmission.Content.ReplyTo = "no-reply<support@directoutput.com.hk>";
transmission.SubstitutionData["first_name"] = "John Phillip";
transmission.SubstitutionData["last_name"] = "Doe";
/*
var orders = new List<Order>
{
new Order { OrderId = "1", Total = 101 },
new Order { OrderId = "2", Total = 304 }
};
// you can pass more complicated data, so long as it
// can be parsed easily to JSON
transmission.SubstitutionData["orders"] = orders;
*/
var recipient = new SparkPost.Recipient
{
Address = new Address { Email = "paulusyeung@gmail.com" }
};
transmission.Recipients.Add(recipient);
var client = new SparkPost.Client(xFilm5.Controls.Utility.Config.SparkPost_ApiKey);
var response = client.Transmissions.Send(transmission).Result;
// or client.Transmissions.Send(transmission).Wait();
收到會係咁樣嘅：
隻 image 出唔倒，啲 column formats 冇哂！😂
原因係 Gmail client 唔接受 embedded image 同 header CSS。自己搞 CSS，要將佢轉做 inline CSS，照慣例，先搵網上幫手：
將個 html template 抄俾佢，佢會幫你 convert 為 inline CSS，咁，你 create 多一個 template 照抄啲 code 就得。然後再發一個 email：
啲 formats 有番哂！接落嚟就到個 image，image 我會放喺 Google Drive，然後 share 條 link。
 |
 |
 |
| 首先要用 admin account 去改啲設定，容許 anyone has the link can view the file． | 然後上載隻 image file 去 Google Drive 做 share． | 最後得到條 link，我哋淨係要個 id． |
將第二個 html template duplicate 一個，將個 image 嗰行改成：
<img src="https://drive.google.com/uc?id=0BwWE4Iqoyigxek9UTW14VjBZZ2c" alt="linked logo" style="width:100%; max-width:300px;">
id= 你個 Google Drive file id，再 send 一個 email：
 |
 |
 |
| Desktop browser | Gmail client | Nexus 5X |
 |
 |
|
| iPhone 6 | iPad |
大功告成！（雖然未講點樣用 C# call SparkPost API 發電郵 😜）