While you create a new email template for newsletters, you often have to do the same routine actions. For instance, imagine you have a website where products are published. If you need to send an email about the promotion with a link to ten products from your site, you need to download ten pictures, product names, prices, brand names, and links to indicate them under the "Buy" button.

These downloaded elements are usually applied in the email several times, for example, the name of the product is used 3 times: in the field “product names”, for the title and alt-text of the picture of the product. The same goes for the link, we apply it to the button, the picture, the title, etc. So, in future new actions, you will again have to repeat the steps described above. What if there are not 5 products, but 50? It's a pain, isn't it?!

To reduce the loss of your time for performing routine operations, we created a new entity – a smart element that allows you to automate this process!

Smart Elements is a functionality designed by Stripo. It allows you to automate email production. This is a true time-saver for those who build multiple product cards and email digests. You configure them once and use them across numerous promo campaigns.

Also, it's important to know that you can apply smart elements for Stripes, Structures, and Containers.
​

For now, we have 2 ways to configure Smart Elements inside your email templates:

All you have to do is paste a link to your website, and Stripo by itself pulls the product image, product description, and product name into your promo emails.

No need for you to save and upload images, no need to copy and paste product descriptions, or add necessary URLs to buttons — we’re on it.
​
To use this method, we first need to find out if the site you want to download content from supports Open Graph tags.
If your site contains OG tags (Open Graph tags), you simply insert a link to the product and indicate where exactly in the email this or that information about the product should go. It will take you less than 5 minutes – just one time. The next time you use Smart Elements again, all you need to do is paste the product link without any configuration.

We need to go to the site from which you want to download product information using smart elements

If your website supports the OG tags, we’ve prepared a brief manual on how to configure smart elements in under 10 minutes. Please check this article.
​
​

There are two ways to activate the smart option:

1) Creating a smart-element manually:
For example, in the Stripo editor, we drop the structure from one container (at once, I will make a reservation: it’s up to you personally how many containers in the structure you need).
In the first container, I add the blocks necessary for me (Picture, two blocks, text, button). I do the “skeleton” of the product card.

Next, I select the container with the base blocks (for this, I click on the blue label “Container” from the bottom), select the “Data” tab in the sidebar, and click on the “Connect Website page” button to activate the Smart property.

In the "Link" field we should insert the URL link to our product. Here, you will find a link to the detailed instructions on how to configure smart elements step by step.

​2) Utilizing a smart element from the Stripo modules library:

While in the template, you can use Pre-build modules in which all smart elements are already activated.
​

You just need to go to the Structures&Modules section → General Modules, and in the sorting tab, select Product Cards.

Or you can use any of our prepared templates with smart elements.
You should use sorting by Feature and select Smart-Elements.

If you choose this option, the smart-elements will be activated by default, all that remains is to add the URL link in the same way as we saw in the example above.
​

Using this method, you need to set up the content once, in which the title of the product, picture, price, description, and button “Buy” will be arranged in the desired order and their appearance. Then add the variables, set the rules where to get the values and where to apply them, and that's all – the smart element is ready for use.
​

Let's look at an example of adding a new variable for the price.

​1. Follow the "Config" tab;
​

​
​2. Click on the "+" button, and give the variable's name. After that, click the "+Item" button and select the desired block. In our case, this is the new third block, which I added specifically for the price. It will be highlighted with a frame in the smart element. After that, we just need to click on the "Save Configuration" button.
​

​3. In order to add unique information from the site into the smart element, we just need to copy the CSS selector of it. In our case, we want to load the price, which means we need a price CSS selector.
​
To do this, open the site page with the product, right-click on any free field, and go to the inspect section. Next, click on the "Select an element in the page to inspect it" button and hover over the price. After this, the code that is responsible for the price will be highlighted, and you just need to right-click on the highlighted code, go to the
​"Copy section" → "Copy selector".
​

​4. Return to the editor, and in the smart-element settings, go to the Direction rule of the desired block, paste the copied information in the "Selector" section, and click "Check Rule and Save".
​

Thus, using smart elements, you can upload any information from your site to the email template, you just need to copy the selector and paste it to the desired block into the smart settings​.
​

To enhance your content creation process, you can now leverage AI to improve the text blocks within your smart modules. This tool helps refine and polish the text, ensuring that your content is clear, professional, and engaging.

Set Up the Smart Element: After configuring the smart element, navigate to the Settings panel or to the text block and click on the "Improve with AI" button to activate the tool:

Enter Your Suggestions: Simply type your ideas and click "Send query" to let AI refine your text:

​Additionally, the "Improve with AI" button is available for each text block within a module, which allows you to enhance or rewrite the text using AI.

AI lets you move away from time-consuming tasks like grammar corrections and focus more on creative aspects. It helps you design visually appealing templates and generate fresh ideas. By incorporating AI into your workflow, you enhance both the quality of your content and the efficiency of your process.

Besides a website page, smart elements can take data from an external Data Source. This fits when your products, articles or prices are already stored in one place: a JSON file, a Google Sheet or an RSS feed. You connect the source to a smart element once, match its fields with the blocks, and then choose which item to show in the email. No copying of names, images or links by hand.

Let's go through it with an example: we'll fill a product card with data from a JSON source.

1. Create a data source in your account.

In your account, go to the "Data" tab and click "Connect a Data Source". You can use JSON, Google Sheets, or RSS.

More about creating sources: What are the Data Sources? How to use it?

For our example, we create a source named "Products" and paste this JSON with 2 products:

Each object in the items list is one item, and its keys are the fields you'll match with the blocks later. A smart element shows one item at a time, so for our two-card module, one item holds both products. The keys of the second product end with "1".

2. Open the Data tab of your element.

In the editor, select the element you want to fill. It can be one of our prebuilt modules or a stripe, structure or container you've built yourself. In this example, we use the prebuilt Dual Product Display module.

Open the Data tab in the sidebar and click Connect Data Feed.

3. Choose your data source.

In the Connected Data Sources field, choose your source. Then click the Get Data icon next to the field.

Stripo loads the data and opens the Mapping window.

You can also choose External Source URL and paste a direct link to your file.

If there are no data sources in your account yet, only External Source URL will be available in this list.

4. Match the fields with the variables.

Mapping shows the variables of your element, one for each block. In our example, there are eight variables, four for each card. Your module and your file may look different.

Stripo matches fields with variables by name automatically. Check every row and fix it by hand if needed.

In our example, the fields are matched like this:

Click Apply and Load Data.

To go back to the source selection, click the cross in the top left corner. Your matching won't be saved.

5. Choose an item and apply it.

In Data Preview, choose Item 1. The module in the email shows both products right away: "Wireless Headphones" in the first card and "Pour-Over Kettle" in the second. Click Apply to finish.

With an external Data Source, you keep your content in one place and fill product cards and digests from it in a few clicks.

Thank you for taking the time to read our articles. We hope you will find this information helpful.

​If you have any additional questions, please email us at support@stripo.email.

We would be glad to talk with you.