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!
What is a smart element?
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.
How to use the smart elements?
For now, we have 2 ways to configure Smart Elements inside your email templates:
Automatic method: pulling content directly from a website page;
Manual method: creating custom variables and rules using selectors.
• Automatic method:
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.
How to check if your site contains OG tags?
We need to go to the site from which you want to download product information using smart elements
right-click on your website;
Go to Inspect tab
click Ctrl+F on Windows, or CMD+F on macOS;
enter “og:”;
if you find any in the code, then your site does support it.
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.
How can we activate the smart option and where to paste the link?
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.
• The manual method:
Important to note: this method requires basic technical skills.
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.
First, let's create a product card;
To do this, we just need to activate the smart element and add an image (for picture), text (name), and button;
After that, we insert a link to the product and receive a product card without a price;
Next step, let's prepare a new block text with a price for the product;
We just need to add a block text to our smart element;
Next, I'll list a few steps you need to take to add a new variable with unique information from your website:
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.
How to Utilize AI for Smart Modules?
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.
How to use it?
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.
What can AI help with?
Fixing grammar for professionalism:
Adjusting text length for clarity or depth;
Translating for a global reach;
Changing tone of voice (formal or casual);
Explaining as an expert;
Adding emojis for engagement.
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.
How to fill smart elements from a Data Source?
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 Google Sheet, an RSS feed, or a JSON file. 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 names, images, or links by hand.
Where to create a Data Source?
In your account, go to the Data tab and click Create a Data Source.
Give the source a name. Then, in Data Settings, choose the type of source: Google Sheets, Public RSS, or JSON.
Below, we explain what Google Sheets and RSS are and how to connect them. After that, we’ll show how to connect a source to a smart element with a JSON example.
Google Sheets:
What is it?
Google Sheets is Google’s online spreadsheet. Many teams already keep their product lists, prices, or content plans there. If you’re one of them, you don’t need to copy anything into Stripo: just connect the table, and Stripo will take the data from it.
How does it work in Stripo?
Stripo reads your table row by row. Each row becomes one item you can show in your email, and each column becomes a detail of that item, such as a title, a description, or an image.
So if you keep a list of articles or products in a table, each row turns into a ready card for your email. You just choose which one to show.
How to prepare your table?
Put the headers in the first row, for example, title, text, image.
Name the columns with one word in Latin letters. This way, they’re easier to match with the blocks in your email.
Fill in one row for each item.
How to connect?
In Data Settings, open the Google Sheets tab, click Sign in with Google, and allow Stripo access to your tables.
Choose your table. Stripo connects to its first sheet, but you can switch to another one.
Stripo shows what it found in the table: the columns and rows. Check that everything is correct. If you don’t need a column in the email, uncheck it in Include in Import. Then click Connect a Sheet.
Important to note: Stripo only reads your table and can’t change anything in it.
For a more detailed setup, see Google Sheets. How to Pull Data from Google Sheets into Emails?
RSS:
What is RSS?
RSS is a way websites share their new posts automatically. Think of it as a subscription: instead of checking a blog every day for updates, you get the latest posts in one list, and new ones appear there by themselves.
Most blogs, news sites, YouTube channels and podcasts have RSS, even if you’ve never noticed it.
How does it work in Stripo?
You give Stripo the RSS link of a site. Stripo takes the latest posts from it, and each post becomes an item you can show in your email: with its headline, link, publication date and, on some sites, an image.
So if you send a weekly digest of your blog, you don’t need to copy headlines and links by hand. Connect your blog’s RSS once, and choose which post goes into the email.
Where to find the RSS link?
Most platforms create a feed automatically: WordPress, Blogger, Substack, Medium, YouTube channels and podcast services. Usually, the link is your site’s address with /feed or /rss at the end, for example, yoursite.com/feed. If you’re not sure, ask the person who manages your site.
How to connect?
In Data Settings, open the Public RSS tab, paste the link, and click Connect RSS Feed.
Stripo shows what it found in the feed: the headline, link, date and other details of the two latest posts. This way, you can see what each field contains before you connect it.
Most feeds have these fields:title: the headline of the post;link: the link to the post;description: a short summary of the post;pubDate: the publication date.
Some feeds also include
author,category,guid(a technical ID of the post) andenclosure(an attached image or audio file).
Uncheck the details you don’t need and click Connect Feed.
Important to note: each site decides what to include in its feed. Some feeds have images, and some don’t. Before using someone else’s feed in your emails, check its terms of use.
How to connect a Data Source to a smart element?
Whichever source you choose, Stripo turns it into a list of items. That’s why they all connect to a smart element in the same way: in the Data tab, you choose the source, match the fields and pick an item.
Let’s go through it with JSON: we’ll fill a product card with data from a JSON source. With Google Sheets and RSS, the steps are the same.
1. Create a JSON source.
JSON is a text file with your data, for example, a product list exported from your store. You paste its code into the source settings.
In Data Settings, open the JSON tab. For our example, we create a source named “Products” and paste this JSON with 2 products:
{
"items": [
{
"title": "Wireless Headphones",
"description": "Noise cancelling, up to 40 hours of battery",
"price": "199 USD",
"imageUrl": "https://picsum.photos/seed/aurora/600/400",
"title1": "Pour-Over Kettle",
"description1": "Stainless steel kettle with a thin spout",
"price1": "45 USD",
"imageUrl1": "https://picsum.photos/seed/brew/600/400"
}
]
}
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 email template, 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:
Variable | First card | Second card |
Image | imageUrl | imageUrl1 |
Text | description | description1 |
Title | title | title1 |
Price | price | price1 |
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.
What can you do after you connect the source?
Show another item: click Preview, choose a different item and click Apply.
Change the matching: click Mapping. It opens with your current settings.
Edit the data by hand: change the text in its field, or click Edit on an image.
Disconnect the source: click the red icon next to the Data Source field. The Data tab goes back to the start screen.
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.