How can I customise the link in a Cognito verification email?

user_12326985 0
Viewed 785

When a user registers via my application, Cognito sends an email with a verification link.

AWS Cognito provides a template ({## text ##}) that will transform to some form of link e.g. <a href='link-to-confirm'> text </a>.

How can I add CSS styles to this a tag?

amazon-cognito amazon-web-services email html
2 Answers

You can use the <style> tag inside a <head> section. For example,

<head>
  <style>
    a {color : orange !important;}
    a:hover {color : red !important;}
  </style>
</head>
<body>
  <a href="www.google.com">Test link</a>
  {##Cognito link##} 
</body>

I tried this myself, and in Gmail at least it works. It will also turn red when I hover over, just that I cannot screenshot it.

enter image description here

Just a final disclaimer, from what I know, email styling is best done inline (like <a style="...">...</a>). So depending on the email client, maybe this approach may not be supported. At least, I've tested this works in Gmail, though.

If you really need to use inline CSS, you can still achieve it by completely customizing the email using Cognito trigger to call a Lambda function. See this article for an example. I did not jump to this solution because this is mainly intended for when you need dynamic email content.

user_11159510

AWS Cognito has a set of editable message templates, which also include the verification message template.

To customise the verification message:

  1. Navigate to the AWS Cognito service in the AWS console and click on your user pool name.

enter image description here

  1. Scroll down & select the Messaging tab.

enter image description here

  1. Under Message Templates, select the Verification message entry in the table and click Edit.

enter image description here

  1. Regardless of your verification type, whether link or code, add any CSS style you like inline & press Save changes. Please note that you, unfortunately, cannot modify the a tag generated by AWS Cognito itself.

Example for code verification type: 

Your verification code is <span style="color: red;">{####}</span>.

Example for email verification type: 

Please click the link below to verify your email address.<span style="color: red;">{##Verify Email##}</span>

enter image description here

That should save your customised Cognito confirmation code/link.

user_48003440
Related