Technical Guide
How to Build an HTML Newsletter You Can Paste into Mailchimp, Beehiiv & ConvertKit
Learn table-based HTML email, subject and preheader, Outlook vs Gmail, unsubscribe tags, and UTM on CTAs. Build send-ready newsletters in the browser — free, no signup.
Table of contents
An HTML newsletter is not a Google Doc you forward. It is a table-based email with a subject line, preheader, hosted images, real https:// buttons, and a legal unsubscribe — markup you paste into Mailchimp, Beehiiv, ConvertKit, or any ESP that accepts custom HTML.
Most “newsletter makers” either lock you into their send platform or export pretty CSS that Outlook desktop shreds. A send-ready builder keeps the 600px table shell, warns you when unsubscribe is still #, and can append UTM tags to CTA URLs so clicks show up in analytics.
This guide covers inbox fields, section layout, Outlook vs Gmail, image hosting, unsubscribe merge tags, UTM on CTAs, and a private browser workflow on Jaconir. Companion: Complete Guide to UTM Links.
What is an HTML Newsletter (Really)?
ESP builder vs exportable HTML
| Approach | What you get | Best for |
|---|---|---|
| ESP drag-and-drop | Blocks that live inside Mailchimp / Beehiiv | Teams already committed to one platform |
| Exportable HTML | A file you paste into any ESP | Agencies, multi-tool stacks, version control |
| Plain text | No layout, excellent deliverability | Transactional notes, not branded campaigns |
A newsletter generator that exports HTML is the middle path: you design once, then drop the same letter into whichever sender you use this month.
Anatomy of a send-ready issue
| Piece | Role |
|---|---|
| Subject | Inbox list title — open or skip |
| Preheader | Grey snippet after the subject (Gmail, Apple Mail) |
| Header | Logo / issue name; keep it light |
| Hero or intro | One hook. Do not bury the point under a banner. |
| Body sections | 1–3 scannable blocks |
| CTA | One primary action with a real URL |
| Footer | Address, help line, unsubscribe |
Templates in Jaconir’s gallery are grouped as Promo, Digest, Product, and Event so the skeleton matches the job (flash sale vs weekly roundup vs launch vs RSVP).
Subject Line and Preheader
These two fields are not “extra metadata.” They are the email until someone opens it.
Subject (~40–60 characters)
Patterns that earn the open without looking like spam:
- Specific number or outcome: “Cut your AWS bill 40% this quarter”
- Curiosity with a payoff: “The CSS property I should have learned years ago”
- Direct value: “August digest — 3 tools, one teardown”
Avoid: ALL CAPS, “Newsletter #12”, more than one emoji, and subjects that read as ads. The editor shows a 60-character counter so you see truncation before Gmail does.
Preheader (~40–90 characters)
If you leave it blank, many clients pull the first line of the body — often “View in browser” or alt text. Write a second sentence that completes the subject, not a duplicate.
| Subject | Preheader |
|---|---|
| Spring sale ends Friday | Extra 15% off with the code in this email |
| Shipping the collage editor | What we cut, what we kept, and the 9:16 preset |
The generator injects the preheader as a hidden preview div at the top of <body> (tiny font, collapsed height, zero-width joiners) so Gmail does not invent its own snippet. It also writes the subject into <title> — your ESP still owns the actual From name and the send-time subject field.
Table Layout, 600px, and Why CSS Flex “Breaks” Email
Email is not a browser. Outlook desktop still uses Word-ish rendering. Flexbox, grid, web fonts, and background-image on <td> are the usual failure modes.
Rules that survive inboxes
- Tables for structure (
width="600", nested cells for columns) - Inline styles over stylesheets (some clients strip
<style>except media queries) - Max width ~600px — wider layouts squash or scroll on phones
- Email-safe fonts: Arial, Georgia, Verdana (the Brand tab can apply a stack to
<body>on export) <img>for pictures, not CSS backgrounds
Jaconir templates ship as a wrapper table plus sections ({{CONTENT}}). That is why Layout can reorder blocks without rewriting the shell.
Sections: What to Keep, Insert, or Cut
Template categories
| Filter | Typical structure |
|---|---|
| Promo | Hero + products/offer + CTA + coupon |
| Digest | Editor note + stories + quick links |
| Product | Feature grid, pricing, founder note |
| Event | Details, speakers, RSVP |
Library blocks you can insert
From Layout, you can drag sections, insert below, remove, or add from the library:
- Text block, centered hero, 2-column features
- 3-image gallery, CTA strip, testimonial
- Spacer, code block, event schedule, coupon voucher
One idea per section. If a digest needs four stories, insert text blocks — do not cram four headlines into the hero.
Brand kit
Primary / secondary / background / text colors plus an email-safe font stack. Apply to template maps colors onto the current letter. Fancy webfonts will fall back in Outlook; pick a pairing in the Font Pairing Previewer, then use Arial/Georgia/Verdana in Brand.
Outlook vs Gmail (Test Before You “Send to List”)
Outlook desktop
- Ignores CSS background images — use a real
<img> - Fights complex Quill formatting — keep body to bold, lists, links
- Happier with table cells than rounded CSS cards
Gmail
- Clips around ~102KB of HTML — host images; do not embed files
- Shows preheader next to the subject when you inject it correctly
- Still loads remote images (sometimes behind a proxy) — they must be https public URLs
Practical test loop
- Copy HTML
- Send a test from the ESP to an Outlook desktop account and a Gmail address
- Open on a phone
- Click every button (catch leftover
#)
The editor’s help popover repeats those client notes. Desktop/mobile preview in the tool is a layout check, not a substitute for a real test send.
Images: Host Them or They Vanish
Email cannot attach your local PNG as a reliable <img src>.
| Source | Preview | Inbox |
|---|---|---|
| blob: / data: from a local upload | Works in the editor | Breaks after send |
| Pexels search in Photos | Works | Works (hotlinked URL) |
| Your CDN / Imgur / product host | Works | Works |
Compress heroes first with the Image Compressor, upload to a host you control, paste the https URL into the image field. The editor warns when it still sees blob/data URLs.
Unsubscribe, Address, and Merge Tags
A missing unsubscribe is a legal and deliverability problem, not a footer aesthetic.
Placeholder #
Templates often ship href="#" on unsubscribe and CTAs. The generator warns when unsubscribe is still #. Replace it with your ESP tag:
| ESP | Typical unsubscribe |
|---|---|
| Mailchimp | `* |
| Beehiiv | Often injected automatically — still verify the footer |
| ConvertKit | Use the platform’s unsubscribe / preference URL |
Physical postal address in the footer is still expected under CAN-SPAM.
Personalization tokens
The Content tab can insert {{first_name}}, {{last_name}}, {{email}}, {{company}}. Those are placeholders. Mailchimp uses *|FNAME|* and similar — swap tokens to match the ESP before you send. UTM tagging skips links that contain {{ so merge URLs are not corrupted.
UTM Tags on CTAs (Why # Cannot Be Tagged)
Analytics only sees clicks that hit a real URL.
The editor’s UTM on CTA links toggle appends utm_source, utm_medium, and utm_campaign when you copy or download HTML. It only rewrites http:// and https:// hrefs. It leaves alone:
#placeholdersmailto:- Merge-tag URLs
So a Shop button that still says # will never appear in GA4, no matter how carefully you name the campaign. Put https://yoursite.com/sale on the button first.
For one-off links, or when you also need utm_term / utm_content, build the URL in the UTM Link Builder and paste it into the button field. Same campaign name in both tools. Full naming rules: Complete Guide to UTM Links.
Example after tagging:
https://jaconir.online/tools?utm_source=newsletter&utm_medium=email&utm_campaign=august-digest
Copy-Paste into Mailchimp, Beehiiv, and ConvertKit
The generator does not send mail. You export markup; the ESP sends it.
Shared steps
- Copy HTML or Download the
.htmlfile - In the ESP, create a campaign → custom / code / HTML (wording varies)
- Paste or import
- Confirm the ESP subject field matches (or override) the HTML
<title> - Replace unsubscribe and merge tags
- Send a test to yourself
Platform notes
- Mailchimp — Code your own template / Import HTML. Use
*|UNSUB|*. Do not paste into a drag-and-drop block that wraps your tables in extra divs if you can avoid it. - Beehiiv — Custom HTML / code editor. Check that Beehiiv’s footer does not duplicate unsubscribe.
- ConvertKit — HTML email or “code” content. Map
{{first_name}}to ConvertKit’s subscriber fields if you used those tokens.
Always click every CTA in the test email. If a button is still #, analytics and humans both dead-end.
Interactive Browser Tool
Once the structure is clear, building the letter should be mechanical — not a weekend in Dreamweaver.
Jaconir Newsletter Generator is a free, browser-based HTML email builder:
- Template gallery filtered by Promo, Digest, Product, Event
- Subject (60) and preheader (90) with inbox-style preview
- Layout — reorder, insert, remove; library includes heroes, galleries, CTAs, coupons
- Brand colors + email-safe font on export
- Optional Gemini AI copy (your API key; presets for weekly update, launch, digest)
- Pexels photos; warning for blob images and
#unsubscribe - UTM on CTA links (source / medium / campaign) plus a link to the UTM builder
- Copy HTML or Download; drafts autosave in localStorage
- Privacy-friendly: no account to design or export; AI is optional and uses your key
Build an HTML Newsletter Online → Newsletter Generator
How to Use the Tool
Step 1 — Pick a template
Open the Newsletter Generator. Filter by Promo, Digest, Product, or Event, then open the editor.
Step 2 — Write subject and preheader
Use the Content tab. Keep the subject specific — not “Newsletter #12”. Fill the preheader so Gmail does not steal a random first line.
Step 3 — Edit layout and copy
Click the preview to jump to a field, or use Layout to insert sections. Optional: AI Writer (weekly / launch / digest presets) or Pexels photos. Apply Brand if you have colors ready.
Step 4 — Real URLs, unsubscribe, UTM
Replace # on every button. Host images. Fix unsubscribe. Turn on UTM on CTA links or paste URLs from the UTM Link Builder.
Step 5 — Copy into your ESP
Copy HTML or download. Paste into Mailchimp / Beehiiv / ConvertKit as custom HTML. Send a test to Outlook and Gmail, then send to the list.
Build an HTML Newsletter Online → Newsletter Generator
Continue Your Email Campaign Workflow
The letter is one station: write HTML, tag links, compress images, then optionally print a QR for the same campaign.
Topic / offer
↓
Newsletter Generator ← you are here
↓
UTM Link Builder (CTAs + extra term/content)
↓
Image Compressor (hosted heroes)
↓
ESP send (Mailchimp / Beehiiv / ConvertKit)
↓
GA4 Traffic acquisition
| Step | Tool | What it does next |
|---|---|---|
| 1 | Newsletter Generator | Table-based HTML, subject/preheader, sections, export (current step). |
| 2 | UTM Link Builder | Tags utm_source / medium / campaign (plus optional term and content). |
| 3 | Image Compressor | Shrinks heroes before you host them for email. |
| 4 | Font Pairing Previewer | Headline + body combo; then use an email-safe fallback in Brand. |
| 5 | QR Code Generator | Prints the same tagged URL for packaging or events. |
| 6 | Keyword Research Tool | Paid-search terms worth putting in utm_term. |
More free utilities: Jaconir Tools.
Common Mistakes
- Leaving CTA hrefs as
#— buttons do nothing; UTMs never attach - Blob image URLs — preview looks fine, inbox is broken
- No preheader — Gmail shows “View in browser” or alt text
- Subject = “Newsletter #47” — no reason to open
- CSS background heroes in Outlook — empty grey boxes; use
<img> - Huge HTML + embedded images — Gmail clip (~102KB)
- Forgetting ESP unsubscribe tags — legal and spam-folder risk
- Inconsistent UTM casing —
Emailvsemailsplits GA4 rows (slugify in the UTM tool) - Two competing CTAs — pick one primary action
- Assuming the editor preview = Outlook — always send a test
Best Practices
Weekly product / creator digest
- Digest template + short editor note
- Three stories, one CTA
- Campaign name like
aug-16-digest— reuse in the UTM builder
Promo / ecommerce
- One offer, one code (coupon block), one shop URL
- Host product shots; compress first
utm_content(via UTM builder) if you A/B a header button vs a footer button
Product launch
- Launch AI preset as a first draft, then rewrite in your voice
- Feature grid, one signup URL, no competing coupons
Events
- Event template or schedule library block
- RSVP must be
https://— calendar “links” that are#look clickable and are not
Frequently Asked Questions
How do I paste this into Mailchimp, Beehiiv, or ConvertKit?
Copy HTML, then choose a custom / code / HTML campaign in the ESP. Replace unsubscribe with the platform tag (Mailchimp *|UNSUB|*). Beehiiv often injects its own.
What are subject line and preheader for?
Subject is the inbox title. Preheader is the snippet after it. Roughly 40–60 and 40–90 characters.
Why do images need a public URL?
Inboxes cannot load your disk. Preview may use a blob; export needs https.
Will this look the same in Outlook?
Table layout is the safe path. Avoid CSS background images and heavy Quill formatting. Test Outlook desktop.
Why can’t # be tagged with UTMs?
# is not a page. The exporter skips #, mailto:, and merge tags. Use a full https URL.
Is unsubscribe required?
Yes. Replace # with your ESP unsubscribe merge tag before send.
Does the generator upload my newsletter?
Drafts stay on your device. Optional AI sends field text to Google Gemini with your key.
Can I tag newsletter buttons?
Yes — editor toggle for source/medium/campaign, or the UTM Link Builder for full control.
What merge tags are built in?
{{first_name}}, {{last_name}}, {{email}}, {{company}} — remap to your ESP.
Is there a free HTML newsletter builder without signup?
Yes: Newsletter Generator — templates, subject/preheader, sections, copy-paste export.
Related Guides
- Complete Guide to UTM Links — naming, GA4, why hash links never report
- Free SEO Audit Tool Guide — check the landing page your CTA hits
- Complete Guide to Favicons — brand the site behind the email
- Complete Guide to Video Collages — promote the same campaign in Reels/TikTok
Conclusion
A newsletter people can actually receive is HTML that survives Outlook, inbox fields (subject + preheader), hosted images, a real unsubscribe, and https CTAs you can tag for analytics. You do not need a locked-in ESP designer for that — export clean tables, paste, test, send.
When you are ready to build the letter:
Build an HTML Newsletter Online → Newsletter Generator
Then tag every button with the UTM Link Builder and keep the rest of the campaign consistent across Jaconir’s free tools.