Action confirmation email
Example use cases
- Account activation
- Reset password issue
Code output
Open email template in new windowHTML markup
The body of the email has been divided into sections of code that can be altered or replicated according to the requirements.
Copy<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width">
<style type="text/css">
html,body {
margin:0;
padding:0;
background:#f1f3f6;
font-family: 'Open Sans', Arial, sans-serif;
font-size:15px;
-webkit-text-size-adjust:100%;
}
@media (max-width:767px) {
.mail-wrapper {
width:480px !important;
}
.mail-header tbody,
.mail-header tr,
.mail-header td,
.mail-footer tbody,
.mail-footer tr,
.mail-footer td {
display:block;
}
.mail-header td.header-first {
text-align:center;
}
.mail-header td.header-second {
padding-top:0 !important;
text-align:center;
}
.mail-main-body {
padding: 0 20px 15px 20px !important;
font-size:14px;
}
.mail-button {
margin:0 auto;
}
.mail-alt-pad {
padding:0 15px !important;
}
.mail-footer td.footer-first {
padding:15px 0 0 !important;
width:100%;
}
.mail-footer td.footer-second {
padding:0 !important;
width:100%;
}
}
@media (max-width:544px) {
.mail-wrapper {
width:100% !important;
}
}
</style>
<!--[if !mso]><!-- -->
<link href="https://skyframework.pccwglobal.com/css/fonts.css" rel="stylesheet">
<!--<![endif]-->
</head>
<body style="padding:0;background:#f1f3f6;">
<table align="center" border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td align="center" valign="top">
<table class="mail-wrapper" align="center" border="0" cellspacing="0" cellpadding="0" style="width:630px;padding:15px;">
<tr>
<td>
<!--header-->
<table class="mail-header table-block" align="center" border="0" cellspacing="0" cellpadding="0" width="100%" style="background:#ffffff;border-top:1px solid $border-color;border-left:1px solid $border-color;border-right:1px solid $border-color;">
<tr>
<td align="left" class="header-first" style="padding:20px 30px 20px 20px">
<img src="https://skyframework.pccwglobal.com/img/pccwglobal_dark_r.png" width="234" height="40" style="width:234px;height:40px;">
</td>
<td class="header-second" align="right" style="padding:20px 30px">
<h2 style="color:#29548c;margin:0;padding:0;font-weight:300;font-size:24px;line-height:24px;">Service Portal<br><small style="font-size:14px;font-weight:700;">ACCOUNT ACTIVATION</small></h2>
</td>
</tr>
</table>
<!--body-->
<table class="mail-body table-block" align="center" border="0" cellspacing="0" cellpadding="0" width="100%" style="background:#ffffff;border-left:1px solid $border-color;border-right:1px solid $border-color;">
<!--top spacer-->
<tr>
<td style="padding:0 30px;">
<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td style="height:40px;border-top:1px solid $border-color;">
</td>
</tr>
</table>
</td>
</tr>
<!--text-block-->
<tr>
<td class="mail-main-body" style="color:#212121;padding:0 30px;">
<p style="padding:0;margin:0;text-align:justify;"><b>Username</b>, this is an automated message sent by the PCCW Global Service Portal. Please click on the following link to validate your email and activate your account.</p>
</td>
</tr>
<!--button-->
<tr>
<td class="mail-main-body" style="color:#212121;padding:0 30px;">
<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td style="padding: 30px 0;">
<table align="center" class="mail-button" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="background:#2d74d0;padding:15px 30px;border-radius:3px;">
<a style="color:#ffffff;text-decoration:none;" href="action">Activate your account</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--text-block-->
<tr>
<td class="mail-main-body" style="color:#212121;padding:0 30px;">
<p style="padding:0;margin:0;text-align:center;"><small>If you encounter any issues concerning your account activation, please contact us at <a href="mailto:helpdesk@pccwglobal.com?subject=Account%20activation&body=The%20activation%20link%20does%20not%20work." target="_blank" style="color:#2d74d0;text-decoration:none;">helpdesk@pccwglobal.com</a> to resolve any issues.</small></p>
</td>
</tr>
<!--spacer-->
<tr>
<td style="height:40px">
</td>
</tr>
</table>
<!--footer-->
<table class="mail-alt table-block" align="center" border="0" cellspacing="0" cellpadding="0" width="100%" style="background:#ffffff;border-left:1px solid $border-color;border-right:1px solid $border-color;">
<tr>
<td style="padding: 0 30px;">
<table align="center" border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td class="mail-alt-main" align="center" valign="middle" style="border-top:1px solid $border-color;border-bottom:1px solid $border-color;padding:15px 0">
<span style="font-size:13px;">© 2017 <b>PCCW Global</b>. <span style="display:inline-block;">All rights reserved.</span></span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="mail-footer table-block" align="center" border="0" cellspacing="0" cellpadding="0" width="100%" style="background:#ffffff;border-bottom:1px solid $border-color;border-left:1px solid $border-color;border-right:1px solid $border-color;">
<tr>
<td align="center" width="50%" class="footer-first" style="padding:10px 20px">
<img src="https://skyframework.pccwglobal.com/img/hkt.png" width="170" height="50" style="width:170px;height:50px;">
</td>
<td class="footer-second" width="50%" align="center" style="padding:10px 20px">
<img src="https://skyframework.pccwglobal.com/img/pccw-member.png" width="200" height="50" style="width:200px;height:50px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>