# 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.

{% hint style="info" %}
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. 
{% endhint %}

***

### 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

{% hint style="info" %}
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.
{% endhint %}

{% hint style="warning" %}
If you wish to apply text styles (bold, italic, etc.) to one of the text block see Preserving text styles below.
{% endhint %}

#### 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**.

<figure><img src="/files/pzYSWpV7g3N3blThwqtv" alt=""><figcaption></figcaption></figure>

#### 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.

<figure><img src="/files/MI7z5fMGGPg29DDEZUlK" alt=""><figcaption></figcaption></figure>

#### 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

{% hint style="warning" %}
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.
{% endhint %}

#### 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.

<figure><img src="/files/9FVvyPHwYuwy6SaUUq37" alt=""><figcaption></figcaption></figure>

***

### 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.

<figure><img src="/files/sZXsV7MLcqS9njXQazWR" alt=""><figcaption></figcaption></figure>

#### 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.

<figure><img src="/files/UjvG6THZWNsY52mkw57c" alt="" width="375"><figcaption></figcaption></figure>

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.

<figure><img src="/files/0CkpNEWYZtfP35glg92s" alt="" width="375"><figcaption></figcaption></figure>

#### 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.

{% hint style="warning" %}
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.
{% endhint %}

#### 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).<br>

   <figure><img src="/files/mKPIbGAZ6xFsmdzHSD2u" alt="" width="375"><figcaption></figcaption></figure>
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.

<figure><img src="/files/IRrdyMBui8B0Z3GJavAl" alt="" width="375"><figcaption></figcaption></figure>

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.batch.com/guides-and-best-practices/message/email/content-and-media/how-to-auto-fill-content-blocks-from-a-url.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.