How do I update email templates in Identity Cloud to include images and HTML formatting?
The purpose of this article is to provide further information on updating email templates in ForgeRock Identity Cloud to include images and HTML tags. By default, email templates use markdown for formatting.
Updating email templates
You can change the appearance of email templates in Identity Cloud to include images and also HTML tags if required.
You can edit email templates as follows:
- In the Identity Cloud admin UI, go to Email > Templates and click the name of the email template you want to update.
- Update the email template as required. Refer to the following sections and Using email templates for further information on the changes you can make.
- Click Save.
Note
You can also include ESVs in your email template if you want text, links or images to differ depending on which environment the email is sent from. See How do I use ESVs in an email template in Identity Cloud? for further information.
Adding images
You can add an image to an email template as follows:
- Ensure your image is hosted online (do not use a local path).
- Use markdown in the following format to reference your image:For example, the markdown would look like this for an image hosted at
https://example.com/image
where the alt text isthis is an example image
:
Resizing images
You can change the size of an image displayed in the email template by specifying the size in pixels or as a percentage. You should add the sizing details before the closing bracket, for example:
- Size in pixels:
- Size as a percentage:
Using HTML formatting
Although you can't see HTML formatting in the Content editor, you can use inline HTML to format your email. See Markdown Syntax: Inline HTML for further information.
- Specify HTML tags in the Content editor to format your content. For example:<h1>Reset Password</h1>
- Add this HTML tag to the Styles editor along with some CSS to format it as required. For example:h1 { font-family: Arial, Helvetica, sans-serif; color: #f96700; background-color: #032b75; font-size: 25px; padding: 10px; }
The heading will now look like this:
After saving your changes, the inline HTML tags will convert to markdown but the styling for the tag will persist.
Alternatively, you can use the Advanced Editor to modify the template in HTML, but if you swap to the Advanced Editor, you cannot change back to markdown.
Adding tables
If you want to insert a table using HTML, you must include both the <thead> and <tbody> tags, otherwise the table will not convert correctly to markdown when saved.
For example:<table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <tr> <td>Cell Text 1</td> <td>Cell Text 2</td> <td>Cell Text 3</td> </tr> </tbody> </table>