<img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=108825&amp;fmt=gif">
Skip to content
English
Contact us
  • There are no suggestions because the search field is empty.

HubSpot Hack: Turn Any HTML Email Into a Drag-and-Drop HubSpot Template

If you’ve ever migrated emails from Mailchimp, Klaviyo, Figma—or inherited a folder of random HTML files—you’ll love this one. Instead of rebuilding everything block-by-block in HubSpot, you can now upload the HTML and let AI do all the heavy lifting. What this hack does: Drop in any email’s HTML, and HubSpot’s AI instantly converts it into a fully editable drag-and-drop template. No coding. No painstaking recreations. Just upload → generate → tweak.

Step-by-Step Instructions

Step 1: Make sure AI features are enabled

  1. Go to Settings → Account Management → AI → Access.

  2. Toggle on AI for your account if it’s not already.

⚡ Tip: Only Super Admins can change account‑level AI settings, so you may need to ask an admin to enable this

Step 2: Start a new email

  1. Navigate to Marketing → Email → Create email.

  2. Pick Regular or Automated, depending on your campaign needs.

Quick note: Regular emails are for one-off sends, Automated are for workflows or drip campaigns.

Step 3: Upload your HTML

  1. Under Create a new design, select Upload design.

  2. Choose between:

    • Upload a file → select your HTML file from your computer

    • Paste HTML directly → copy-paste the code into the box

⚡ Tip: Double-check your images are hosted online or in HubSpot files to avoid broken links.

Step 4: Generate the design

  1. Give your email template a name.

  2. Hit Generate Design.

  3. Review the preview. HubSpot AI will translate the HTML into drag-and-drop blocks.

⚡ Tip: If anything looks off, click Generate again. AI might create slightly different block structures each time, and you can pick the cleanest version.

Step 5: Save or start editing

  1. Create a template → saves it for reuse across campaigns.

  2. Create design → opens the editor immediately for tweaks and sending.

⚡ Pro tip: Always save a template if you plan to use it multiple times. This keeps your workflow efficient and consistent.

Step 6: Tweak and test

  • Adjust modules, spacing, and images directly in the drag-and-drop editor.

  • Test your email by sending it or previewing it in HubSpot to check formatting across all devices and clients.

  • Optional: Add personalisation tokens or smart content before sending.

Who can use this hack

  • Marketing Pro and Marketing Enterprise users with AI access.

Bonus Tips & Tricks

  • For complex HTML with embedded CSS, HubSpot’s AI may break some styles; always preview and manually tweak if needed.

  • Keep your HTML clean — remove inline styles or scripts that aren’t supported in emails.

Becky Brown

By Becky Brown, Marketing Manager

Never miss a Hack! Sign up to our weekly Hacks Newsletter