Skip to main content

Adding Custom HTML to the Editor

How to import custom HTML in the Email Builder

Updated over a week ago

Knak focuses on a no-code building experience. Most email layouts should use structure blocks. Custom HTML should only be used in special cases. If you need help building something, contact your Customer Success Manager (CSM) or the support team.

Why Use Custom HTML?

The Email Builder supports most designs without code. In rare cases, custom HTML may help you add advanced functionality.

Common use cases include:

  • Adding HTML5 video

  • Creating anchor links

  • Applying advanced CSS effects, such as animations

  • Embedding external content, such as:

    • Product recommendations

    • Maps

    • Countdown timers

⚠️ Important:
Custom HTML can affect the entire email layout. Always test your asset before publishing.

Add Custom HTML in the Builder

Follow these steps to insert custom HTML.

  1. Drag the HTML content block into your email or landing page.

    1. If you need to add HTML to your email and do not see this option, reach out to Knak Support to enable this feature in your account.

    HTML content block being dragged into the editor canvas.

  2. Click the block.

  3. Open the code editor in the right-side panel.

    HTML editor panel where you can paste custom HTML code.

  4. Paste your HTML code.

Supported HTML in the Builder

The builder automatically fixes some common issues in HTML code. For example, it may close unclosed tags. The builder also removes unsupported elements.

Some elements are restricted because they can cause:

  • Email client compatibility issues

  • Deliverability problems

  • Security risks

Allowed Tags List:

'img', 'style', 'meta', 'center', 'del', 'html', 'head', 'comment', 'title', 'link', 'body', 'font', 'iframe', 'nobr', 'video', 'source', 'noscript', 'first', 'map', 'area', 'head', 'button', 'color', 'input', 'span', 'details', 'summary', 'wc-mega-menu', 'wc-mega-footer'

Expand to view the Allowed Attributes per Element

video: src, width, height, style, id, class, data-*, title

iframe: src, width, height, style, id, class, data-*, title

meta: name, content, http-equiv, itemprop, style, id, class, data-*, title

time: itemprop, datetime, style, id, class, data-*, title

body: style, width, height, id, class, data-*, title

style: type, style, id, class, data-*, title

link: href, rel, type, style, id, class, data-*, title

table: align, border, cellpadding, cellspacing, width, valign, style, bgcolor, table, id, class, data-*, title

tr: align, style, valign, width, bgcolor, class, id, data-*, title

td: align, style, valign, width, bgcolor, class, id, data-*, title, colspan, rowspan


​th: align, style, valign, width, bgcolor, class, id, data-, title, scope, colspan, rowspan

div: style, width, bgcolor, class, id, itemscope, itemtype, itemprop, mktoname, data-w-id, data-layout, data-url, data-*, title

span: class, itemscope, itemtype, itemprop, id, style, data-*, title

p: style, width, bgcolor, class, id, data-*, title

a: align, style, width, bgcolor, name, target, href, class, id, data-*, title

img: align, style, width, height, border, src, class, id, data-*, alt, title

button: align, style, width, bgcolor, name, target, href, class, id, data-*, title

Add CSS to Custom HTML

Some email clients remove CSS if it is placed incorrectly.

For example, Gmail removes CSS that is not inside the <head> section.

Recommended Method

Add custom styles in Custom Head HTML.

  1. Open the asset.

  2. Go to Info.

  3. Open the Advanced Settings tab.

  4. Paste your CSS into Custom Head HTML.

Custom Head HTML section in the info tab of a landing page

Embed External Content With Iframes

You can embed content like maps or videos using an iframe.

Example Code

<iframe src="[URL]" width="100%" height="800px"></iframe>

Steps

  1. Replace [URL] with your content source.

  2. Adjust width and height values if needed.

  3. Open the Preview tab to confirm the iframe displays correctly.

Important Script Guidelines

Scripts have strict placement rules.

Allowed

  • Place scripts inside Custom Head HTML

Not Allowed

  • Scripts inside the body of a landing page

This restriction helps prevent security issues.

Best Practices

Follow these guidelines when adding custom HTML:

  • Only place metadata elements in the Custom Head HTML section

  • Use tags such as:

    • <meta>

    • <style>

    • <script>

    • <title>

    • <link>

  • Do not add structural elements like <div> to the head

  • Ensure all HTML tags are properly opened and closed

Example:

<tagname>Content goes here...</tagname>

Incorrect or unclosed tags can break rendering or tracking scripts.

Video Walkthrough of adding HTML

Need more help? Contact support via live chat within Knak using the chat bubble in the bottom right corner or email support@knak.com

Related Articles
Adding Anchor Links using Custom HTML
How to Customize a Button
Adding Google Tag Manager Tracking to Knak Landing Pages
HTML Import
How to Use Element Tags in Knak
Did this answer your question?