Portal active

Search Knowledge Base Articles

Find answers, guides, and documentation

Knowledge Base › Importing HTML Templates

Importing HTML Templates

If you have existing HTML email templates — from a previous ESP, a designer file, or a downloaded email framework — you can import them directly into MigoSMTP rather than rebuilding from scratch. This article explains the import process, what MigoSMTP does to the imported HTML, and how to fix common issues after import.

Supported Import Methods

Method How Best For
Paste HTML Copy your HTML and paste it directly into the code editor Single templates; quick import from any source
Upload .html file Click Import → Upload File → select a .html file from your device Templates saved as files from a designer or previous ESP export
Import from URL Click Import → From URL → enter a public URL to an .html file Templates hosted on your own server or CDN
API upload POST the HTML content to the Templates API endpoint with the template metadata Programmatic bulk import; automated template deployment pipelines

Step-by-Step: Pasting HTML into the Editor

  1. Go to Templates → Create Template.
  2. Fill in the template name, subject, and other metadata fields.
  3. In the content editor, select the HTML / Code Editor tab.
  4. Select all existing placeholder content in the editor and delete it.
  5. Paste your HTML code.
  6. Click Preview to check rendering.
  7. Send a test email to verify in your inbox.
  8. Click Save & Publish.

Step-by-Step: Uploading an HTML File

  1. Go to Templates and click Import Template.
  2. Select Upload HTML File.
  3. Click Browse and select your .html file (maximum 2 MB).
  4. MigoSMTP parses the file and populates the template editor.
  5. Review the imported content in the preview panel.
  6. Update the template name and metadata fields.
  7. Save and test.

What MigoSMTP Does During Import

Processing Step What Happens
CSS inlining If you have a <style> block in your <head>, MigoSMTP can optionally inline the CSS rules onto individual HTML elements. This is required for compatibility with Gmail and other clients that strip external and head CSS.
JavaScript removal Any <script> tags are automatically removed. JavaScript is not supported in email clients and would be blocked regardless.
External link preservation All <a href> links are preserved as-is. If click tracking is enabled, MigoSMTP wraps them with the tracking URL at send time — not during import.
Image URL handling Absolute image URLs (https://) are preserved. Relative image paths may be broken after import and must be updated to absolute URLs.
Variable syntax detection MigoSMTP scans the imported HTML for {{variable_name}} patterns and lists them as declared variables in the template settings.

Enabling CSS Inlining on Import

If your HTML template uses a <style> block in the <head> (typical for templates built with CSS frameworks or design tools), enable CSS inlining to ensure Gmail compatibility:

  1. After importing or pasting your HTML, look for the CSS Inlining toggle in the template settings.
  2. Enable Inline CSS on send.
  3. MigoSMTP applies CSS inlining at send time — the stored template keeps the original CSS structure, but the delivered email has all CSS inlined.
CSS inlining and media queries: CSS inlining only applies to CSS rules in the <head> <style> block. @media query rules are NOT inlined — they remain in the <style> block and continue to work in clients that support them (Apple Mail, Gmail app). Outlook ignores media queries regardless.

Common Issues After Import and How to Fix Them

Issue Cause Fix
Images not loading in preview Relative image paths (e.g. ./images/logo.png) that do not resolve from an external URL Upload images to your own CDN or image hosting; replace relative paths with absolute URLs (https://cdn.yourcompany.com/logo.png)
Styles look different in inbox CSS in external stylesheet or <style> block stripped by email client Enable CSS inlining; or manually inline all critical styles
Template variable placeholders showing literally Your source template used a different variable syntax (e.g. [FIRST_NAME] or {first_name}) Find and replace all old variable syntax with MigoSMTP's {{variable_name}} format
Layout broken in Outlook Template uses CSS Flexbox or Grid which Outlook does not support Replace Flexbox/Grid layout with table-based layout; see: Using the HTML email editor
Template too wide on mobile Fixed pixel widths without responsive media queries Add @media CSS rules; or change table widths from fixed pixels to percentage-based

Migrating Templates from Other ESPs

Previous ESP Variable Syntax to Replace MigoSMTP Syntax
Mailchimp *|FNAME|* {{first_name}}
SendGrid {{first_name}} (same) {{first_name}} ✓ no change needed
Brevo (Sendinblue) {{ contact.FIRSTNAME }} {{first_name}}
AWS SES (Handlebars) {{firstName}} {{first_name}} (normalise naming)
Custom / Jinja2 {{ first_name }} {{first_name}} (remove spaces inside braces)

Next Steps

Did you find this article useful?
Related Articles