Learn tips on how to set up HTML email notifications, including using CSS and adding images.
New to Email Notifications? Read the first article in this series for an introduction to the Email Notifications feature.
Accessing the features mentioned in this article
Where can I find this feature using the top menu?
Manage > Notifications > Email > Email Notification
What more do I need to use this feature?
-
Admin or restricted permissions to Manage Notifications.
Which Checkfront version supports this feature - classic items, classic products, or both?
- This feature is available in both our classic items version using classic items (Inventory > Items) and our classic products version using classic products (Inventory > Products). → Learn more about products
Sending HTML email tips
Back to topCreating notifications and emails that render the same across all email platforms can be tricky since all email clients have their own rules. That said, a finely tweaked HTML email can organize your notifications and receipts in ways not available through plain text.
Here are some tips!
Keeping it simple
You aren't building a web page. Overly complex HTML email can cause delivery and formatting issues. Use the minimum formatting to provide an attractive and functional layout.
Using a Table Structure
Many platforms don't support absolute positioning (float, margin, padding), so tables work much better as the framework for your design.
Using Inline CSS
Inline CSS is more reliable than using CSS in the header. Gmail, for instance, strips out the CSS in all emails. If you use inline CSS, your style won't get lost for those Gmail recipients.
Adding images to email notifications
Hosting images online
Images and documents must be hosted online, such as on your website. This can be accomplished using the full, absolute link to the location where your image or document is hosted, such as:
https://cdn-production.checkfront.com/wp-content/uploads/2022/06/About-header2-720x456.png
Google Drive and Dropbox do not work for hosting as they do not support hosting for third-party sites.
Avoiding image-only email
Avoid sending an email that contains images only. This is a BIG Spam flag, and your email will likely end up in the Junk folder.
Avoiding background images
Many email clients don't support this, so your recipient may not see the image.
Using ALT tags
Images with ALT tags improve SEO and display descriptive text if, for some reason, the image can't be displayed.
Please ensure your images are correctly sized with the dimensions specified before including them in your email.
If you don't specify the height and width dimensions, some email clients may set their size for your image, which could alter your email design.
Testing your email
Send tests to the most popular platforms and check out what it looks like for yourself.
Often, emails look fine in Gmail, Yahoo, Hotmail, etc., but then they look completely different in Outlook.
Frequently Asked Questions
Back to top-
How do I prevent email notifications getting caught in junk folders?
You may need to add an SPF record to your domain to authorize Checkfront to send on your behalf.
< Translating email notifications | Editing columns within the Notifications list >