Add Custom HTML and CSS

Overview

The visual editor handles most of what you'll ever need to build a great-looking email — drag in a block, tweak the styling, and you're done. But every now and then you'll want to do something the standard blocks don't quite cover. A custom layout. A snippet from a third-party tool. A bit of CSS to fine-tune the spacing on a particular section.

That's where custom HTML and CSS come in. There are two ways to add your own code to an email, and they're designed for different jobs:

• The HTML / CSS editor — opens up the full source of the email so you can edit the underlying markup and styles directly. Best when you want global changes.
• The HTML block — a content block you drop into the email like any other, with a code snippet inside it. Best when you want one custom thing in one specific spot.

‍

Which one should you use?
‍If you're adding a custom class, global styling, or making a fix that applies across the whole email, use the HTML / CSS editor. If you're embedding a one-off element — a countdown timer, a custom card layout, an iframe — drop in an HTML block. You'll know which is which pretty quickly once you've used both.

‍

Access the HTML / CSS editor

This is the full-source view. Opening it gives you the underlying HTML and CSS for the entire email, so you can edit anything end to end.

1. Open your template in the visual editor.
2. At the top of the editor panel, click View HTML / CSS. When the editor is open, this button switches to Hide HTML / CSS so you can collapse it again.
3. The source panel opens with the full HTML and CSS for the email. Make your edits directly in the code.
4. Click Save to apply your changes.

‍

‍

Add an HTML block

If you only need custom code in one part of the email — say, a special promo banner or a snippet from a partner service — an HTML block is the cleaner option. It keeps your custom code self-contained so the rest of your design stays untouched.

1. In the right-hand editor panel, open the Content tab.
2. Expand the Blocks section to see all available content blocks.
3. Drag the HTML block into the email at the position you want it to appear.
4. Click into the block and paste or type your HTML. Any inline styles or <style> tags inside the snippet will be applied.
5. Click Save to lock in your changes.

‍

Keep snippets self-contained
‍If your snippet needs styling, write it inline or inside a scoped <style> tag within the block. That way you can move or remove the block later without leftover CSS hanging around in the main stylesheet.

‍

Always preview before you send
‍Email clients are a fussy bunch — what looks fine in your browser can render very differently in Outlook, Gmail, or on mobile. Send a test send to yourself (and ideally to a couple of different inboxes) before you queue a campaign with custom code in it. It's the quickest way to catch a layout that's drifted or a style that's been stripped.

‍

What's next

That's the two routes covered. For most day-to-day work you'll lean on the HTML block — it's quick, contained, and won't surprise you later. The full HTML / CSS editor is there when you need it, particularly for shared styling that needs to apply across the whole email.

If you're new to building emails with custom code, start with a single HTML block in a test template before you take it anywhere near a live campaign. You'll get a feel for how the editor handles your snippet, and you'll spot any rendering quirks early.