If you are familiar with HTML, you can customize your email campaigns using the HTML code content block.

Contents

Use of HTML content block
Allowed HTML tags and supported CSS elements
Use case
Steps in case of inaccurate results

Use of HTML content block

Like any other Omnisend Email Editor content block, you can drag-and-drop HTML code to the place you prefer.

The difference from other content blocks is the content of the element itself - it allows you to add an HTML code of any custom solution you like (for example, countdown timers). As we are making an assumption here that you know what you are doing, please be sure to write executable HTML code and send a test campaign before sending it to your customers.

Some key principles of email HTML, as well as differences from web HTML, can be found in our article Basics of Email HTML.

Allowed HTML tags and supported CSS elements

To be sure that your emails sent through Omnisend look amazing and are compatible with major email clients, not all HTML tags and attributes are available with HTML content block. Below you will find a full list of tags and attributes and CSS elements that you can use to enrich your emails. 

CSS Background Properties

CSS Box and Border Properties

CSS Media Queries

CSS Text Properties

CSS Table Properties

HTML

Link Element

Style Element

HTML tags

Note! HTML block supports only the <body> part of the email and the <head> should be left out.

Use case

Countdown timers in the Email message

If you wish to have a timer in your campaign, you can add it by using HTML content block:

  1. Drag and drop HTML content block to the template

  2. Go to https://www.sendtric.com and create a countdown timer. Keep in mind that this service requires a subscription to a paid plan in order to enable a countdown timer

  3. Slick generate and copy the code

  4. Paste the code to HTML content block on Omnisend and click Save

To have it centered, use the following settings:

  • find style="display: block;"

  • replace with style="display: block; margin-left: auto; margin-right: auto; width: 50%"

To generate the timer from the time the email is sent, proceed with further steps.

Add [[ current_date | date: “%s” | plus: 86400 ]] This function takes the current date/time > converts to seconds -> additionally adds 86400 seconds (1day) to the current timing. The final sendtric example should look like this example:

<img src=“http://gen.sendtric.com/countdown/vtkfdyi20u?to=[[ current_date | date: “%s” | plus: 86400]]” style=“display: block;” />

You can change the number of seconds to any that you like, just to explain, 86400 seconds = 1 day.

Note! There is a number of alternatives that offer countdown timers. For example, you may try going with https://niftyimages.com/CountdownTimers. This one allows to generate the dynamic timer for free.

Steps in case of inaccurate results

If you feel confident about coding or have a developer, you can design custom HTML elements. However, we don’t recommend it because of limited email client support. Keep in mind that the Omnisend support team won’t be able to help you with custom code issues. If the custom element does not look as it should, consider contacting the particular code snippet provider.

Did this answer your question?