MiN8T All Insights
Guide 14 min read

What are Smart Elements? How to Use Them

M
MiN8T Team
Email Engineering
April 12, 2026

1 What are Smart Elements?

A Smart Element is a container, structure, or stripe in your email template that is connected to an external data source — a web page URL, a JSON file, or a Google Sheet. Instead of manually typing product names, prices, and image URLs into every block, you point your element at a source and MiN8T populates the blocks automatically.

Common use cases:

Smart Elements operate at three hierarchy levels:

When a Smart Element is active on any of these levels, a SMART badge appears on the element's toolbar in the canvas. The badge is green and visible whenever you hover over or select the element.

i

Smart Elements support two extraction methods: OG Tags (automatic, zero-config) and CSS Selectors (precise, customizable). You can also connect an AMP Data Source for real-time dynamic content in AMP emails.

2 Method 1: Open Graph (OG) Tags

The fastest way to populate a Smart Element. Most websites already embed Open Graph meta tags for social media previews — MiN8T reads those same tags and maps them to your email blocks.

What Gets Extracted

OG Tag Fallback Maps To
og:title twitter:title, then <title> Text / Heading block
og:image twitter:image Image block
og:description twitter:description, then <meta name="description"> Text block
og:url The URL you entered Button / all links
og:price:amount product:price:amount Text block (price)
og:price:currency product:price:currency Text block (currency)

How to Use OG Tag Extraction

  1. Select a container, structure, or stripe in the editor. Make sure it contains at least one image, text, or button block.
  2. In the property panel, click the "Data" tab.
  3. Click "Connect website page".
  4. Paste the product or article URL and press Enter (or click "Get Data").
  5. MiN8T fetches the page, reads the OG meta tags, and displays a preview of extracted data: title, image, description, price.
  6. The extracted values are automatically applied to the blocks in scope — the first text block gets the title, the image block gets the image URL, the button gets the link.
✓

If you have multiple text blocks (e.g., title and description), MiN8T provides dropdown controls to choose which text block receives which value. You can map "title" to the heading block and "description" to the body text block.

What If OG Tags Are Missing?

If a page has no Open Graph meta tags, MiN8T returns a 422 response with a suggestion to try CSS selectors instead. The page's <title> tag is still returned as a fallback. To get richer data from pages without OG tags, use CSS Selectors (next section).

3 Method 2: CSS Selectors

CSS selectors give you precise control over exactly which element on the page to extract data from. Instead of relying on standardized meta tags, you point MiN8T at specific DOM elements using CSS selector syntax.

When to Use CSS Selectors

Configuring Variables

Each variable defines what to extract from the source page and where to apply it in your email:

  1. In the Data tab, click "Configure" to enter the variable editor.
  2. A default "URL" variable is pre-created (required — it applies to all links in the element).
  3. Click "+ Add Variable" to create additional variables.

For each variable, configure two rules:

External Rule (Source Page)

Tells MiN8T what to read from the external web page:

Internal Rules (Email Template)

Tells MiN8T where to put the extracted value in your email:

A single variable can target multiple internal rules. For example, a product URL variable could set both the button's href and the image's link wrapper.

Validating Selectors

Click "Check & Save" next to any variable to validate it against the live page. MiN8T fetches the URL and runs your selector, reporting:

Extracting with Selectors

Once your variables are configured and validated, click "Extract with Selectors". MiN8T fetches the page, runs all selectors, and applies the extracted values to the target blocks in your email. Relative URLs (images and links) are automatically resolved to absolute URLs.

!

CSS selectors depend on the target website's DOM structure. If the site redesigns, your selectors may break. Validate periodically and update selectors when you notice extraction failures.

4 Dynamic (JS-Rendered) Sites

Some websites render content with JavaScript after the initial HTML loads — single-page apps (React, Vue, Angular), sites with dynamic product carousels, or pages that lazy-load content. Standard HTML fetching sees an empty page because the content hasn't been rendered yet.

MiN8T handles this with a "Dynamic site" toggle in the Data tab. When enabled:

The dynamic extraction timeout is 15 seconds (vs. 10 seconds for static). If the page's JavaScript hasn't finished rendering within that window, some selectors may return empty results.

i

Dynamic site mode works with both OG tag extraction and CSS selectors. Toggle it on whenever you get empty results from a page you know has content — it likely renders with JavaScript.

5 The Data Tab

The Data tab appears in the property panel whenever you select a container, structure, or stripe that contains at least one image, text, heading, or button block. It's the central interface for all Smart Element operations.

Data Tab States

