The Custom HTML block lets you add your own code to emails in Omnisend's Email Builder. Use it to embed third-party widgets, apply custom styling, or insert advanced content elements.
Two ways to use custom HTML in Omnisend:
HTML block (drag-and-drop in Email Builder): Add code snippets within an email. Use for widgets, tables, or custom CSS.
Import HTML template (Store Settings → Saved Templates): Upload a complete email design coded externally. Learn more: Import HTML Template
This article covers the HTML block workflow for Email Campaigns and Automation Workflows.
Before You Begin
You'll need working knowledge of HTML and inline CSS. The HTML block requires manual writing or editing of the code.
The HTML block only supports body content. Remove
<!DOCTYPE>,<head>, and<body>tags before pasting code.Not all HTML tags are supported. Elements like
<iframe>,<script>,<div>, and<font>won't work. See the full list of supported tags below.The HTML input supports body markup only. Add CSS rules and media queries to the Styles input instead.
Always test your email by sending to yourself before launching. Rendering varies across Gmail, Outlook, Apple Mail, and other clients.
Before adding HTML, check:
Remove
<!DOCTYPE>,<head>, and<body>tags – the HTML block only supports body content.Paste from a plain text editor or use 'Clear Formatting' if copying from Canva, Word, or visual editors.
Keep empty
<p></p>tags even if unused – they're required for validation.Ensure image URLs start with
https://and are publicly accessible.
Add a Custom HTML Block
In Email Builder, open Add Elements.
Drag the HTML block into your email.
Click the block to open the editor in the right-side panel.
Add your email markup to the HTML input.
Add CSS rules and media queries to the Styles input.
Click Save.
The HTML input is for the content that appears in the email, such as text, links, images, and tables. The Styles input is for CSS rules. Styles entered there are inserted into the email’s <head>.
Important: CSS pasted into the HTML input may be stripped or ignored because it can be placed in the email body. If your CSS does not work, move it to Styles.
💬 Learn more about the Basics of Email HTML.
Allowed HTML Tags and Supported CSS Elements
To ensure your emails are compatible with major email clients, the HTML block supports only a limited set of HTML tags, attributes, and CSS styles.
⚠️ Note: The HTML block supports only the <body> part of the email. The <head> section should be left out.
Supported HTML Tags
<a>, <p>, <br>, <span>, <hr>, <ul>, <li>, <ol>, <u>, <strong>, <em>, <s>, <sub>, <sup>, <pre>, <h1>, <h2>, <h3>, <img>, <table>, <tr>, <td>
View full list with attributes:
HTML tag | Supported | Notes/limitations |
| ✅ Yes | Links are supported across all major email clients |
| ✅ Yes | Renders as bold text |
| ✅ Yes | Same rendering as |
| ✅ Yes | Renders as italic text |
| ✅ Yes | Same rendering as |
| ✅ Yes | Underline support varies slightly by client |
| ✅ Yes | Strikethrough support may vary visually |
| ✅ Yes | Same behavior as |
| ✅ Yes | Inline styles only |
| ✅ Yes | Paragraph spacing may differ by client |
| ✅ Yes | Line breaks are supported |
| ✅ Yes | Indentation and spacing vary by client |
| ✅ Yes | Font size and spacing may differ by email client |
| ✅ Yes | Images must use absolute URLs |
| ✅ Yes | Recommended for layout |
| ✅ Yes | Structure supported; styling may vary |
| ✅ Yes | Widely supported |
| ✅ Yes | Use with caution for layout |
| ✅ Yes | Styling is limited in some clients |
Note: While these HTML tags are supported in Omnisend emails, rendering may vary between email clients (such as Gmail, Outlook, Apple Mail, and mobile apps).
Supported Link and Style Elements
Support for the <link> HTML element
Usage | Supported | Notes |
| ❌ No | External stylesheets are ignored or stripped by most email clients |
| ❌ No | Not supported in email HTML |
Important: Email clients do not support external CSS files. Any styles added using <link> tags will be ignored.
Best practice: Always use inline CSS or, in limited cases, a <style> block.
<style> element in emails
Usage | Supported | Notes |
| ⚠️ Partial | Supported in many clients, but not all |
| ⚠️ Partial | Can be stripped or ignored by some clients |
Important limitations:
Outlook (Windows) has limited CSS support even when
<style>is allowedSome email clients move or rewrite
<style>blocksCSS inside
<style>blocks may be ignored in parts
Best practice:
For the most reliable rendering:
Use inline CSS whenever possible
Use
<style>blocks only for simple, non-critical rulesAvoid relying on
<style>blocks for layout or responsive behavior
Supported CSS Properties
You can use inline CSS through style= attributes for element-specific styling. Add CSS rules and media queries to the Styles input.
Supported CSS categories:
Background properties
Box and border properties
Text properties
Table properties
Media queries
Supported CSS background properties
CSS property | Supported | Notes/limitations |
| ✅ Yes | Fully supported across email clients |
| ⚠️ Partial | Not supported in Outlook (Windows). Use fallback background colors |
| ⚠️ Partial | Ignored by some Outlook versions |
| ⚠️ Partial | Inconsistent behavior in Outlook |
| ⚠️ Partial | Not supported in Outlook (Windows) |
💡 Tip: Always set a background-color fallback when using background images.
CSS box & border properties
CSS property | Supported | Notes/limitations |
| ✅ Yes | Fully supported |
| ⚠️ Partial | Not supported in Outlook (Windows) |
| ❌ No | Not reliably supported |
| ❌ No | Ignored in many clients, especially Outlook |
| ✅ Yes | Fully supported |
| ⚠️ Partial | Can behave inconsistently in Outlook |
| ⚠️ Partial | Not supported in Outlook (Windows) |
| ⚠️ Partial | Not supported in Outlook (Windows) |
💡 Tip: Use table-based layouts with fixed widths for the most consistent results.
CSS media queries
CSS feature | Supported | Notes/limitations |
| ⚠️ Partial | Not supported in Outlook (Windows) or Outlook.com |
| ⚠️ Partial | Ignored by Outlook (Windows) |
| ⚠️ Partial | Ignored by Outlook (Windows) |
| ⚠️ Partial | Not supported in Outlook |
Where to add media queries: Add @media rules to the Styles input without <style> tags. Media queries only affect markup included in the version rendered for that device. If you use Visibility on devices to create separate desktop and mobile HTML versions, a media query cannot affect elements that are not included in the active version.
Important: Responsive design works best in Apple Mail, Gmail mobile apps, and Yahoo Mail, but not in Outlook (Windows).
CSS text properties
CSS property | Supported | Notes/limitations |
| ✅ Yes | Use web-safe fonts only |
| ⚠️ Partial | Outlook may override values |
| ⚠️ Partial | Some weights may not render as expected |
| ✅ Yes | Fully supported |
| ⚠️ Partial | Limited support |
| ⚠️ Partial | Can be ignored in some clients |
| ✅ Yes | Widely supported |
| ✅ Yes | Fully supported |
| ⚠️ Partial | Inconsistent support |
| ❌ No | Not reliably supported across clients |
💡 Tip: Stick to system fonts like Arial, Helvetica, Georgia, or Times New Roman.
CSS table properties
CSS property | Supported | Notes/limitations |
| ⚠️ Partial | Outlook has inconsistent behavior |
| ⚠️ Partial | Not supported in Outlook (Windows) |
| ⚠️ Partial | Limited support |
💡 Best practice: Use HTML table attributes (cellpadding, cellspacing) instead of CSS where possible.
Additional Notes
Omnisend Support cannot assist with custom code issues. If your custom element doesn't display as expected, reach out to the provider of the code snippet or consult a developer.
Always test before sending. Email rendering varies across clients (Gmail, Outlook, Apple Mail, etc.).
Troubleshooting
My HTML block disappears or won't save. What's wrong?
Your code contains unsupported tags or encoding issues.
To fix:
Copy your HTML and paste it into htmlcorrector.com, then paste the cleaned version back into Omnisend.
If you copied from Word, Canva, or another editor, select the text in Omnisend and click Clear Formatting before saving.
Check that you haven't removed required
<p></p>wrapper tags – they're needed for validation even if empty.
Unsupported tags that cause errors:
<iframe>, <script>, <div>, <font>, <video>, <audio>, <object>, <embed>
Preview shows blank even though code looks correct in the builder.
Blank previews usually mean image URLs are missing https://, or you've removed required wrapper tags.
To fix:
Verify all image URLs start with
https://and are publicly accessible.Check that
<p></p>tags are present (even if empty).Test with simple HTML first:
<p style="color:blue;">Test</p>. If it works, add your full code gradually to isolate the problem.
Can I edit the full HTML code of my entire email (not just the HTML block)?
No. Omnisend's Email Builder is visual-first and doesn't provide a raw HTML editor for the entire email.
You can only edit HTML within individual Custom HTML blocks.
To edit full email HTML:
Open your email in Email Builder.
Use browser Inspect → view
#document→ copy full HTML.Edit the HTML externally.
Re-import via Store Settings → Saved Templates → Import Template → Paste HTML Code.
I'm using CSS !important to control dark mode colors, but it's not working.
Email clients like Gmail, Outlook, and Apple Mail override CSS in dark mode regardless of !important declarations.
Recommendation:
Design your email to look good in both light and dark modes. Test using Preview → Dark Mode toggle before sending.
⚠️ Note: Dark mode behavior is controlled by the recipient's email client, not your code. Some clients invert colors automatically; others apply selective adjustments.
I get an error that says "Your HTML code needs adjustments." How do I find the specific problem?
Omnisend doesn't highlight the exact line causing the error.
To fix:
Use htmlcorrector.com to automatically fix common issues.
Manually check for unsupported tags like
<iframe>,<script>,<div>,<font>,<!DOCTYPE>, or<head>.Try pasting simple test HTML (e.g.,
<p>Test</p>) to confirm the block works, then add your full code in sections.
Use Cases
Custom Countdown Timers
Note: Omnisend has a native Countdown timer in the Email Builder. To add it, open an Email Campaign or Automation, drag and drop the Countdown timer from Add Elements to your email.
For the native Countdown timer, see Add and Set Up a Countdown Timer. The steps below explain how to add a custom countdown timer using an HTML block.
Use a custom countdown timer when you want to add a timer created with a third-party provider or custom HTML. This method requires you to generate or edit HTML code and paste it into an HTML block in the Email Builder.
Choose your setup:
Email Campaigns: Static countdown timer (fixed end date/time)
Automation Workflows: Dynamic countdown timer (calculates from send time)
Countdown Timers in Email Campaigns
Step 1: Drag and drop the HTML block into your email template.
Step 2: Create a countdown timer with your chosen third-party provider. Select the timer type and customize it according to the provider’s instructions.
Step 3: Paste the code into the HTML block in Omnisend and click Save. The example in the image below was created in Sendtric.
To center the timer:
Find
style="display: block;"Replace with
style="display: block; margin-left: auto; margin-right: auto; width: 50%"
To make the timer dynamic (count from send time):
Add [[ current_date | date: "%s" | plus: 86400 ]] to the image URL.
This function converts the current date/time to seconds and adds 86400 seconds (1 day) to the send time.
Example:
<img src="http://gen.sendtric.com/countdown/vtkfdyi20u?to=[[ current_date | date: '%s' | plus: 86400 ]]" style="display: block;" />
You can change 86400 to any number of seconds. For example:
86400 seconds = 1 day
172800 seconds = 2 days
604800 seconds = 7 days
Custom Countdown Timers in Automation Workflows
For Automation Workflows, you need a dynamic timer that calculates the expiration date each time the email is sent.
Follow the provider’s instructions to create the timer and copy the generated code. Then use it in Omnisend through the following steps:
Step 1. Create your automation in Omnisend → Open Email Builder and add a discount block for your sale. Set the expiration date for your discount, which will be the same as the expiration date for your timer.
Important: In Shopify, the discount code expires at 12:00 AM on the date you select in Omnisend. So you need to adjust the countdown timer to match that expiration date.
Step 2. Add an HTML code here with a countdown timer showing when the discount code expires. Copy the Year-Month-Day and Timezone Offset HTML from Nifty images and add it to the HTML Item in Omnisend.
Now you need to change the date format to the Omnisend date format. Find the date in your code. You will see there is a dash between each personalization tag, which you will replace with Omnisend dynamic date tags.
Remove the date part from the code and insert Omnisend personalization tags:[[current_date | date:'%Y']]-[[current_date | date:'%m']]-[[current_date | date:'%d']].
Once replaced, the date will show zeros, but when the email is sent out, an actual date will be shown here because we added personalization tags.
Step 3. Adjust the timezone. In personalization, you will see a time zone set to Greenwich time. You need to change it to the timezone of your account. As shown in the screenshot below, change "T00:00:00-07" to "T00:00:00+2," etc., based on your timezone.
Step 4. Your timer is set to today's date, but you also want it to count dynamically till the end of your sale (discount expiry is set to 2 days).
For example, if your discount code expires in 2 days, you need your timer to run dynamically for 72 (it doesn't count today, so you need to add 24h to 2 days).
For this, go to Niftyimages, copy this code, return to the HTML item in Omnisend, and place it right after the format tag. Please note that the number of hours should be adjusted based on your sales duration. If your discount expires in 10 days, you must put 264 (240h+24h).
Here's an example of code pasted in Omnisend:
That's it; you've set the timer to run till the end of your promotion. Please remember that you can only test automation by triggering it yourself.
⚠️ Testing: You can only test Automation Workflows by triggering them yourself (e.g., placing a test order).
Importing HTML from Canva
If you designed your email in Canva and want to import it as a full template, follow the steps below:
Export your Canva design as HTML.
Open the HTML file in a text editor (e.g., Notepad, TextEdit).
Delete the
<!DOCTYPE>declaration and the entire<head>section.Copy the remaining code and paste it into htmlcorrector.com to clean it.
In Omnisend, go to Store Settings → Saved Templates → Import Template → Paste HTML Code.
Paste the cleaned HTML and save.
💡 You can connect Canva to Omnisend and sync designs from a Canva folder to your Omnisend Image Library. Integrate Canva with Omnisend.
FAQ
Why did my CSS disappear after I saved it?
The Styles input accepts CSS rules without HTML tags. Remove the <style> and </style> wrapper before pasting your CSS. The editor may strip those tags and the CSS inside them when you save.
Why is my responsive CSS not working?
Make sure your CSS is in the Styles input, not the HTML input. If you use Visibility on devices, check that the classes targeted by your media query exist in the desktop or mobile version currently being displayed. Media query support also varies between email clients.
Any questions? Feel free to reach out to our support team. We're available via in-app chat and at [email protected].