Working with custom HTML

Overview

The Custom HTML content block allows you to easily add your own HTML code to a design created in the Xmailer builder. It’s as simple to use as a text block.

HTML experts only: Using your own code may affect how the design is rendered. This could prevent it from adjusting to the screen size (i.e. the "responsiveness" of the design). Make sure to use HTML that is email-compliant and responsive. Keep in mind that custom HTML is often outside of our scope of support.

Why use custom code?

There are many scenarios in which it makes sense to add your own HTML code:

Adding more customized content

You are not limited by a set of predefined parameters. This allows you more granular control of the styles applied.

Adding HTML 5 video, anchor links, etc.

You can now add content that is not available as a standard content element in the builder (HTML 5 video, anchor links, etc.).

Adding advanced effects with CSS

Get creative with animations! Please note that animation effects are not widely supported by email clients. However, when managed correctly, they can help your design go viral. Note that CSS can only be used in the HTML content block when designing Pages.

Adding live content from external providers

Custom HTML allows you to use advanced content in your designs. For example, you could create product recommendations, dynamic ads, personalized maps, or countdowns. Just copy and paste the code provided to you by the vendor that you are working with.

How do I add my HTML code?

To add your code just drag an HTML content element into your design. It works much like other content blocks, so you can place it anywhere in your design:

The newly inserted content block will show some placeholder text. Click on it and the right-side property panel will display the HTML code editing pane. You will find some placeholder code inside the editing area:

Paste your own HTML code or write it directly in the editing area. The system will highlight your syntax and indent your code to make it more readable.

Which HTML tags are allowed?

Note that this section applies only to custom HTML when used in the email builder. For information about using custom HTML in Pages, see the section below.When using custom HTML in the email builder, a code sanitizer will validate your code. It will automatically correct some issues such as HTML tags that are left open. It will also strip out code that isn't often supported by email clients. For example, script and iframe tags are removed since they often cause deliverability problems or security risks.

Allowed tags list:

a, abbr, acronym, address, area, b, bdo, big, blockquote, button, caption, center, cite, code, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, map, menu, ol, optgroup, option, p, pre, q, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, u, tr, tt, u, ul, var

Allowed attributes list:

general attributes: style, id, class, data-*, title
a: href, name, target
img: align, alt, border height, hspace, src, vspace, width, usemap
table: align, bgcolor, border, cellpadding, cellspacing, width
tbody: align, valign
td: align, bgcolor, colspan, height, rowspan, valign, width
tr: align, bgcolor, valign
tfoot: align, valign
th: align, bicolor, colspan, height, rowspan, valign, width
thead: align, valign
li: type
map: name
area: alt, coords, href, shape, target

Using Custom HTML with Pages

The Page builder does not use the same sanitizer you'll find in our email builder. This means that it will not strip out syntax or fix any issues in your code. This is because browsers aren't likely to have limitations seen in email clients. If you want to use custom HTML on your landing page, you have complete freedom to do so.

Last updated