State A: Disconnected (empty)

Shows the message "Import data to auto-populate this element" with two options:

State B: Website page connected (OG tags)

Shows the extracted data preview: title, image, description, and price (if found). Mapping dropdowns let you reassign which text block gets which value. A "Refresh" button re-fetches the page. A "Configure" button opens the CSS selector variable editor for more control.

State C: CSS selectors configured

Shows the list of variables with their validation status. Each variable is expandable to reveal its external rule, internal rules, and optional transforms. The toolbar includes "Check & Save", "Extract with Selectors", and "Save Configuration" actions.

State D: AMP Data Source connected

Shows the connected source name, type badge, and endpoint URL. Available field names are displayed as copyable variable badges ({{title}}, {{price}}, etc.). An "Auto-map" button intelligently assigns fields to blocks. A height input controls the amp-list layout height.

6 Auto-Mapping & Variables

Auto-mapping is MiN8T's intelligence layer that matches data fields to email blocks without manual configuration. It works for both OG tag data and AMP Data Source fields.

How Auto-Map Works

When you click "Auto-map" (or when OG data arrives), MiN8T scans all blocks in the selected scope and matches them by type:

Block Type Matched Field Names What Gets Set
Text / Heading title, name, heading, text, description, label, subject Block text becomes {{fieldName}}
Image imgUrl, imageUrl, image, img, src, photo, thumbnail, picture Image source becomes {{fieldName}}
Button (URL) url, link, href, buttonUrl, cta, action Button link becomes {{fieldName}}
Button (text) buttonText, ctaText Button label becomes {{fieldName}}

Matching is case-insensitive and each field is used only once. If your data source has a field called title and your structure has a heading block and a text block, the heading gets title first.

Variable Badges

When connected to an AMP Data Source, each available field is shown as a badge in the Data tab. Click a badge to copy the mustache variable tag (e.g., {{price}}) to your clipboard. You can then paste it manually into any block's text, image URL, or button link.

Transforms (CSS Selector Method)

When using CSS selectors, each variable supports optional transforms that modify the extracted value before applying it:

✓

You don't need to configure transforms for most use cases. They're an advanced feature for cleaning up messy source data — like stripping currency symbols, truncating long descriptions, or reformatting numbers.

7 Save as Smart Element

Once you've connected a data source (website page or AMP Data Source) to a container or structure, saving it as a module preserves the data connection. In the element toolbar, the save button dynamically shows:

Saved Smart Elements appear in your Module Library with their data configuration intact. When you drag a Smart Element from the library into a new template, it comes pre-connected — the URL, selectors, variables, and mappings are all preserved.

What Gets Saved

The full SmartElementConfig is stored with the module:

i

Smart Elements are reusable across templates. Build a product card Smart Element once, save it, and drop it into every promotional email. The data connection stays live.

8 Connecting an AMP Data Source

For real-time dynamic content in AMP emails (Gmail, Yahoo, Mail.ru), Smart Elements integrate directly with MiN8T Data Sources. Instead of extracting data at design time, the email fetches data at open time.

How It Works

  1. Create a Data Source first (in the Data Sources dashboard). Upload JSON or connect a Google Sheet.
  2. In the editor, select a container, structure, or stripe.
  3. Open the Data tab and click "Connect AMP Data Source".
  4. A dropdown lists all active data sources in your account. Select one.
  5. The Data tab switches to the connected state showing the source name, field badges, and auto-map button.
  6. Click "Auto-map" to assign fields to blocks, or drag variable badges manually.
  7. Adjust the amp-list height (default 360px) to control the rendered area.

What Happens at Export

When you export the template (or send a test email), MiN8T's serializer wraps the Smart Element's HTML in an <amp-list> container:

<amp-list layout="fixed-height" height="360"
          width="auto"
          src="https://api.min8t.com/emailformdata/v1/list/{hash}/{name}">
  <template type="amp-mustache">
    <!-- Your product card HTML with {{title}}, {{price}}, etc. -->
  </template>
</amp-list>

The required AMP scripts (amp-list and amp-mustache) are automatically injected into the document head. No manual code editing required.

!

AMP Data Source smart elements only render dynamically in AMP-supporting email clients (Gmail, Yahoo, Mail.ru, FairEmail, AOL). In other clients, the standard HTML fallback is displayed — which contains the static content you designed in the editor.

9 Next Steps

Now that you understand Smart Elements, explore these related guides:

Security Notes

MiN8T applies several protections when extracting data from external URLs:

Last updated: April 2026. All details verified against MiN8T's actual codebase implementation.