How to paste custom HTML into a Klaviyo email

Klaviyo gives you two places to put custom HTML, and the right one depends on whether you want one section to be custom or the whole email.

The HTML block lives inside the drag-and-drop editor. When you build a campaign or flow email and pick a drag-and-drop template, you can drag an HTML block from the right rail onto the canvas and paste code into it. This is good when most of the email uses Klaviyo's standard blocks and you only need one custom piece, like a hand-coded hero or a product grid the visual blocks cannot produce.

The full code editor is the other path. When you create a new email, Klaviyo asks you to choose a template type. Pick the code/HTML template (sometimes shown as 'Start from scratch' with an HTML option) and you get a raw editor where you paste a complete email document, from the opening table down to the footer. Choose this when you already have a finished HTML email from a designer, an agency, or a tool, and you want Klaviyo to send it as-is.

A practical note: you generally cannot convert a drag-and-drop email into a full-code email after the fact, or vice versa. Decide which one you need before you start the email, because switching means rebuilding.

Klaviyo does not render your HTML in a browser the way a website does. It passes your markup to email clients that each have their own quirks, so the rules are stricter than web HTML.

What survives reliably: table-based layouts (table, tr, td) with widths set in attributes or inline styles, inline CSS on each element, hex background colors, and standard img tags with absolute https URLs and alt text. This is the same markup that works in Gmail, Apple Mail, and Outlook, so if your HTML already follows email conventions, Klaviyo will keep it intact.

What Klaviyo touches or strips: it removes most content inside a head style block for many clients because Gmail clips or ignores it, which is why inline CSS matters. It can rewrite or wrap links for click tracking, so do not rely on a link's exact href surviving byte for byte. It expects its own merge tags for personalization, written as {{ first_name }} or {% ... %} Django-style syntax, not Mailchimp's *|FNAME|* format. If you paste Mailchimp merge tags, they will render as literal text. Klaviyo also requires an unsubscribe link and will append compliance footer content, so leave room for it.

A quick sanity check before pasting: open your file and confirm the layout is built from tables, every style sits inline on the element, and image sources are full https URLs, not relative paths.

Most paste failures trace back to a handful of repeat offenders.

Div-and-flexbox layouts. Modern web HTML uses div, flexbox, and grid. Outlook on Windows uses Microsoft Word's rendering engine and ignores most of it, so a flexbox row that looks fine in Gmail collapses into a single stacked column in Outlook. Rebuild the layout with nested tables instead.

Styles in the head instead of inline. A rule like p { color: #333 } in a style block gets dropped by Gmail, and your text falls back to default black. Move every style inline, for example style="color:#333333;". Tools and good email frameworks inline CSS automatically; if you are hand-coding, do it before you paste.

Broken images. Relative paths like src="/images/hero.png" have nothing to resolve against inside an inbox. Use absolute https URLs on a host that allows hotlinking, and set explicit width and alt text so the email still reads when images are blocked, which is the default in many clients.

Dark mode surprises. Apple Mail and some Gmail apps invert light backgrounds and can recolor logos. A black logo on a transparent PNG can vanish on a dark background. Test in dark mode and, where it matters, put a solid background color behind the logo cell.

If this list feels like a lot to manage by hand, that is the point of producing the HTML correctly upstream. Mailwright outputs table-based, inline-CSS HTML built to survive these exact issues, so the version you paste into Klaviyo is already ESP-safe.

Pasting is not finished until you have seen the email in real inboxes. The preview inside Klaviyo's editor uses a browser, so it will not show you the Outlook or dark-mode problems that actually break emails.

Send a test email to yourself first. In the campaign or flow email, use Klaviyo's preview-and-test option to send to a real address. Then open that test in the three clients that cover most subscribers: Gmail (web and the mobile app), Apple Mail on iPhone, and Outlook on Windows if any of your list uses it. Outlook is where layout breaks show up.

Check the small things on each open: does the layout hold or collapse, do images load, is the text readable, do links go where they should, and does dark mode keep your logo and text visible. Click at least one link from the test send to confirm Klaviyo's tracking did not mangle the destination.

If you want broader coverage without owning every device, a rendering tool like Litmus or Email on Acid shows the email across dozens of clients from one test. For a small team, a careful manual pass through Gmail, Apple Mail, and Outlook catches the large majority of problems. Either way, never schedule a custom-HTML email straight from the editor preview alone.