Email Widget

Create email-safe HTML snippets from your data and paste them into any email marketing tool — Mailchimp, Klaviyo, ConvertKit, Beehiiv, or any platform that accepts custom HTML.

Always send a test email to yourself before sending to your audience. Email clients (Gmail, Outlook, Apple Mail) each render HTML differently — what looks perfect in the preview may need adjustments.

Getting Started

Click New Widget from your dashboard
Select Email from the widget picker
Choose a template that fits your use case
Connect a data source or start with demo data
Customise your layout, fields, and styling in the Creator
Click Copy Email HTML to get your email-ready code

Templates

Each template is pre-configured with a layout, sample data, and styling. You can customise everything after selecting one.

Template	Layout	Best for
Email	Cards	General newsletters with images, badges, and buttons
Frameworks	Cards	Icon grids, feature roundups, content sections
Showcase	Cards	Product showcases with large images
Home Essentials	Cards	Product cards with padded cover images
Travel	Cards	Destination cards with cover badges
Essentials	Cards	App showcases with bordered, padded images
Testimonials	Cards	Quote cards with avatars and star ratings
Comparison	Table	Side-by-side feature or product comparison
Tips	Feature	Icons with tips, advice columns
Podcast	Feature	Episode listings with badges
Feature Alt	Feature	Alternating image and content blocks

Layouts

Cards

A grid of cards with 1–3 columns per row. Each card can include a cover image, title, fields, badges, and buttons.

Key settings:

Cards per row — 1, 2, or 3 columns
Alignment — Left or center-aligned content
Card container — Background colour, border, and border radius

Feature

A full-width row with a large image beside your content. Designed for showcasing individual items with prominent imagery.

Key settings:

Image side — Left or right
Alternate — Flip image side on each row
Image width — How much space the image takes (1/4, 1/3, 1/2, 2/3, 3/4, or custom percentage)
Vertical alignment — Top, middle, or bottom
Stack on mobile — When enabled, image stacks above content on small screens

Table

A structured table with rows and columns. Best for comparison data, feature lists, and pricing breakdowns.

Content

Header

Add a title and subtitle above your email content. Configure alignment (left, center, right) and colours in the Design tab.

Fields

Add fields to display data from your columns. Supported field types:

Text — Plain text content
Heading — Bold heading text
Image — Inline image with width, height, and fit controls
Badge — Coloured labels or tags
Link — Clickable links
Divider — Horizontal separator line
Button — Call-to-action button

Buttons

Add buttons to each card or feature row. Configure:

Label — Button text (static or from a column)
Action — Link to a URL (static or from a column)
Style — Background colour, text colour, shape (square, rounded, pill)
Border — Optional border colour and width

Footer Button

A call-to-action button below all items. Configure the label, URL, colours, width, border radius, and spacing.

Max Items

Control how many items appear in the email. Set this in the Content tab.

Cover Images

Cover images appear at the top of each card or beside the content in feature layouts. Configure them by clicking the paintbrush icon next to the cover image column.

Image Height

Set a fixed pixel height for consistent sizing across desktop and mobile.

Auto — Height scales naturally based on the image (default)
Custom value — Enter a pixel value (e.g., 200) for a fixed height

For feature layouts without image padding, the height acts as a minimum height — the image expands to match the content height. Enable image padding for a fixed height.

Image Fit

Cover — Fills the entire area, cropping overflow. Best for photos.
Contain — Fits entirely within the area without cropping. Best for logos and icons.

Image Padding

Adds space between the image and the card edge. Creates a “framed” look.

None — Image is flush to the card edges
Small — 10px padding
Medium — 20px padding
Large — 36px padding

When padding is enabled, you can also set Corners (border radius) on the image.

Image Fields

Inline image fields can be added to cards alongside other content. Unlike cover images, these sit within the content area and support:

Width — 25%, 50%, 75%, or 100% of the card width
Height — Auto (natural proportions) or a fixed pixel value
Image Fit — Cover or Contain
Corners — None, Small, Medium, Large, or Full (circular)

Image fields are useful for avatars, icons, or secondary images within a card.

Styling

Email Max Width

The overall width of the email HTML. Default is 600px, which is the industry standard for email. You can adjust this in the Content tab.

Design Tab

Background colour — The colour behind the entire email
Font family — Choose a web-safe font (Arial, Georgia, Verdana recommended)
Card containers — Background colour, border, and border radius for each card
Row gap / Column gap — Spacing between cards

Spacing

Individual fields support top and bottom padding via the Spacing control, which can be accessed from each field’s settings.

Copying and Using the HTML

Click Copy Email HTML in the preview
Wait for images to be cached — this converts image URLs to permanent, reliable links
The HTML is automatically copied to your clipboard
Paste it into a Custom HTML block in your email tool
Send a test email to yourself to verify everything renders correctly

When you copy the HTML, all images are automatically cached to permanent URLs hosted on our servers. This ensures images load reliably in email clients and won’t expire or break.

Where to paste the HTML

Most email tools have a “Custom HTML” or “Code” block:

Mailchimp — Add a Code content block
Klaviyo — Drag in an HTML block
ConvertKit — Use the HTML editor
Beehiiv — Add a Custom HTML block
Substack — Not supported (Substack doesn’t allow custom HTML)

Email Client Compatibility

The generated HTML is tested and optimised for:

Client	Support
Gmail (web & mobile)	Full support
Apple Mail (macOS & iOS)	Full support
Outlook.com	Full support
Outlook desktop (Windows)	Full support via VML fallback
Yahoo Mail	Full support
Samsung Mail	Full support

How it works under the hood

Cover images use background-image with background-size: cover for reliable cropping across all clients
Outlook desktop receives VML (Vector Markup Language) fallback code for background images
Responsive layouts use @media queries to stack columns on mobile (supported by Apple Mail, Outlook.com, Yahoo, Samsung — Gmail shows the desktop layout on mobile)
All layouts use table-based HTML for maximum compatibility

Known Limitations

Gmail does not support @media queries — emails render at their desktop layout on Gmail mobile. This is a Gmail limitation, not a Shareables issue.
Outlook desktop requires VML for background images — this is handled automatically.
Dark mode — Some email clients invert colours in dark mode. We recommend testing with dark mode enabled on iOS and Android.

Tips

Set Image Height on cover images to prevent them from becoming too tall on mobile
Enable Image Padding for a polished, framed card look
Keep Email Max Width at 600px for the widest compatibility
Use web-safe fonts (Arial, Georgia, Verdana) — custom fonts may not render in all clients
Always test in Gmail, Outlook, and Apple Mail before sending to your audience
Use the Cover image fit for photos and Contain for logos or icons