Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 961
PRO CODE Avatar asked Nov 28 '25 04:11

PRO CODE


1 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.

like image 76
Winson Tanputraman Avatar answered Nov 29 '25 18:11

Winson Tanputraman



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!