Content Properties - HTML – Vega

The custom HTML content allows you to easily add your own HTML code to your document.

It can be positioned alone, with other HTML content items, or mixed with other types of content.

The newly inserted content block will show some default 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.

HTML experts only: Using your own code may affect how the message is rendered in email clients, preventing it from adjusting to the screen size (i.e. the "responsiveness" of the document). Make sure to use HTML that is email compliant and responsive.

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 and can therefore have 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 editor (HTML 5 video, anchor links, etc.).

Adding advanced effects with CSS

Get creative with animations! Animation effects are not widely supported by email clients but managed correctly, they can help your message get viral.

Adding live content from external providers

Product recommendations, dynamic ads, personalized maps, countdowns… all of this advanced content can now be easily included in a message created with the Template Manager. Just copy and paste the code provided to you by the vendor that you are working with.

Which HTML tags are allowed?

The HTML content will automatically correct some issues like HTML tags that are left open, and strip out code that cannot be used, such as script tags or iframe tags (these code tags are not allowed by the majority of email clients, they can cause deliverability problems or security risks for the editor and the applications that run it).

Allowed tags list:

a, abbr, acronym, address, 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

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

How to add Anchor Links in Emails using HTML content

An anchor link is a hyperlink in an email. When that hyperlink is clicked, it takes you to another part of the email instead of opening a separate window. Anchor links are most helpful for long messages, which is why they’re generally used in email newsletters instead of other emails.

You might choose to include just a single anchor link, or add a full anchor menu in your email header. This menu acts like a table of contents so readers can see at a glance what’s included in the message.

Step 1: Build the template

Drag in a three-column structure to arrange the top anchors. Continue to add text and images to recreate the header, intro and first story. After formatting the text, get ready to add the links.

Step 2: Choose an anchor link name and its position

Drag and drop the HTML content to name and position the anchor in the correct section of the template. This will be the section to where you want the link to “jump” down to.

To create the anchor, paste in one line of HTML code in the Content Properties field of the custom HTML block on the right:

The name in quotes (“blog”) can be whatever you want. Just keep it simple and easy to remember — ideally one word — as this is the keyword you’ll use when linking to this anchor tag.

Step 3: Link the anchor

Now that the anchor’s position has been specified, the text in the header needs to be linked to it. Simply select “BLOG” and choose the Insert Link selection in the toolbar.

In the menu, link to the anchor by entering #blog in the URL field.

For the link to work, it’s important to include the hashtag (#) before the name and to make sure the name matches the one you chose earlier. The shorter and simpler the name, the easier it’ll be to remember.

Step 4: Get Browser Link to test the anchor links

When the page opens on your browser click on the anchor links and watch the magic happen. You can add multiple anchor links by following the same steps.

Articles in this section

Content Properties - HTML

Why use custom code?

Which HTML tags are allowed?

How to add Anchor Links in Emails using HTML content

Step 1: Build the template

Step 2: Choose an anchor link name and its position

Step 3: Link the anchor

Comments

Articles in this section

Why use custom code?

Which HTML tags are allowed?

How to add Anchor Links in Emails using HTML content

Step 1: Build the template

Step 2: Choose an anchor link name and its position

Step 3: Link the anchor

Related articles