Formatting Your HTML Emails by Using CSS

ImportantIdentity Cloud's 2FA feature is currently in Limited Availability. Please contact your Akamai representative as usage of 2FA features must be approved during Limited Availability.


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. 

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


For example, in the following body parameter we’ve added some CSS that will display 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 even include images in your HTML emails. Note the Akami logo at the bottom of this message:



That image was added by using the following body parameter:


{
  "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>"
    }
}




See Also