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

The

Scroll down & select the Messaging tab.

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

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>

That should save your customised Cognito confirmation code/link.

CodePudding user response：

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.

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.