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.

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.

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

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

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