Custom HTML Block

The Custom HTML block allows you to use your own HTML directly in Rule’s email editor. With it, you can create advanced and flexible layout designs.

You can also automatically pull information from a webpage, such as product names, prices, images, and descriptions, so that content updates instantly when you drag in a URL.

⚠️ Note: This is an advanced feature and requires basic HTML knowledge, but it offers great flexibility and control over your design.

1. What can you do with the Custom HTML block?

With the Custom HTML block, you can:

Paste your own HTML for full design freedom.
Automatically populate content with data from a webpage.
Create dynamic product modules, article previews, or third-party widgets (e.g., HelloRetail, Flowbox, Trustpilot).
Reuse the same block for different products or URLs without rebuilding it.

Examples of content that can be pulled from webpages:

Product name, price, and original price
Discount information
Product ratings and reviews
Availability/stock status
Other metadata available on the page

Example HTML Block:

<div style="text-align:center;font-family:Arial, sans-serif;line-height:1.4;">    <!-- Product image (from og:image) -->   <a data-og-property="href:url">     <img       src="https://via.placeholder.com/1"       alt="Product Image"       data-og-property="src:image"       style="width:70%;max-width:100%;height:auto;margin:0 auto 16px;"     />   </a>    <!-- Product title -->   <h2     data-og-property="textContent:title"     style="font-size:24px;margin:0 0 8px;"   ></h2>    <!-- Description -->   <p     data-og-property="textContent:content"     style="font-size:14px;margin:0 0 8px;"   ></p>  </div>

2. How it works

Drag a Custom HTML block into your email template.
Click on the block and select Edit code in the right-hand panel.
Paste your HTML code and add placeholders for the values you want to populate automatically:
⚠️ Only necessary if you want to pull content from a webpage.
Drag a product or article URL onto the block using drag & drop:

Rule fetches metadata from the page and automatically fills your placeholders (if you used the example block above).

Example: Drag in a product URL and the block can automatically display the product image, title, price, and rating.

Note: The webpage must support Open Graph (og:) tags. If you’re unsure how this works, read more here.

3. Common use cases

Product modules:
Automatically display image, price, discount, reviews, and attributes.

Article previews:
Show headline, summary, publication date, and featured image.

Third-party widgets:
Integrate HTML widgets from HelloRetail, Flowbox, Trustpilot, or Shopify.

Custom sections:
Create branded modules and fully customized layouts.

4. Tips

If the page has metadata in Open Graph, Schema.org, or product meta tags, the block can pull it automatically.
Combine multiple blocks to create advanced layouts.
This block is perfect for dynamic content that will be reused across campaigns.

5. Summary

The Custom HTML block gives you:

Full design freedom with HTML
Automatically updated content from webpages
The ability to reuse the same block for multiple products/URLs
Easy integration of third-party widgets

This is an advanced but highly flexible tool that allows you to create powerful, dynamic email campaigns without development work.

6. Questions or support

If you have questions or need help with the Custom HTML block, you can contact us at:

📧 support@rule.se

Campaign Editor - Create your campaign