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 attributes
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.

Keep in mind that HTML for web and email differs slightly. In email HTML, avoid using:

  • CSS within the <style> section of your HTML code;
  • background images;
  • JavaScript;
  • <iframe>;
  • Flash;
  • embedded audio and video;
  • forms;
  • <div> layering.

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 attributes

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 that you can use to enrich your emails. 

Tags

  • "a" 
  • "strong"
  • "b"
  • "i"
  • "em"
  • "del"
  • "s"
  • "strike"
  • "u"
  • "span"
  • "p"
  • "br"
  • "ul"
  • "ol"
  • "li"
  • "div"
  • "table"
  • "thead"
  • "tbody"
  • "tfoot"
  • "th"
  • "tr"
  • "td"
  • "img"
  • "style"
  • "span"
  • "hr"
  • "h1", "h2", "h3", "h4", "h5", "h6"

Tag Attributes

  • On "a" we allow "href" and "target" attributes
  • On "img" we allow "src" and "alt" attributes
  • On "table", "thead", "tbody", "tfoot" we allow "background", "colspan", "rowspan", "cellspacing", "cellpadding", and "border" attributes
  • On "tr", "th", and "td" we allow "valign" attribute
  • "style", "title", "class", "id", "bgcolor", "align", "width", and "height" attributes are allowed globally for all allowed tags.

If you decide to use either tags or attributes that are not listed above, they will be stripped from your email during the sending process. Please test your campaigns out prior sending them to your subscribers.
 
 

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?