Login

Security and Compliance

Integration

Website Integration

Building Smart Containers

A smart container is an email element, eg. a product card, that consists of basic blocks (image, text, button) with data that is automatically transferred from your site. 

To set up the smart container, you need to specify:

1) email element selectors into which you need to substitute data from the site (internal settings)

2) site element selectors from which you need to substitute data in the email (external settings).

After setting up, you can simply insert a link to the product card into the container, and the system will insert the relevant data into the product card elements.

Example of Building Smart Container

1. Create an email or open an existing one.

2. Drop product card from Advanced modules or your saved modules into the email body. The structure can contain any number of containers, you need to set up only one. Then you can just copy it.

Drop product card

3. Fill the card with content from your site in the following order:

  • Image
  • Product Name
  • Price
  • Button

Note

We recommend you add relevant data from your site to the block at the beginning of the settings. This will make the substitution of selectors easier.

4. Click on the Container label at the top of the card and select the Data -> Smart  -> Configuration tab.

Configuration

5. Proceed to set up internal matching rules.

Internal Matching Rules

Internal Matching Rules

Click on + to add the necessary parameters to the container.

Select from the dropdown list: 

  • image, 
  • name, 
  • price.

Add parameters

Image

1. Open the email code by clicking on the code editor to see which selector has the image in the block.

Code editor

The default selector is img:

Default selector

2. Add a class to the code for convenience:

Class

3. Go to the image settings and insert the selector into the appropriate field:

Image settings

4. Each image also has an attribute (src or html). Write it down in the appropriate field:

Attribute

Configure other elements similarly.

Name

1. Copy the name selector in the email code and enter it to CSS selector field.

Product name

You don’t need to set the attribute for Name and other text fields.

2. Specify 2 selectors with title and alt attributes:

Title & Alt

Price

1. Copy the selector in the template code and paste it into the CSS selector of element 1 field:

Price

URL

Paste URL selector (by default it is a) and its attribute (by default it is href):

URL

***

Check the result on the Appearance tab — you should see name, price and image parameters from your container:

Check the result

Setting up selectors in the email is now complete. Let's move on to collecting data from the site.

External Matching Rules

1. Open the product page from which you want to transfer data.

2. Open the page code (F12 for Google Chromе). Select the desired element and copy its selector and attribute.

External Matching Rules

Image

Go to your smart container -> image settings -> External tab and enter the image selector and attribute in the corresponding fields.

Image

Note

You can check the correctness of your settings after filing in each container element. For this, enter the URL of any product card from your site to the Link field and click Get values. You will see data from the website in your smart element if the settings are correct.

Get values

Name

Add the selector to get name and alternative image name:

Name

Price

Paste price selector, in our case, it is span.a-offscreen

Price selector

Write it in the block:

span.a-offscreen

You can add one more selector to get the currency from the site, or specify it in the email code.

Check the result

To check the correctness of the settings, copy your smart container into the adjacent 2 containers. To check that they work, paste links to other product cards:

Check the result

Useful Tips

1. Set up at least one smart container with blocks for all the data you might need. You could easily remove unnecessary blocks (for the old price, for example) when preparing a campaign.
2. If you want to copy the structure to another email, use the JSON editor.

JSON editor

Copy all the code from this section and then paste it into the structure code in another email.

3. Save differently designed containers to your library and use them in any template.

4. You can make any card from one configured container: with three blocks in a row, four blocks in a column, etc. So you don’t need to create a a whole card from scratch, just copy and paste the contents of the smart block.

5. You can also set up smart containers for text blocks, for example, blog articles.

Any Questions?
We’re always happy to help!
Discount services
Schedule a Call
Fill in the form, and our specialists will call you back as soon as possible.
Discount services
Chat Support
We’re waiting for your questions!
Discount services
Email
Contact the support team