How to auto-fill content blocks from a URL?

The email editor lets you connect a Container, Structure, or Stripe to a webpage URL so that its content blocks (image, title, description, and links) are automatically populated with real data from that page. This is especially useful for newsletters featuring articles or promotional emails showcasing products, where you would otherwise copy and paste the same information repeatedly.

This feature works best on websites that expose Open Graph (OG) meta tags (og:title, og:image, og:description) which most modern CMS platforms (Shopify, WordPress, etc.) include by default.

---

Standard usage: auto-fill from a URL

Step 1: Build your skeleton

In the email editor, add a Container, Structure, or Stripe to your layout. Inside it, add the blocks that will make up your product or article card. A typical setup includes:

• an Image block

• one or two Text blocks (for the title and description)

• optionally, a Button block

The content of your blocks does not matter at this stage: it is just a skeleton. The auto-fill will overwrite it with real data from the URL.

If you wish to apply text styles (bold, italic, etc.) to one of the text block see Preserving text styles below.

Step 2: Open the Data tab

Click on the element you want to connect (Container, Structure, or Stripe). In the settings panel on the right, open the Data tab.

Click Connect Website Page.

Step 3: Paste your URL and click "Get"

A Link field appears. Paste the full URL of the article or product page you want to pull data from, then click the Get button.

Step 4: Review the auto-filled content

The editor fetches the page's OG tags and automatically fills in:

• The image block → with the page's og:image

• The first text block → with the og:title

• The second text block → with the og:description

• The image and button links → with the page URL you entered

If the website does not include OG meta tags, the auto-fill will not work. In that case, refer to the Advanced usage section below.

Recommended: save as a module for reuse

Once your element is set up and styled, we strongly recommend saving it as a module. This way, for future campaigns, you simply drop the module into your email, open the Data tab, update the URL, and click Get with no redesign needed.

---

Advanced usage 1: map specific fields with CSS selectors

If the website you are pulling from does not use OG tags or if you want to map specific fields such as a price or a custom attribute you can configure the mapping manually using CSS selectors.

Step 1: Find the CSS selector of the element you want to extract

Open the target webpage in your browser. Right-click on the element you want to pull (e.g. the product name, image, or price) and select Inspect to open the browser developer tools.

In the HTML panel, identify the element. Right-click on it and choose Copy → Copy selector to get its CSS selector.

Step 2: Configure the mapping

In the email editor, select your element and open the Data tab. After clicking Connect Website Page and entering your URL, click the ⚙️ Configuration icon next to the link field to access the advanced configuration.

You can first choose a name for the field you plan to add and fill it in Variable Name and Variable.

Then you can click on the "+" and choose into which Block your Variable data should be inserted.

Then you can save this configuration, and retrieve your Variable in the panel and click on Direction Rule and fill the Selector part with one you obtained above. You can simplify the Selector, but it must always refer to one and only one element of your website. Click on Check Rule and Save to save and your Email block should be automatically filled with the right information.

Step 3: Validate and adjust

Review the populated content. If a field is empty or incorrect, refine the CSS selector — try a more specific or more generic path depending on the result.

CSS selectors can break if the website updates its HTML structure. If your element stops populating correctly after a website update, revisit the selector configuration.

Advance usage 2: Preserving text styles (bold, italic)

When you apply formatting such as bold or italic to a text block, the editor wraps the text in an HTML tag (<strong> for bold, <em> for italic). If you target the parent text block in your configuration, the raw text is injected without that inner tag, and your formatting is lost.

To keep your styles intact:

1. Style your text blocks (bold, italic, etc.) before opening the Configuration panel.

2. In the Configuration panel, click on the field you want to map (e.g. your title).

   
3. Look at the parent element shown in the code preview — identify the closest HTML tag wrapping your styled text (e.g. <em> for italic).

4. Select that specific inner element as the target, not the parent block.

1. Save the configuration, then paste your URL and click Get.