The HTML block lets you add your own HTML code to a post or flow email. Use it for a design from a developer, a section copied from another email platform, or layouts the other blocks can't make. Knips adds your code to the email as you wrote it and tracks clicks on its links.

Add an HTML block

Open the post or flow email in the editor. HTML blocks can only be added and edited in Knips on a computer.
Click + and choose HTML under Elements.
The code editor opens with an example paragraph: <p>Replace this with your own HTML.</p>. Replace it with your HTML.
Click Insert.

To change the code later, hover over the block and click Edit HTML. In the mobile app, HTML blocks show as a preview and can't be edited.

You can place an HTML block on its own, or inside a Section, Columns or a component.

The code editor

A note at the top of the editor explains that custom HTML can look different across email providers. Learn more → opens this article.
The personalization button inserts a personalization field where your cursor is.
Format tidies the indentation of your code.
The size of your code is shown next to Format. A block can be up to 200 kB.

Paste only the part of your email that goes inside the <body> tag. Knips builds the rest of the email around your block, so code that includes <html>, <head> or <body> tags is refused. If your design has a <style> tag in its head, move those styles onto the elements themselves as inline style attributes.

Sending a complete HTML email of your own, including its head and body, isn't supported yet. It's on our roadmap.

If you close the editor after changing the code, Knips asks whether you want to discard your changes.

Personalization in HTML

Click the personalization button in the code editor to insert a field, such as the contact's first name. You can set a default text that is shown when a contact has no value. You can use contact fields, including your own custom fields, links such as the unsubscribe link and the web version of the email, and the current date.

Fields are written between double curly braces, with the default after default:. This example greets the contact by first name, or with "there" when the name is missing:

Hi {{ contact.first_name | default: 'there' }}

Personalization fields can't be used for styling: not in a style attribute and not inside a <style> tag. Knips refuses code that has them there. Use fields in your text, in links and in other attributes, such as alt or title.

Links and click tracking

Knips tracks clicks on the links in your HTML block, the same way as in other blocks. This covers normal links, buttons (including buttons built for Outlook), linked image areas, and email, phone and SMS links. You don't need to change anything in your code.

Links must be full addresses, such as https://yourproject.com/apartments. Knips refuses links that only work on a web page:

Links without an address in front, such as /apartments or apartments.html.
Links starting with // or with www. instead of https://.
Links to files on your computer, starting with file:.

A link can also start with a personalization field. Links to a place in the same email, such as #top, are allowed but their clicks aren't tracked.

Code that Knips removes

Some code doesn't work in email or isn't safe to send. When you click Insert, Knips removes it and shows a message listing what was removed:

Scripts.
Event handlers, such as onclick.
Iframes.
Forms.
Embedded objects, such as <object> and <embed>.
Unsupported links, such as links starting with javascript:.
Unsupported tags: <base> and <meta http-equiv="refresh">.

Everything else stays exactly as you wrote it, including <style> tags, comments and Outlook conditional comments.

When Knips can't insert your code

Some problems need you to fix the code yourself. Knips then shows a message above the code and keeps the editor open, so nothing is lost.

Remove the <html>, <head> and <body> tags. Your code is a whole email document. Remove the doctype and the <html>, <head> and <body> tags, and keep only the code that was between <body> and </body>.
These links only work on a web page, not in an email. Change the links listed in the message to full addresses starting with https://.
Email clients disagree on these links, so clicks on them couldn't be tracked. The code around the listed links is broken, often a missing quote or closing bracket, so different email clients could read the link differently. Fix the code around them.
An element isn't closed. A tag such as <style>, <title> or <textarea> is missing its closing tag. Add it.
The CSS in a <style> couldn't be read. Fix the CSS at the line the message names. A personalization field inside the <style> tag is one cause: remove it.
Personalization tokens can't be used in a style attribute. Remove the personalization field from the style attribute and keep the styling without it.
A <style> inside an <svg> can't be used in an email. Move the styles out of the <svg>, into a <style> tag outside it or into the svg's own attributes.
Email clients disagree on which <style> tags this code holds, because of its conditional comments. A tag opened inside an Outlook conditional comment and closed outside it, such as a <textarea>, changes where Outlook finds your <style> tags. Fix the code around them so they read the same with and without the conditional comments.
HTML blocks can't hold <template> tags. Remove the <template> tags.
The HTML is too large to save. The limit is 200 kB. Images embedded in the code take up a lot of space, so link to hosted images instead.
This code nests elements too deeply or This code has too many elements. Simplify the structure of your code.
There's nothing to insert once scripts and other unsupported code are removed. Your code only held code that Knips removes, such as scripts or iframes. Add the content you want to show.

How the block looks in your email

If you use a <style> tag, its rules only apply to the HTML block it's in, so they can't change the rest of your email or your other HTML blocks. Rules for body or html have no effect. Many email clients ignore <style> tags, so prefer inline styles.
Unless your code says otherwise, text uses your email's body font at 16px, aligned left, and headings (<h1> to <h6>) use your email's heading font.
Unless your code says otherwise, links use the color of the text around them and are underlined. Give a link its own style to change that, such as style="color: #cc0000; text-decoration: none".
Your block is as wide as the email, 600 pixels, minus its horizontal margins: 540 pixels with the default margins. Keep tables and images within that width.
Images load from wherever they are hosted. Use addresses starting with https://, because the web version of your email only shows secure images.
Click the sliders icon above the block to change its Top margin, Bottom margin and Horizontal margin.

Email clients

Custom HTML may not display as intended across different email providers. These are the differences you're most likely to see.

The editor and previews in Knips show your HTML the way a web browser does, so they can differ from what your contacts see in their email client. A block that looks right in Knips can still look different in Gmail or Outlook.

Inline styles and web fonts

Many email clients don't reliably apply <style> tags, Gmail and Outlook among them. Use inline styles: put the styling on the elements themselves, in style attributes such as style="color: #333333".
Many email clients don't load web fonts, so your text falls back to the next font in its font-family list. See Fonts below.

Outlook for Windows

The classic Outlook for Windows uses Microsoft Word to show emails, so much modern CSS has no effect there, such as max-width, CSS background images, rounded corners, flexbox and grid. Build layouts with tables, and set widths with the width attribute, such as <img width="540">.
For background images and rounded buttons, add VML inside an Outlook conditional comment (), and keep the normal HTML for every other client. Knips tracks clicks on VML buttons too.
Links show in blue and without an underline. To change the color, give the link a color in its style attribute.
Padding, borders and rounded corners on links are ignored, so a link styled as a button shows as colored text. Build buttons with a table cell, or with VML as described above.

Fonts

Web fonts, such as fonts from Google Fonts, show in Apple Mail and some other clients. Many email clients, such as Gmail and Outlook, don't load them and use the next font in your font-family list instead, so always end the list with a web-safe font, such as font-family: 'Playfair Display', Georgia, serif.
The classic Outlook for Windows shows all text in your email's web-safe fonts. Only a font set inline with !important, such as style="font-family: Georgia, serif !important", changes that.

Send yourself a test email and check it on desktop and mobile, in the email clients your contacts use, before you send a post.

Using your own HTML in emails