HTML template for system emails

  • 22 January 2021
  • 6 replies
  • 226 views

Userlevel 5
Badge +1

Updated at Jun 22, 2021: include unsubscribe links in the footer of the following email templates. 

Today’s users expect a seamless experience across channels, not only when they are in the platform, but also when they received notification emails. However, it’s not always easy to craft beautiful and branded email notifications for your community. We are here to help. 

In this guide, you will learn about how to customize your system emails based on this template step by step.

 

Example of an insided system email which is built based on this template

How to use this template:

  1. Copy and paste the codes below, and save them as an HTML file. 
  2. Change text-color (default value: #000000)
  3. Change background-color (default value: #f8f8f8)
  4. Change logo image (default value: logo-image-url)
  5. Change logo width (default value: 560px)
  6. Change button bgcolor (default value: 0000ff)
  7. Save as new HTML file "Customer System Emails.html"
  8. Go to Control > Email > System Emails to add the HTML snippets for each system email.

    
Notes: 

  1. Use the ‘find and replace all’ function to replace the default values with color codes and URLs in your community brand.
  2. The logo needs to be hosted online first. We’d recommend having the logo uploaded on your company servers. 

     

Enjoy! :wink:

 

HTML template for all system emails

<!----------------------------------------------------------------------


INSTRUCTIONS
1. Change text-color (defaul value: #000000)
2. Change background-color (defaul value: #f8f8f8)
2. Change logo image (defaul value: logo-image-url)
3. Change logo width (defaul value: 560px)
4. Change button bgcolor (default value: 0000ff)
5. Save as new HTML file "Customer System Emails.html"

Note:
1. Use find and replace all function to replace the default values with color codes and urls in your community brand.
2. The logo needs to be hosted online first. We’d recommend having the logo uploaded on your company servers. 

----------------------------------------------------------------------->



<!----------------------------------------------------------------------
@ Mention
----------------------------------------------------------------------->
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /></head><body>

<!-- Change text-color, background-color, font-size -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: #000000; background-color: #f8f8f8; font-size: 16px;">

<!-- Change space above logo -->
<tr height="40"></tr><tr><td></td>

<!-- Width of email - default: 560px -->
<td style="width: 560px;">

<!-- Logo -->
<center>
<img width="145"src="logo-image-url" />
</center></td>

<!-- Change space below logo -->
<tr height="20"></tr>

<!-- Start of content -->
<tr><td></td><td style="background: #ffffff; padding: 26px 40px;">
Dear {recipient_username},<br /><br />
{author_username} mentioned you in: "{topic_title}"<br /><br />
Preview:<br />
{post_content}<br /><br />
<!-- Button -->
<table cellspacing="0" cellpadding="0"><tr><td style="border-radius: 4px;" bgcolor="0000ff">
<a href="{post_url}" target="_blank" style="padding: 12px 16px; border-radius: 4px; color: #ffffff; text-decoration: none; display: inline-block;">
View reply</a></td></tr></table></td></tr>

<!-- Footer -->
<tr height="80" style="font-size: 12px;"><td></td><td>
<center>
<a href="{unsubscribe_url}" target="_blank" style="color:#23496d; text-decoration: underline; display: inline-block;">
Unsubscribe from @mention notification emails</a>
</center>
</td><td></td></tr></table></body></html>



<!----------------------------------------------------------------------
Account approved
----------------------------------------------------------------------->
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /></head><body>

<!-- Change text-color, background-color, font-size -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: #000000; background-color: #f8f8f8; font-size: 16px;">

<!-- Change space above logo -->
<tr height="40"></tr><tr><td></td>

<!-- Width of email - default: 560px -->
<td style="width: 560px;">

<!-- Logo -->
<center>
<img width="145"src="logo-image-url" />
</center></td>

<!-- Change space below logo -->
<tr height="20"></tr>

<!-- Start of content -->
<tr><td></td><td style="background: #ffffff; padding: 26px 40px;">
Dear {recipient_username},<br /><br />
Your account has been successfully activated.<br /><br />

<!-- Button -->
<table cellspacing="0" cellpadding="0"><tr><td style="border-radius: 4px;" bgcolor="0000ff">
<a href="#" target="_blank" style="padding: 12px 16px; border-radius: 4px; color: #ffffff; text-decoration: none; display: inline-block;">
Go to community</a></td></tr></table></td></tr>

<!-- Footer -->
<tr height="80" style="font-size: 12px;"><td></td><td>
<center>
The community team
</center>
</td><td></td></tr></table></body></html>



<!----------------------------------------------------------------------
Activate account
----------------------------------------------------------------------->
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /></head><body>

<!-- Change text-color, background-color, font-size -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: #000000; background-color: #f8f8f8; font-size: 16px;">

<!-- Change space above logo -->
<tr height="40"></tr><tr><td></td>

<!-- Width of email - default: 560px -->
<td style="width: 560px;">

<!-- Logo -->
<center>
<img width="145"src="logo-image-url" />
</center></td>

<!-- Change space below logo -->
<tr height="20"></tr>

<!-- Start of content -->
<tr><td></td><td style="background: #ffffff; padding: 26px 40px;">
Dear {recipient_username},<br /><br />
We're happy to see that you want to join our community! Before you can get started, you need to verify your account.<br /><br />
<!-- Button -->
<table cellspacing="0" cellpadding="0"><tr><td style="border-radius: 4px;" bgcolor="0000ff">
<a href="{activation_url}" target="_blank" style="padding: 12px 16px; border-radius: 4px; color: #ffffff; text-decoration: none; display: inline-block;">
Activate account</a></td></tr></table></td></tr>

<!-- Footer -->
<tr height="80" style="font-size: 12px;"><td></td><td>
<center>
You can also activate your account <a href="{manual_activation_url}" style="color: #0000ff; text-decoration: underline;">here</a> with this code: <i>{activation_code}</i>
</center>
</td><td></td></tr></table></body></html>



<!----------------------------------------------------------------------
Flagged post
----------------------------------------------------------------------->
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /></head><body>

<!-- Change text-color, background-color, font-size -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: #000000; background-color: #f8f8f8; font-size: 16px;">

<!-- Change space above logo -->
<tr height="40"></tr><tr><td></td>

<!-- Width of email - default: 560px -->
<td style="width: 560px;">

<!-- Logo -->
<center>
<img width="145"src="logo-image-url" />
</center></td>

<!-- Change space below logo -->
<tr height="20"></tr>

<!-- Start of content -->
<tr><td></td><td style="background: #ffffff; padding: 26px 40px;">
{reporter_username} reported a post<br /><br />
Reason for report:<br>
{flagged_reason}<br /><br />
<!-- Button -->
<table cellspacing="0" cellpadding="0"><tr><td style="border-radius: 4px;" bgcolor="0000ff">
<a href="{flagged_post_control_url}" target="_blank" style="padding: 12px 16px; border-radius: 4px; color: #ffffff; text-decoration: none; display: inline-block;">
View post</a></td></tr></table></td></tr>

<!-- Footer -->
<tr height="80" style="font-size: 12px;"><td></td><td>
<center>
You are receiving this email because your email was configured in "Moderation Notifications"
</center>
</td><td></td></tr></table></body></html>



<!----------------------------------------------------------------------
New topic
----------------------------------------------------------------------->
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /></head><body>

<!-- Change text-color, background-color, font-size -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: #000000; background-color: #f8f8f8; font-size: 16px;">

<!-- Change space above logo -->
<tr height="40"></tr><tr><td></td>

<!-- Width of email - default: 560px -->
<td style="width: 560px;">

<!-- Logo -->
<center>
<img width="145"src="logo-image-url" />
</center></td>

<!-- Change space below logo -->
<tr height="20"></tr>

<!-- Start of content -->
<tr><td></td><td style="background: #ffffff; padding: 26px 40px;">
Dear {recipient_username},<br /><br />
{author_username} posted a new topic "{topic_title}" in the category "{category_title}".<br /><br />
Preview:<br />
{topic_content}<br /><br />
<!-- Button -->
<table cellspacing="0" cellpadding="0"><tr><td style="border-radius: 4px;" bgcolor="0000ff">
<a href="{topic_url}" target="_blank" style="padding: 12px 16px; border-radius: 4px; color: #ffffff; text-decoration: none; display: inline-block;">
View topic</a></td></tr></table></td></tr>

<!-- Footer -->
<tr height="80" style="font-size: 12px;"><td></td><td>
<center>
You are receiving this email because you subscribed to this category: "{category_title}"
<a href="{unsubscribe_url}" target="_blank" style="color:#23496d; text-decoration: underline; display: inline-block;">
Unsubscribe from new topic notification emails</a>
</center>
</td><td></td></tr></table></body></html>



<!----------------------------------------------------------------------
New reply
----------------------------------------------------------------------->
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /></head><body>

<!-- Change text-color, background-color, font-size -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: #000000; background-color: #f8f8f8; font-size: 16px;">

<!-- Change space above logo -->
<tr height="40"></tr><tr><td></td>

<!-- Width of email - default: 560px -->
<td style="width: 560px;">

<!-- Logo -->
<center>
<img width="145"src="logo-image-url" />
</center></td>

<!-- Change space below logo -->
<tr height="20"></tr>

<!-- Start of content -->
<tr><td></td><td style="background: #ffffff; padding: 26px 40px;">
Dear {recipient_username},<br /><br />
{author_username} has responded in "{topic_title}".<br /><br />
Preview:<br />
{reply_content}<br /><br />
<!-- Button -->
<table cellspacing="0" cellpadding="0"><tr><td style="border-radius: 4px;" bgcolor="0000ff">
<a href="{reply_url}" target="_blank" style="padding: 12px 16px; border-radius: 4px; color: #ffffff; text-decoration: none; display: inline-block;">
View reply</a></td></tr></table></td></tr>

<!-- Footer -->
<tr height="80" style="font-size: 12px;"><td></td><td>
<center>
You won't receive new notifications for this topic unless you view this reply first
<a href="{unsubscribe_url}" target="_blank" style="color:#23496d; text-decoration: underline; display: inline-block;">
Unsubscribe from new reply notification emails</a>
</center>
</td><td></td></tr></table></body></html>



<!----------------------------------------------------------------------
Private message
----------------------------------------------------------------------->
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /></head><body>

<!-- Change text-color, background-color, font-size -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: #000000; background-color: #f8f8f8; font-size: 16px;">

<!-- Change space above logo -->
<tr height="40"></tr><tr><td></td>

<!-- Width of email - default: 560px -->
<td style="width: 560px;">

<!-- Logo -->
<center>
<img width="145"src="logo-image-url" />
</center></td>

<!-- Change space below logo -->
<tr height="20"></tr>

<!-- Start of content -->
<tr><td></td><td style="background: #ffffff; padding: 26px 40px;">
Dear {recipient_username},<br /><br />
{sender_username} sent you a private message.<br /><br />

<!-- Button -->
<table cellspacing="0" cellpadding="0"><tr><td style="border-radius: 4px;" bgcolor="0000ff">
<a href="{pm_url}" target="_blank" style="padding: 12px 16px; border-radius: 4px; color: #ffffff; text-decoration: none; display: inline-block;">
View message</a></td></tr></table></td></tr>

<!-- Footer -->
<tr height="80" style="font-size: 12px;"><td></td><td>
<center>
<a href="{unsubscribe_url}" target="_blank" style="color:#23496d; text-decoration: underline; display: inline-block;">
Unsubscribe from private message notification emails</a>
</center>
</td><td></td></tr></table></body></html>


<!----------------------------------------------------------------------
Reset password
----------------------------------------------------------------------->
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /></head><body>

<!-- Change text-color, background-color, font-size -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: #000000; background-color: #f8f8f8; font-size: 16px;">

<!-- Change space above logo -->
<tr height="40"></tr><tr><td></td>

<!-- Width of email - default: 560px -->
<td style="width: 560px;">

<!-- Logo -->
<center>
<img width="145"src="logo-image-url" />
</center></td>

<!-- Change space below logo -->
<tr height="20"></tr>

<!-- Start of content -->
<tr><td></td><td style="background: #ffffff; padding: 26px 40px;">
Dear {recipient_username},<br /><br />
Looks like you forgot your password. No worries, we're here to help you.<br /><br />

<!-- Button -->
<table cellspacing="0" cellpadding="0"><tr><td style="border-radius: 4px;" bgcolor="0000ff">
<a href="{password_reset_url}" target="_blank" style="padding: 12px 16px; border-radius: 4px; color: #ffffff; text-decoration: none; display: inline-block;">
Reset password</a></td></tr></table></td></tr>

<!-- Footer -->
<tr height="80" style="font-size: 12px;"><td></td><td>
<center>
The community team
</center>
</td><td></td></tr></table></body></html>


<!----------------------------------------------------------------------
Topic answered
----------------------------------------------------------------------->
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /></head><body>

<!-- Change text-color, background-color, font-size -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: #000000; background-color: #f8f8f8; font-size: 16px;">

<!-- Change space above logo -->
<tr height="40"></tr><tr><td></td>

<!-- Width of email - default: 560px -->
<td style="width: 560px;">

<!-- Logo -->
<center>
<img width="145"src="logo-image-url" />
</center></td>

<!-- Change space below logo -->
<tr height="20"></tr>

<!-- Start of content -->
<tr><td></td><td style="background: #ffffff; padding: 26px 40px;">
Dear {recipient_username},<br /><br />
A comment in "{question_title}" has been marked as the best answer.<br /><br />
Preview:<br />
{answer_content}<br /><br />
<!-- Button -->
<table cellspacing="0" cellpadding="0"><tr><td style="border-radius: 4px;" bgcolor="0000ff">
<a href="{answer_url}" target="_blank" style="padding: 12px 16px; border-radius: 4px; color: #ffffff; text-decoration: none; display: inline-block;">
View answer</a></td></tr></table></td></tr>

<!-- Footer -->
<tr height="80" style="font-size: 12px;"><td></td><td>
<center>
You are receiving this email because you subscribed to this topic
<a href="{unsubscribe_url}" target="_blank" style="color:#23496d; text-decoration: underline; display: inline-block;">
Unsubscribe from answer marked notification emails</a>
</center>
</td><td></td></tr></table></body></html>


<!----------------------------------------------------------------------
Welcome to the community
----------------------------------------------------------------------->
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /></head><body>

<!-- Change text-color, background-color, font-size -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: #000000; background-color: #f8f8f8; font-size: 16px;">

<!-- Change space above logo -->
<tr height="40"></tr><tr><td></td>

<!-- Width of email - default: 560px -->
<td style="width: 560px;">

<!-- Logo -->
<center>
<img width="145"src="logo-image-url" />
</center></td>

<!-- Change space below logo -->
<tr height="20"></tr>

<!-- Start of content -->
<tr><td></td><td style="background: #ffffff; padding: 26px 40px;">
Dear {recipient_username},<br /><br />
Your account has been succesfully activated. We hope to see you soon on the community.<br /><br />

<!-- Button -->
<table cellspacing="0" cellpadding="0"><tr><td style="border-radius: 4px;" bgcolor="0000ff">
<a href="#" target="_blank" style="padding: 12px 16px; border-radius: 4px; color: #ffffff; text-decoration: none; display: inline-block;">
Go to community</a></td></tr></table></td></tr>

<!-- Footer -->
<tr height="60" style="font-size: 12px;"><td></td><td>
<center>
The community team
</center>
</td><td></td></tr></table></body></html>

<!----------------------------------------------------------------------
Welcome to the group
----------------------------------------------------------------------->
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /></head><body>

<!-- Change text-color, background-color, font-size -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: #000000; background-color: #f8f8f8; font-size: 16px;">

<!-- Change space above logo -->
<tr height="40"></tr><tr><td></td>

<!-- Width of email - default: 560px -->
<td style="width: 560px;">

<!-- Logo -->
<center>
<img width="145"src="logo-image-url" />
</center></td>

<!-- Change space below logo -->
<tr height="20"></tr>

<!-- Start of content -->
<tr><td></td><td style="background: #ffffff; padding: 26px 40px;">
Dear {username},<br /><br />
Your request to join "{group_name}" has been approved. You can now view the group details and engage with other group members.<br /><br />

<!-- Button -->
<table cellspacing="0" cellpadding="0"><tr><td style="border-radius: 4px;" bgcolor="0000ff">
<a href="{group_url}" target="_blank" style="padding: 12px 16px; border-radius: 4px; color: #ffffff; text-decoration: none; display: inline-block;">
Visit group</a></td></tr></table></td></tr>

<!-- Footer -->
<tr height="60" style="font-size: 12px;"><td></td><td>
<center>
The community team
</center>
</td><td></td></tr></table></body></html>


<!----------------------------------------------------------------------
Join the community
----------------------------------------------------------------------->
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /></head><body>

<!-- Change text-color, background-color, font-size -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: #000000; background-color: #f8f8f8; font-size: 16px;">

<!-- Change space above logo -->
<tr height="40"></tr><tr><td></td>

<!-- Width of email - default: 560px -->
<td style="width: 560px;">

<!-- Logo -->
<center>
<img width="145"src="logo-image-url" />
</center></td>

<!-- Change space below logo -->
<tr height="20"></tr>

<!-- Start of content -->
<tr><td></td><td style="background: #ffffff; padding: 26px 40px;">
Dear {contact_name},<br /><br />
{inviter_username} has invited you to join the community.<br /><br />
{custom_message}<br /><br />
<!-- Button -->
<table cellspacing="0" cellpadding="0"><tr><td style="border-radius: 4px;" bgcolor="0000ff">
<a href="{invite_url}" target="_blank" style="padding: 12px 16px; border-radius: 4px; color: #ffffff; text-decoration: none; display: inline-block;">
Accept invite</a></td></tr></table></td></tr>

<!-- Footer -->
<tr height="80" style="font-size: 12px;"><td></td><td>
<center>
The community team
</center>
</td><td></td></tr></table></body></html>


<!----------------------------------------------------------------------
Join a group
----------------------------------------------------------------------->
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /></head><body>

<!-- Change text-color, background-color, font-size -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: #000000; background-color: #f8f8f8; font-size: 16px;">

<!-- Change space above logo -->
<tr height="40"></tr><tr><td></td>

<!-- Width of email - default: 560px -->
<td style="width: 560px;">

<!-- Logo -->
<center>
<img width="145"src="logo-image-url" />
</center></td>

<!-- Change space below logo -->
<tr height="20"></tr>

<!-- Start of content -->
<tr><td></td><td style="background: #ffffff; padding: 26px 40px;">
Dear {contact_name},<br /><br />
{inviter_username} has invited you to join the group "{group_name}" on the community.<br /><br />
{group_name}<br />
{group_description}<br /><br />
{custom_message}<br /><br />
<!-- Button -->
<table cellspacing="0" cellpadding="0"><tr><td style="border-radius: 4px;" bgcolor="0000ff">
<a href="{invite_url}" target="_blank" style="padding: 12px 16px; border-radius: 4px; color: #ffffff; text-decoration: none; display: inline-block;">
Accept invite</a></td></tr></table></td></tr>

<!-- Footer -->
<tr height="80" style="font-size: 12px;"><td></td><td>
<center>
The community team
</center>
</td><td></td></tr></table></body></html>



<!----------------------------------------------------------------------
Is your problem solved?
----------------------------------------------------------------------->
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /></head><body>

<!-- Change text-color, background-color, font-size -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: #000000; background-color: #f8f8f8; font-size: 16px;">

<!-- Change space above logo -->
<tr height="40"></tr><tr><td></td>

<!-- Width of email - default: 560px -->
<td style="width: 560px;">

<!-- Logo -->
<center>
<img width="145"src="logo-image-url" />
</center></td>

<!-- Change space below logo -->
<tr height="20"></tr>

<!-- Start of content -->
<tr><td></td><td style="background: #ffffff; padding: 26px 40px;">
Dear {recipient_username},<br /><br />
Your question "{question_title}" received at least one reply. If one of the replies was helpful, don’t forget to visit the community and mark it as the best Answer. <br /><br />
Marking a reply as the best answer helps others to find answers more quickly.<br /><br />
<!-- Button -->
<table cellspacing="0" cellpadding="0"><tr><td style="border-radius: 4px;" bgcolor="0000ff">
<a href="{question_url}" target="_blank" style="padding: 12px 16px; border-radius: 4px; color: #ffffff; text-decoration: none; display: inline-block;">
Select best answer</a></td></tr></table></td></tr>

<!-- Footer -->
<tr height="80" style="font-size: 12px;"><td></td><td>
<center>
<a href="{unsubscribe_url}" target="_blank" style="color:#23496d; text-decoration: underline; display: inline-block;">
Unsubscribe from 'Mark a best answer' notification emails </a>
</center>
</td><td></td></tr></table></body></html>


<!----------------------------------------------------------------------
New product update
----------------------------------------------------------------------->
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /></head><body>

<!-- Change text-color, background-color, font-size -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="color: #000000; background-color: #f8f8f8; font-size: 16px;">

<!-- Change space above logo -->
<tr height="40"></tr><tr><td></td>

<!-- Width of email - default: 560px -->
<td style="width: 560px;">

<!-- Logo -->
<center>
<img width="145"src="logo-image-url" />
</center></td>

<!-- Change space below logo -->
<tr height="20"></tr>

<!-- Start of content -->
<tr><td></td><td style="background: #ffffff; padding: 26px 40px;">
Dear {recipient_username},<br /><br />
{author_username} posted a new product update "{topic_title}".<br /><br />
Preview:<br />
{topic_content}<br /><br />
<!-- Button -->
<table cellspacing="0" cellpadding="0"><tr><td style="border-radius: 4px;" bgcolor="0000ff">
<a href="{topic_url}" target="_blank" style="padding: 12px 16px; border-radius: 4px; color: #ffffff; text-decoration: none; display: inline-block;">
View update</a></td></tr></table></td></tr>

<!-- Footer -->
<tr height="80" style="font-size: 12px;"><td></td><td>
<center>
You are receiving this email because you subscribed to product updates
<a href="{unsubscribe_url}" target="_blank" style="color:#23496d; text-decoration: underline; display: inline-block;">
Unsubscribe from product update notification emails</a>
</center>
</td><td></td></tr></table></body></html>

 

 


6 replies

Userlevel 5
Badge +3

Great resource, thanks for putting it together @xiaoyu-shen very useful :thumbsup:

Hi @xiaoyu-shen Is there a way to change the font family to a different font? 

Userlevel 5
Badge +1

Hi @Rhea, what kind of font family would you like to use? 

When I change the logo, the email width becomes a worthless value and the entire email widthshrinks. What am I doing wrong?

 

Edited to show that I understand this is 100% user error.

Userlevel 5
Badge +1

Hey @joe.huber would you mind sharing your codes  so we can check for you? 

Hey @joe.huber would you mind sharing your codes  so we can check for you? 

I just talked with Adrienne and she let me know that it’s an issue with the file type! Looks like it’s a .svg when it needs to be .png.

Reply