Skip to content
Modular Mail Docs

Popular ESP Guides

While every Email Service Provider (ESP) has a slightly different interface, the process for importing a custom HTML email is generally the same.

The “Paste in Code” Workflow

Section titled “The “Paste in Code” Workflow”

The most common method is to find an option to create a campaign using your own HTML, often called “Import HTML,” “Custom Code,” or “HTML Editor.”

  1. Open your exported .html file in a text editor (like VS Code, Sublime Text, or even a basic text editor).
  2. Select all the code (Cmd+A or Ctrl+A) and copy it to your clipboard (Cmd+C or Ctrl+C).
  3. In your ESP, create a new email campaign.
  4. Look for an option like “Code your own,” “Paste in code,” or “Import HTML.” This is often presented as an alternative to the ESP’s drag-and-drop editor.
  5. Paste your copied HTML into the code editor provided by the ESP.
  6. The ESP should then show you a preview of your email. From there, you can proceed with the ESP’s normal flow for choosing a recipient list and sending.

Important: Make sure your ESP does not try to “help” by modifying your code. Look for settings that ensure the ESP uses your HTML exactly as you’ve pasted it.

Here are brief instructions and links to official documentation for importing your custom HTML into some of the most popular Email Service Providers (ESPs).

Mailchimp

Section titled “Mailchimp”
  • Method: Paste in code.
  • Instructions: When creating an email campaign, at the “Select a template” step, choose the “Code your own” tab and select “Paste in code.”
  • Read Mailchimp’s Guide

Campaign Monitor

Section titled “Campaign Monitor”
  • Method: Paste in custom code.
  • Instructions: In your account, go to “My templates,” click “Create a new template,” and then choose “Import HTML.” You can then paste your code.
  • Read Campaign Monitor’s Guide

Klaviyo

Section titled “Klaviyo”
  • Method: Use an HTML block or import a template.
  • Instructions: You can import a full HTML template under Content > Templates > Create Template > Import HTML. Alternatively, in their drag-and-drop editor, you can add a “Text” block and click the “Source code” (</>) icon to paste in smaller snippets of HTML. For a full email, importing the template is the best approach.
  • Read Klaviyo’s Guide

Brevo (formerly Sendinblue)

Section titled “Brevo (formerly Sendinblue)”
  • Method: Custom HTML email.
  • Instructions: In the campaign creation process, at the “Design” step, choose the “Code your own” option and use their HTML editor to paste your code.
  • Read Brevo’s Guide

Salesforce Marketing Cloud

Section titled “Salesforce Marketing Cloud”
  • Method: Paste HTML in Email Studio.
  • Instructions: In Email Studio, navigate to Content > Create > Email Message. Select the “HTML Paste” creation option to paste your full email code.
  • Read Salesforce’s Guide

HubSpot

Section titled “HubSpot”
  • Method: Use custom HTML templates.
  • Instructions: You can create a new coded file by going to Marketing > Files and Templates > Design Tools. From there you can create a new file and choose “Code editor”. Paste your HTML there. You can also create a campaign and choose a “Coded email” template.
  • Read HubSpot’s Guide

Sometimes things don’t look quite right after you import your email into your ESP. Here are a few common reasons why.

Why Emails Might Look Different

Section titled “Why Emails Might Look Different”
  • ESP Code Modification: The most common issue is that the ESP’s editor has automatically “fixed” or modified your HTML. Some platforms have settings that add tracking pixels, convert your <html> and <body> tags, or otherwise interfere with your code. Always look for a “paste in code” option that promises to leave your HTML untouched.
  • CSS Inlining Issues: Modular Mail automatically inlines your CSS, but some ESPs try to do this again, which can cause conflicts. If possible, turn off any automatic CSS inlining features in your ESP.
  • URL and Link Tracking: Most ESPs will wrap your links with their own tracking URLs for analytics. This is usually fine, but it can sometimes cause issues with complex link structures. Always send a test email to yourself to verify all links work as expected.

How to Fix Common ESP Quirks

Section titled “How to Fix Common ESP Quirks”
  • Check the DOCTYPE: Ensure your ESP hasn’t stripped or replaced the <!DOCTYPE html> declaration from the top of your file. Its absence can cause browsers and email clients to render the page in “quirks mode.”
  • Verify Image Paths: If images appear broken, check if the ESP has tried to rewrite the src paths. Your image URLs should be absolute (e.g., https://my-cdn.com/image.jpg) and publicly accessible.
  • Send a Test: The only way to be certain how an email will look is to send a real test through the ESP. A preview within the ESP’s application is not always 100% accurate. Send it to your own email address at major clients like Gmail, Outlook, and Apple Mail.