Skip to main content

Custom HTML Block in Email editor

Use custom HTML for full design freedom, static or dynamic. Add code, apply placeholders, and populate your layout automatically by dragging in a URL.

Updated this week

Overview

The new Custom HTML Block in the Rule Editor is a major upgrade that gives you full control over how you fetch and display data from any webpage.

Previously, Rule could only extract:

  • Image

  • Title

  • Description

  • Link

With the new Custom HTML Block, you can now extract any available metadata — as long as the website provides it.

If the data exists on the page, the Custom HTML block can extract it.

Where to find the Custom HTML Block

  1. Open the email editor

  2. Look at the right-hand panel under “Elements”

  3. Drag the HTML block into your layout

  4. Drop it where you want the dynamic content to live

How to open the HTML editor

After you’ve added the HTML block to your template, click it once so it becomes selected.

On the right-hand panel, click:

Edit code → This opens the HTML editor where you can paste your custom snippet and add OG/GD placeholders.

This is what it looks like:

What data can be fetched?

The Custom HTML Block can read all metadata available on a webpage, including:

  • Product name

  • Price and original price

  • Discounts

  • Ratings

  • Availability

  • Product attributes

  • Custom vendor metadata (e.g., product:rule*)

  • Open Graph data

  • Schema.org structured data

If the website exposes metadata via:

  • Open Graph (OG)

  • Product metadata tags

  • Schema.org JSON-LD

  • Custom meta tags

…Rule can pull it in and populate your HTML automatically.

How it works

When you drag a URL onto a Custom HTML Block, Rule:

  1. Fetches the webpage metadata

  2. Parses it into a JSON structure

  3. Looks for placeholders in your HTML

  4. Fills in the correct values dynamically

You control the mapping using:

data-og-property="Target:Source"
data-schema-property="Target:Source"

This ensures predictable and flexible behavior.

Example HTML Block

<div style="text-align:center;font-family:Arial, sans-serif;">

  <a data-og-property="href:url">
    <img data-og-property="src:image;alt:title" style="max-width:70%;height:auto;">
  </a>

  <h2 data-og-property="textContent:title">Title placeholder</h2>

  <p data-og-property="textContent:content">Description placeholder</p>

  <p data-og-property="textContent:product.rulesalesprice">Price placeholder</p>

  <p data-schema-property="textContent:aggregateRating.ratingValue">Rating placeholder</p>

</div>

After dragging a URL into the editor, the block is automatically populated with:

  • the real product image

  • the real product name

  • description

  • price

  • rating

Requirements

For the Custom HTML Block to extract data, the webpage must include metadata in at least one of these formats:

  • Open Graph tags (og:title, og:image, etc.)

  • Product metadata (product:rulesalesprice, etc.)

  • Schema.org JSON-LD (offers, aggregateRating, etc.)

  • Custom meta tags (namespace:key format)

If the metadata is present → Rule can fetch it.

If not → a developer can easily add metadata to the site.

HTML sanitization & security

All Custom HTML is sanitized for security reasons.

When you save a Custom HTML block, the system automatically removes:

• Unsafe tags (e.g. <script>, <iframe>, <object>)

• Event handlers and JavaScript-based attributes (e.g. onclick, javascript:)

• Unsupported CSS properties

The backend sanitizer is the source of truth.

After saving, always review your content to ensure it renders as expected.

Best practices

• Use valid, well-formed HTML

• Avoid relying on advanced or layout-critical CSS

• Always test after saving — not only in preview

Summary

The new Custom HTML Block enables you to:

✔ Fetch any metadata from any webpage

✔ Build dynamic product tiles and article previews

✔ Paste external HTML widgets (e.g., HelloRetail, Flowbox)

✔ Reuse the same block for multiple products/URLs

✔ Design advanced layouts without any coding

This unlocks a completely new level of flexibility and customization inside Rule.

FAQ

1. Why does my HTML change automatically when I save?

Rule uses an HTML sanitizer to ensure all code is valid and safe.

If the sanitizer detects missing or invalid tags, it may:

  • add closing tags

  • fix nesting issues

  • remove unsafe code

If your layout changes unexpectedly, double-check that your HTML is properly structured before saving.

2. Why does the image not load after dragging a URL?

The most common reasons:

  • data-og-property="src:image" is missing

  • The webpage does not include og:image metadata

  • The URL redirects (some redirects strip metadata)

💡 Tip: Inspect the page and confirm it contains <meta property="og:image" ...>.

3. My title/description doesn’t update — why?

This happens if:

  • The page doesn’t provide the metadata key

  • The key name is spelled differently

  • You mapped to a key that doesn’t exist

Example:

data-og-property="textContent:title"

Requires that the page contains:

<meta property="og:title" content="...">

4. Why does only some data fill in but not all fields?

Because the page may not include all metadata values.

Rule can only fetch what exists on the page.

Example: Many sites have og:title and og:image, but no product price in metadata.

5. Why does my HTML look broken after saving?

This usually happens when:

  • tags are missing <div> / </div>

  • tags are nested incorrectly

  • HTML contains unsupported elements (like <script>)

The sanitizer attempts to fix these issues, but the result may not match your expectations.

💡 Always validate your HTML with an online validator before pasting it.

6. Why do I see extra <div> or <a> tags after saving?

This occurs when:

  • You replaced a tag incorrectly (e.g., <div> → <a>)

  • The sanitizer tries to reconstruct structure, adding new tags

To avoid this:

  • Modify HTML carefully

  • Do not change structural tags without updating corresponding closing tags

  • Re-paste fresh HTML if necessary

7. Can Rule fetch data if the website doesn’t have metadata?

No, the Custom HTML Block can only pull what exists in:

  • Open Graph tags

  • Product metadata (product:rule*)

  • Schema.org JSON-LD

  • Custom meta tags

If metadata is missing, a developer must add it to the website.

8. Can I use this with third-party widgets like HelloRetail and Flowbox?

Yes!

If those services provide:

  • a ready HTML snippet

  • or metadata on the page

…you can use it directly inside the Custom HTML Block.

No integration work needed.

9. Does this work with any website?

It works with any website that exposes metadata.

Some websites block scrapers or hide metadata behind scripts, these may not work.

10. What should I do if something still doesn’t work?

Send the following to support@rule.se

  • URL you dragged in

  • The HTML snippet you used

  • A screenshot of the result

  • What you expected to see

Our team will help diagnose whether the issue is:

  • missing metadata

  • incorrect mapping

  • sanitizer behavior

  • or unsupported HTML

Did this answer your question?