Format 2FA emails by using CSS

Suggest Edits

When it comes to the HTML version of your 2FA messages you can use inline CSS to add your own aesthetic flair to those messages.

📘
Sorry, but you can’t use CSS for text messages or for plain-text email messages, and for good reason: those platforms don’t support CSS. (Or much else in the way of formatting.)

For example, in the following request body we’ve added some CSS that displays our message using red text:

{
    "sms": "{{site_name} }: Your secure access code is {{code} }. Do not share this code with anyone.
{{site_name}} will never ask you for it.",
    "email": {
        "subject": "{{site_name}} One Time Code",
        "textBody": "{{site_name}}: Your secure access code is {{code}}. Do not share this code
with anyone. {{site_name}} will never ask you for it.",
        "htmlBody": "<p style='color:red'>{{site_name}}: Your secure access code is {{code}}.
Do not share this code with anyone. {{site_name}} will never ask you for it.</p>"
    },
    "_self": "/config/79y4mqf2rt3bxs378kw5479xdu/flows/moreJTL/locales/en-US/
2faMessages/secondFactor"
}

After making the API call, here’s what the users see in their inboxes:

You can also include images in your HTML emails. Note the Akamai logo at the bottom of this message:

That image was added by using the following request body:

{
  "sms": "{{site_name}}: Your secure access code is {{code}}. Do not share this code with anyone.
 {{site_name}} will never ask you for it.",
  "email": {
    "subject": "{{site_name}} One Time Code",
    "textBody": "{{site_name}}: Your secure access code is {{code}}. Do not share this code with anyone.
 {{site_name}} will never ask you for it.",
    "htmlBody": "<p>{{site_name}}: Your secure access code is {{code}}. Do not share this code with
anyone. {{site\_name}} will never ask you for it.</p><p><img src='https://www.akamai.com/us/en/multimedia/documents/media-resources/akamai-logo.jpg?imwidth=320'></p>"
    }
}

Updated over 2 years ago