If you are familiar with HTML, you can customize your email campaigns using the HTML Item.

Contents

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

Use of HTML Item

Like any Omnisend Email Builder Item, you can drag and drop HTML code to the place you prefer.

The difference from other items is the element's content - it allows you to add an HTML code of any custom solution you like (for example, countdown timers). As we assume 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 fundamental 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 fantastic and are compatible with major email clients, not all HTML tags and attributes are available with an HTML item. Below you will find a complete 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 item 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 the HTML item:

  1. Drag and drop the HTML item to the template

  2. Go to https://www.sendtric.com and create a countdown timer. Remember that this service requires a subscription to a paid plan to turn on a countdown timer.

  3. Click generate and copy the code.

  4. Paste the code to the HTML 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 when 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 (1 day) to the current timing. The final centric 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; to explain, 86400 seconds = 1 day.

Note! Several alternatives offer countdown timers. For example, you may try going with https://niftyimages.com/CountdownTimers. This one allows generating 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?