Knak focuses on a no-code building experience. Most layouts should use structure blocks and standard content blocks. Custom HTML should only be used in special cases.
If you need help building a custom experience, contact your Customer Success Manager (CSM) or the support team.
Note: Some features described in this article, such as iframes and third-party form embeds, are only supported on landing pages. Email client limitations may prevent these elements from rendering in email messages.
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, including:
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.
Drag the HTML content block into your email or landing page.
Click the block.
Open the code editor in the right-side panel.
Paste your HTML code.
If you need to add HTML to your email and do not see this option, contact Knak Support to enable the feature for your account.
Note: If an iframe or embedded content does not display correctly in the editor, preview the asset. Some elements only render correctly in Preview mode.
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
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.
Open the asset.
Go to Info.
Open the Advanced Settings tab.
Paste your CSS into Custom Head HTML.
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
Replace [URL] with your content source.
Adjust width and height values if needed.
Open the Preview tab to confirm the iframe displays correctly.
Important Script Guidelines
Scripts have strict placement rules.
Allowed | Not Allowed |
Scripts inside Custom Head HTML | Scripts inside the body of a landing page |
This restriction helps prevent security issues and unexpected page behavior.
Some third-party tools, such as form providers, require JavaScript to function. Use the following approach to embed these tools on landing pages.
Embed Third-Party Forms on Landing Pages
Third-party forms can be embedded on Knak landing pages by using a placeholder element in the page body. Load the required scripts from Custom Head HTML. This approach complies with Knak's script restrictions.
Add a Placeholder Element
Drag an HTML block onto the landing page.
Paste the form container provided by your form vendor.
For Example:
<div id="[FORM_CONTAINER_ID]">Loading...</div>
Add the Form Script
Open the Info tab.
Click Advanced Settings.
Paste the provider's script tags into Custom Head HTML.
Troubleshoot Layout Issues
If the form expands beyond its container, add styling to the placeholder element:
<div id="[FORM_CONTAINER_ID]" style="width:100%;max-width:100%;box-sizing:border-box;overflow:hidden;">
Loading...
</div>
Best Practices
Test the form on desktop and mobile devices.
Use descriptive container IDs.
Keep custom scripts documented for future maintenance.
Confirm the form provider supports responsive layouts.
Note: Third-party form implementations vary by provider. Additional customization may be required depending on the form vendor.
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 headEnsure all HTML tags are properly opened and closed
Example:
<tagname>Content goes here...</tagname>
Incorrect or unclosed tags can break rendering or tracking scripts.
Troubleshooting Common Issues
Why Doesn’t My Code Work as Expected?
Double-check your HTML syntax for errors.
Ensure you are using the correct component for embedding your code.
Preview your email to verify how the content renders outside of the editor.
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