chef-louis
commented
1 month ago Figured out how to style the verification email using HTML -- so now we just need to get a design that looks good.
Closed qisforq closed 1 month ago
chef-louis
commented
1 month ago Figured out how to style the verification email using HTML -- so now we just need to get a design that looks good.
qisforq
commented
1 month ago Looks great! Here is the html for the paid confirmation email for AthletiFi Select:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>
</title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a {
padding: 0;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 13px 0;
}
</style>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<!--[if !mso]><!-->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet" type="text/css">
<style type="text/css">
@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);
</style>
<!--<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}
}
</style>
<style media="screen and (min-width:480px)">
.moz-text-html .mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}
</style>
<style type="text/css">
@media only screen and (max-width:480px) {
table.mj-full-width-mobile {
width: 100% !important;
}
td.mj-full-width-mobile {
width: auto !important;
}
}
</style>
<style type="text/css">
* {
font-family: Poppins, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif !important;
}
h2 {
font-weight: 700 !important;
font-size: 20px;
}
ul {
margin-bottom: 16px !important;
}
h3 {
font-weight: 700 !important;
}
h4 {
font-weight: 600 !important;
margin-bottom: 0px !important;
color: #11568c !important;
font-size: 16px;
}
strong {
color: #4F5660 !important;
}
div,
li {
color: #2E3338;
}
p,
span {
font-size: 14px;
line-height: 20px;
color: #4F5660 !important;
}
.no-style {
font-size: unset;
line-height: unset;
color: unset !important;
}
.cta-button a {
padding: 10px !important;
font-size: 14px !important;
display: block !important;
/* Makes the button fully clickable, not just the text */
}
.download-button a {
padding: 8px 24px !important;
font-size: 14px !important;
}
.cta-button {
margin: 24px 0px !important;
}
.help-text p {
font-size: 12px;
margin: 0;
}
.footer *:not(a) {
color: #747F8D !important;
}
.round-border {
overflow: hidden;
border-radius: 8px;
}
.social-media div {
text-align: center !important;
}
.social-media-col {
width: 40px !important;
}
</style>
<!-- prettier-ignore -->
</head>
<body style="word-spacing:normal;background-color:#F9F9F9;">
<div style="background-color:#F9F9F9;">
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:604;" width="604" >
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0px auto;max-width:604;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<![endif]-->
<style type="text/css">
html,
body,
* {
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
a {
color: #1eb0f4;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
<!--[if mso | IE]>
<tr>
<td class="" width="604" >
<table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:604px;" width="604" bgcolor="transparent" >
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="background:transparent;background-color:transparent;margin:0px auto;max-width:604px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
style="background:transparent;background-color:transparent;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0px;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="" style="vertical-align:top;width:604px;" >
<![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix"
style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation"
style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="center" style="font-size:0px;padding:0;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation"
style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td style="width:140px;">
<a href="https://www.athletifiselect.com" target="_blank">
<img height="38"
src="https://vidalco.in/uploads/Athleti_Fi_logo_horizontal_small_b8288b9c0a.png"
style="border:0;display:block;outline:none;text-decoration:none;height:38px;width:100%;font-size:13px;"
width="140" />
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
</td>
</tr>
<![endif]-->
<!--[if mso | IE]>
<tr>
<td class="shadow-outlook round-border-outlook" width="604" >
<table align="center" border="0" cellpadding="0" cellspacing="0" class="shadow-outlook round-border-outlook" role="presentation" style="width:604px;" width="604" bgcolor="#ffffff" >
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div class="shadow round-border"
style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:604px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
style="background:#ffffff;background-color:#ffffff;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:40px 50px;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="" style="vertical-align:top;width:504px;" >
<![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix"
style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation"
style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="center" style="padding:10px 0;">
<img src="https://vidalco.in/uploads/New_poster_bg_copy3423_2c6ba4817c.jpg" style="width:100%; height:auto;">
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:0px;word-break:break-word;">
<div
style="font-family:Poppins, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#737F8D;">
<p>Hello ${result.parentFirstName},</p>
<p>
Congratulations! We have received your payment, and ${result.playerFirstName} is officially enrolled in the AthletiFi Summer Select program for the summer of 2024. If you have any questions or concerns regarding your payment, please don't hesitate to reach out to our team.
</p>
<p>
Here are the next steps to keep your eyes on between now and the start of summer:
</p>
<h4>📋 Waivers and Questionnaire</h4>
<p>
In the coming weeks, we will send you a set of standard waivers which will need to be signed before the start of the program. We will also send you a questionnaire to gather important information, such as shirt size, to ensure we have everything set for ${result.playerFirstName} on day 1.
</p>
</div>
<h4>⚽ Program Recap</h4>
<p>As a reminder, here are the key details for the AthletiFi Summer Select program:</p>
<p><strong>📍 Location: </strong>Arcadia University, Jean Lenox West Field (450 South Easton Road, Glenside, PA 19038)</p>
<p><strong>🗓️ Dates: </strong>Every Tuesday and Thursday from June 11 to July 25, with a break during Independence week.</p>
<p><strong>⏰ Time: </strong>Each session will be from 5:30 to 7:00 p.m.</p>
<p><strong>🏆 Tournaments:</strong></p>
<ul>
<li
style="font-family: Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;font-size: 16px;color: #4F5660;margin: 4px 0;letter-spacing: 0;line-height: 22px;font-weight: 600;">
<span style="font-weight: 400;"><a href="https://www.hersheysoccer.org/summerclassic"
style="font-family: Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;color: #0092c4;">Hershey
Summer Classic:</a> June 15-16</span>
</li>
<li
style="font-family: Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;font-size: 16px;color: #4F5660;margin: 4px 0;letter-spacing: 0;line-height: 22px;font-weight: 600;">
<span style="font-weight: 400;"><a href="https://www.edpsoccer.com/summer-sizzler"
style="font-family: Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;color: #0092c4;">EDP Summer
Sizzler:</a> July 27-28</span>
</li>
</ul>
<p>Please mark your calendars and stay tuned for final confirmations and any additional tournament opportunities.</p>
<h4>🎴 AthletiFi Player Cards and Dashboard</h4>
<p>
As part of the AthletiFi Summer Select experience, each player will receive their own physical player card. These cards feature the player's photo and a unique QR code. When scanned, the QR code grants access to the AthletiFi Dashboard, a new digital platform designed to provide engaging and easy-to-follow insights on your child's soccer performance.
</p>
</td>
</tr>
<tr>
<td align="center" style="padding:10px 0;">
<img src="https://vidalco.in/uploads/new_mockup_3738ee1473.jpg" style="width:70%; height:auto;">
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:0px;word-break:break-word;">
<p>
Key features of the AthletiFi Dashboard include:
</p>
<ul>
<li
style="font-family: Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;font-size: 16px;color: #4F5660;margin: 4px 0;letter-spacing: 0;line-height: 22px;font-weight: 600;">
<span style="font-weight: 400;">Real-time performance tracking with detailed statistics and trends</span>
</li>
<li
style="font-family: Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;font-size: 16px;color: #4F5660;margin: 4px 0;letter-spacing: 0;line-height: 22px;font-weight: 600;">
<span style="font-weight: 400;">Video highlights showcasing your child's skills and achievements</span>
</li>
<li
style="font-family: Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;font-size: 16px;color: #4F5660;margin: 4px 0;letter-spacing: 0;line-height: 22px;font-weight: 600;">
<span style="font-weight: 400;">Comprehensive game recaps with insightful analytics</span>
</li>
</ul>
<p>
Throughout the summer, we will be utilizing the AthletiFi dashboard to share program highlights, performance updates, and important information. We encourage you to explore this powerful tool and use it to stay connected with ${result.playerFirstName}'s soccer experience.
</p>
<h4>🤝 Our Commitment to You</h4>
<p>
We are committed to providing a safe, supportive, and fun environment for all participants. If you have any questions or concerns at any point, we are here to assist you.
</p>
<p>
We are thrilled to have ${result.playerFirstName} as part of the AthletiFi Summer Select family. Get ready for a summer filled with skill development, new friendships, and a shared passion for the beautiful game.
</p>
<p>See you on the field soon!</p><br>
<p>Best regards,</p><br>
<p>AthletiFi Select Team</p>
</td>
</tr>
<tr>
<td align="center" style="font-size:0px;padding:10px 0;word-break:break-word;">
<p style="border-top:solid 1px #DCDDDE;font-size:1px;margin:0px auto;width:100%;">
</p>
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 1px #DCDDDE;font-size:1px;margin:0px auto;width:504px;" role="presentation" width="504px" >
<tr>
<td style="height:0;line-height:0;"> </td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- <tr>
<td align="center" style="padding:10px 0;">
<img src="https://vidalco.in/uploads/Athleti_Fi_Select_Banner_410b9abacf.jpg" style="width:100%; height:auto;">
</td>
</tr>
-->
<tr>
<td style="font-size:0px;padding:120;word-break:break-word;">
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:504px;" width="504" >
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0px auto;max-width:504px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:120;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" class="help-text-outlook" style="" >
<![endif]-->
<div
style="font-family:Poppins, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;font-size:12px;line-height:1;text-align:left;color:#747F8D;">
<p>🙋 Questions? Please don't hesitate to <a href="mailto:welcome@athletifiselect.com?subject=Question%20about%20AthletiFi%20Select" style="font-family: Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;color: #0092c4">contact us</a>. Your excitement and involvement make our program truly special, and we're here to ensure you have all the information you need.</p>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
</td>
</tr>
<![endif]-->
<!--[if mso | IE]>
<tr>
<td class="footer-outlook" width="604" >
<table align="center" border="0" cellpadding="0" cellspacing="0" class="footer-outlook" role="presentation" style="width:604px;" width="604" bgcolor="transparent" >
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div class="footer" style="background:transparent;background-color:transparent;margin:0px auto;max-width:604px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
style="background:transparent;background-color:transparent;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;padding-bottom:0px;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="" style="vertical-align:top;width:604px;" >
<![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix"
style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;"
width="100%">
<tbody>
<tr>
<td align="center" style="font-size:0px;padding:0;word-break:break-word;">
<div
style="font-family:Poppins, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;font-size:12px;line-height:24px;text-align:center;color:#99AAB5;">
Sent by AthletiFi •
<a href="https://www.athleti.fi/news?page=1" style="color: #0092c4; text-decoration: none">Check Our
Blog</a>
• <a href="https://www.instagram.com/athletifi/"
style="color: #0092c4; text-decoration: none">@athletifi</a>
</div>
</td>
</tr>
<tr>
<td align="center" style="font-size:0px;padding:0;word-break:break-word;">
<div
style="font-family:Poppins, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;font-size:12px;line-height:24px;text-align:center;color:#99AAB5;">
326 Penn Ave, West Reading, PA 19611
</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:0;word-break:break-word;">
<div
style="font-family:Poppins, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</div>
</html>
Oh nice, this is way more sophisticated than what I had. I'll pull from here what I can to improve the email verification emails.
qisforq
commented
1 month ago There are a lot of quirks with how different email clients render HTML btw - this one has been tested to work on gmail, cloud, and outlook clients so it should be good to go as is. But it would be good to test it on multiple clients after you've made changes
qisforq
commented
1 month ago Oh nice, this is way more sophisticated than what I had. I'll pull from here what I can to improve the email verification emails.
This was originally a Discord email that I modified - so a lot of the complexity comes from there. There's probably a lot that isn't needed but there are so many client-specific quirks that need to be accounted for, so I'm afraid to prune it down too much
chef-louis
commented
1 month ago No worries. I started from that email as the base and replaced the rows that I didn't need with the short content for the verification email. Looks like this now:
I kept the color scheme but happy to change it if we prefer a different tone.
qisforq
commented
1 month ago Nice work @chef-louis !
@qisforq Reminder to include a sample HTML email here for future reference. Thanks