Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save thedevelobear/599ef0a693aa870a26e4714086136203 to your computer and use it in GitHub Desktop.
Save thedevelobear/599ef0a693aa870a26e4714086136203 to your computer and use it in GitHub Desktop.
Cognito custom verification email
var CustomMessage_ForgotPassword =
`
<!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.0" />
<style type="text/css">
#outlook a {
padding: 0;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass * {
line-height: 100%;
}
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]><!-->
<style type="text/css">
@media only screen and (max-width: 480px) {
@-ms-viewport {
width: 320px;
}
@viewport {
width: 320px;
}
}
</style>
<!--<![endif]-->
<!--[if mso
]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG /> <o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings></xml
><!
[endif]-->
<!--[if lte mso 11
]><style type="text/css">
.outlook-group-fix {
width: 100% !important;
}
</style><!
[endif]-->
<!--[if !mso]><!-->
<link
href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700"
rel="stylesheet"
type="text/css"
/>
<style type="text/css">
@import url(
https://fonts.googleapis.com/css?family=Ubuntu:300,
400,
500,
700
);
</style>
<!--<![endif]-->
<style type="text/css">
@media only screen and (min-width: 480px) {
.mj-column-per-100 {
width: 100% !important;
}
}
</style>
</head>
<body style="background: #FDFDFD;">
<div class="mj-container" style="background-color:#FDFDFD;">
<!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;"> <tr> <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <![endif]-->
<div style="margin:0px auto;max-width:600px;background:#FFFFFF;">
<table
role="presentation"
cellpadding="0"
cellspacing="0"
style="font-size:0px;width:100%;background:#FFFFFF;"
align="center"
border="0"
>
<tbody>
<tr>
<td
style="text-align:center;vertical-align:middle;direction:ltr;font-size:0px;padding:0px 0px 0px 0px;"
>
<!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="vertical-align:middle;width:600px;"> <![endif]-->
<div
class="mj-column-per-100 outlook-group-fix"
style="vertical-align:middle;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;"
>
<table
role="presentation"
cellpadding="0"
cellspacing="0"
style="vertical-align:middle;"
width="100%"
border="0"
>
<tbody>
<tr>
<td style="word-wrap:break-word;font-size:0px;">
<div
style="font-size:1px;line-height:10px;white-space:nowrap;"
>
&#xA0;
</div>
</td>
</tr>
<tr>
<td
style="word-wrap:break-word;font-size:0px;padding:0px 0px 0px 0px;"
align="center"
>
<table
role="presentation"
cellpadding="0"
cellspacing="0"
style="border-collapse:collapse;border-spacing:0px;"
align="center"
border="0"
>
<tbody>
<tr>
<td style="width:600px;">
<img
alt
height="auto"
src="https://storage.googleapis.com/afuxova10642/konfety.png"
style="border:none;border-radius:0px;display:block;font-size:13px;outline:none;text-decoration:none;width:100%;height:auto;"
width="600"
/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
style="word-wrap:break-word;font-size:0px;padding:0px 0px 0px 0px;"
align="center"
>
<table
role="presentation"
cellpadding="0"
cellspacing="0"
style="border-collapse:collapse;border-spacing:0px;"
align="center"
border="0"
>
<tbody>
<tr>
<td style="width:486px;">
<a
href="https://www.thedevelobear.com/img/logo.png"
target="_blank"
><img
alt="Logo"
height="auto"
src="https://www.thedevelobear.com/img/logo.png"
style="border:none;border-radius:0px;display:block;font-size:13px;outline:none;text-decoration:none;width:100%;height:auto;"
width="486"
/></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
style="word-wrap:break-word;font-size:0px;padding:0px 0px 0px 0px;"
align="center"
>
<table
role="presentation"
cellpadding="0"
cellspacing="0"
style="border-collapse:collapse;border-spacing:0px;"
align="center"
border="0"
>
<tbody>
<tr>
<td style="width:600px;">
<img
alt
height="auto"
src="https://www.thedevelobear.com/img/Memphis-design/Bearphis_design.png"
style="border:none;border-radius:0px;display:block;font-size:13px;outline:none;text-decoration:none;width:100%;height:auto;"
width="600"
/>
</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> <![endif]-->
<!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;"> <tr> <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <![endif]-->
<div style="margin:0px auto;max-width:600px;background:#FFFFFF;">
<table
role="presentation"
cellpadding="0"
cellspacing="0"
style="font-size:0px;width:100%;background:#FFFFFF;"
align="center"
border="0"
>
<tbody>
<tr>
<td
style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:0px 0px 0px 0px;"
>
<!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="vertical-align:top;width:600px;"> <![endif]-->
<div
class="mj-column-per-100 outlook-group-fix"
style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;"
>
<table
role="presentation"
cellpadding="0"
cellspacing="0"
style="vertical-align:top;"
width="100%"
border="0"
>
<tbody>
<tr>
<td style="word-wrap:break-word;font-size:0px;">
<div
style="font-size:1px;line-height:15px;white-space:nowrap;"
>
&#xA0;
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]> </td></tr></table> <![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]> </td></tr></table> <![endif]-->
<!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;"> <tr> <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <![endif]-->
<div style="margin:0px auto;max-width:600px;background:#FFFFFF;">
<table
role="presentation"
cellpadding="0"
cellspacing="0"
style="font-size:0px;width:100%;background:#FFFFFF;"
align="center"
border="0"
>
<tbody>
<tr>
<td
style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:9px 0px 9px 0px;"
>
<!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="vertical-align:top;width:600px;"> <![endif]-->
<div
class="mj-column-per-100 outlook-group-fix"
style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;"
>
<table
role="presentation"
cellpadding="0"
cellspacing="0"
style="vertical-align:top;"
width="100%"
border="0"
>
<tbody>
<tr>
<td
style="word-wrap:break-word;font-size:0px;padding:0px 0px 0px 0px;"
align="center"
>
<div
style="cursor:auto;color:#000000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:11px;line-height:1.5;text-align:center;"
>
<p>
<span style="font-size:18px;"
><strong
>I&apos;m sorry to hear that you forgot you
password</strong
></span
>
</p>
<p>
<span style="font-size: 14px;"
>Don&apos;t worry though, you can reset it
easily by typing below password on the
Develobear app.<br />Remembear &#x2013;
we&apos;re glad to have you with us!</span
><br /><br /><br /><span style="color:#e42748;"
><span style="font-size:20px;"
><strong>CODE: ${event.request.codeParameter}</strong></span
></span
>
</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]> </td></tr></table> <![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]> </td></tr></table> <![endif]-->
</div>
</body>
</html>
`
@abhimanyuPatil
Copy link

I used this. But it sends the default email body. Any idea why?

@Dacaramo
Copy link

Dacaramo commented May 9, 2024

@abhimanyuPatil did you manage to solve this? I'm facing the same issue. I'm using this template or any other template and it still sends the default email body. I've tried using SES alone to send emails with the same template and it works, don't really know why it does not work for emails sent by Cognito. This is a major issue, that no one is talking about

@cecam
Copy link

cecam commented May 31, 2024

I'm facing the same issue, it seems like Cognito can only send simple html without styles

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment