Setting Up Smart Containers

A smart container is a template element that consists of basic blocks (image, text, button), whose content is automatically pulled from a product page on a website or from a data feed: a JSON file, a spreadsheet, or an RSS feed.

Use smart containers when you need to quickly add product cards to an email without manually filling in each element.

🚧

Important

If the website uses OG (Open Graph) tags, eSputnik can automatically pull product information into the email.

If the data is not pulled from the website or you need to display additional product parameters, the required values can be added to existing cards manually.

The content is pulled by a request from our side to the product page, so if the site's protection blocks external requests, neither the automatic substitution nor a selector check returns data. Ask the site administrators to add the IP addresses 18.193.171.62, 3.66.101.249, and 52.16.166.210 to the allowlist.

This guide explains how to check whether content cards are automatically populated and how to configure them manually if necessary.

Automatic Data Substitution from the Website

With this method, you only need to copy the product URL and paste it into the container.

Adding a Smart Container to an Email

1. Go to Messages → Messages → Email.
2. Create a new email or open an existing one.

3. Open the Structures and Modules panel.

4. Go to the My Modules or General Modules tab (tab names may vary depending on your interface language and version).
5. Select the Product Cards category.

For this example, we will configure containers containing:

• product image
• product name
• price
• button

6. Drag the module into the email.

📘

Note

If the email already has styles configured, they will automatically apply to the added module.

Inserting Data from the Website

1. Open the product page and copy its URL.

2. In the smart container settings, open the Data tab and click Connect Website Page.
3. Paste the URL into the Link field and click Get.

eSputnik retrieves the available data and populates the container fields.

📘

Note

The button text is not changed automatically. Edit it manually if necessary.

Repeat steps 1–3 for each container.

📘

Note

There's no separate action for deleting a smart container. To remove its content, select the container level and use the content clearing option — the container itself stays in the template and becomes empty.

If you plan to use this module in other campaigns, update the module or save it as a new one.

Data from a Data Feed

A data feed is data available at a public link, such as a product list:

• JSON — an array of objects; the object keys become the feed fields;
• spreadsheet — a link to a CSV file, for example a CSV export of a Google Sheet shared by link. Each row is a separate item, and the headers in the first row are the feed fields;
• RSS — a link to an RSS feed.

The container is filled with the data of one feed item.

Connecting a Feed

1. In the smart container settings, open the Data tab and click Connect Data Feed.
2. In the Connected Data Sources list, select External Source URL and paste the feed link.
3. Click the Get Data icon next to the list.

Mapping Fields and Selecting an Item

After the data loads, the Mapping window opens. It lists the container variables, one for each block, such as Name for a text block.

1. For each variable, select a feed field from the list, such as title. If a field name is similar to the variable name, the editor selects it automatically, so check the selection.
2. Click Apply and Load Data.

3. In the Data preview window, select an item: Item 1, Item 2, and so on. To find an item, select a field and enter a value in the Search field.
4. Click Apply.

The data of the selected item appears in the container.

After the feed is connected, the Data tab has these buttons:

• Variables — the container variables. Each variable has a block (Apply Data to) and the place where the value goes (Import Data into), such as paragraph text or a button link (href). The + Item button adds a variable for another block.
• Mapping — change the feed field that goes into a variable.
• Data — select another feed item.

Adding Additional Parameters

This method provides more flexibility for customizing email content.

📘

This method requires basic HTML and CSS knowledge, including familiarity with CSS selectors and browser DevTools.

Use this method if you need to add non-standard product parameters, such as:

• discount amount
• color
• SKU
• country of origin
• promotion expiration date

To configure additional parameters, follow these steps:

1. Add a block to the container.
2. Create a variable.
3. Configure CSS selector matching rules.

Below is an example of adding additional discount information to a product card.

Adding a Block

1. Add a Text block to the container.

2. Select the block and open the code editor.

📘

Note

The code editor isn't limited to smart containers — you can open it for any selected block, container, structure, or stripe (or for the whole message if nothing is selected) to edit its HTML directly. It's organized into an HTML tab and separate tabs for default and custom CSS, plus a formatting tool that makes the code easier to read.

3. Add an HTML attribute, for example: class="Discount".

Creating Variables

1. In the container settings, click the Configuration icon.
2. Click +.
3. Add a new Element and select the value from the dropdown menu. In our example, this is a field for displaying an additional discount.
4. Specify:

• Variable name: Discount
• Variable value: discount

5. Save the configuration.

After that, a new Discount field will appear in the container settings.

CSS Selector Direction Rules

1. Open the product page in a browser.

📘

Note

This example demonstrates a basic way to inspect webpage elements using DevTools in Google Chrome for Windows. If you use another browser or operating system, refer to the documentation for inspecting elements using DevTools.

2. Open DevTools to inspect the page element: press Ctrl + Shift + I or F12.
3. Activate the element selection tool: press Ctrl + Shift + C or click the cursor icon in the upper-left corner of the DevTools panel.

4. Click the required element (for example, the discount value).

5. Copy the element's CSS selector.

6. In the smart container, open the Discount field and click Direction rules.
7. Paste the selector into the field.
8. Click Check Rule and Save.

If the rule is configured correctly, the value will be pulled from the product page.

📘

Note

Websites usually use standard CSS selector naming conventions. Therefore, smart container settings can often be reused for most pages that follow standard CSS practices.
However, some pages may contain custom selector names or non-standard attributes. In such cases, additional configuration or creating a new smart container may be required.

The steps for configuring a new container are similar to those described in the Adding Additional Parameters section. Variables and matching rules must be created separately for each element.

If you have any questions about configuring smart containers, contact support at [email protected].