11 October 2017

Smart Elements Reduce the Time Spent on Creating Similar Emails by Automating the Process

Build emails with smart elements
Table of contents
  1. So, what is a smart element?
  2. Example of creating a smart container for a product card
  3. Variable URL
  4. Variable for Product picture
  5. Variables for Product name and Price
1.
So, what is a smart element?

Creating a new email template for newsletters, you often have to do the same actions. For example, imagine: you have a website where products are published. If you need to send an email about the promotion with a link to 5 products from your site, you need to download 5 pictures, product names, their prices, and links to indicate them under the “Buy” button.

These downloaded elements are usually applied in the letter several times, for example, the name of the goods is used 3 times: in the field “product names”, for title and alt-text of the picture of the goods. The same goes for the link, we apply it for the button, for the picture, for the title, etc. And tomorrow the new action and again it is necessary to repeat the steps described above. And what if the goods are not 5 but 50? It’s a pain, is not it?!

In order 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! Although, to be honest, in the beginning, you will have to “sweat” a bit, so that the magic happens.

So, what is a smart element?

A smart element is a structure, container, or strip, in which all the same basic blocks are present, like Picture, Text, Button and so on, but for them, the option of obtaining data via variables from external sources is activated. You once set up the content, in which the title of the product, picture, price, description, and button “Buy” will be arranged in the desired order, as well as their appearance. Then add the variables, set the rules where to get the values and where to apply them and everything – the smart element is ready for use. You just need to specify a link to the product page on the site and the system will “pull” the necessary data from it and apply it to the specified places of your letter. Ultimately, by creating 5 cards of the goods you save time significantly, indicating only 5 different links – the rest of the system does it yourself!

Additionally, it is worth mentioning that our system allows clipping the product's name to, for instance, show just the first 50 symbols of the product's name that contains 150 characters. 

To do it, you need to:

  • insert the combination, given below, in the "Modifier" field
(.{0,50})(.{0,}) 

Where 50 stands for the number of characters you want to show. Replace "50" with any number you like;

  • enter " $1 " combination in the "Replacement" field.

Stripo_Smart-Elements_Entering Info in Modifier1 Field

The products prices in emails now look exactly as they are shown on your website.

Example of creating a smart container for a product card

For example, let’s consider creating a product card located on the Boohoo website. For a card from this site, I need a picture of the product, its name and price.

In the Stripo editor, we drop the structure from two containers (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 to me (Picture, two blocks Text, Button) – I do the “skeleton” of the goods card.

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

smart-elements-email

As a result, a visual designer will be displayed instead of a button, in which we can:

  • configure all possible rules for obtaining values, applying them through variables to the desired blocks inside my letter. To do this, we need the “Configuration” tab;
  • view and manually adjust (if desired) the received values of the configured variables from the site in the “Appearance” tab.

And so, proceed to the configuration – add variables. For the convenience of use, by clicking on the icon for adding a variable, the list of the most popular ones, which most often can be for the Goods / Products or for the Blog Entries, will be displayed. By the way, please note that as soon as we activate the smart property for any object, by default a variable URL is created, which can not be deleted.

smart-blocks-stripo-email

Since I planned to make a card with a picture, name and price, I add the variables Name, Image, Price from the Product section. Each added variable creates its own configuration tab. I have four in total.

smart-goods-stripo

Next, you need to configure the rules for obtaining the values for these variables and their application in our smart element. To do this, go to the control of Matching rules, which consists of two tabs:

  • Internal rules. Here we will set the rules where exactly we need to apply the already obtained values of the variables in our smart element$
  • External rules. It configures the rules, from where you need to get the values of variables from the site we need. Also, there are controls that allow you to convert the value obtained through regular expressions or by applying various types of formatting.

The rules for each tab are configured through the standard HTML element search mechanism through CSS selectors and Attributes, which can be read in more detail here.

Since this process requires the certain knowledge of the device sites, let’s look at it in more detail for each variable from my example.

Variable URL

This variable has a “Dynamic site” control, which is turned off by default. If the site from which you want to get values for any of the smart element variables is dynamic – check this box by putting the checkbox opposite.

A dynamic site is a website whose content is created from the CLIENT side based on the javascript, i.e. receiving HTML pages it is impossible to find necessary elements there without performing all the required scripts before. For example, the price is considered on the fly, etc.

The site from which I’m going to get the values is not dynamic, so I skip the control and go right to the Matching rules.

Since I need to have a link in the smart element to the site by clicking on the “Buy” button and the product image, in the “Internal rules” tab I prescribe the rule that the value of the variable be set to all the elements of ‘a’ (CSS selector field) in attribute ‘href’ (the Attribute field).

smart-cards-email

Note that for this variable, the “External Rules” tab is not available, since in fact the link to the site itself is the source of data retrieval.

Variable for Product picture

Let’s start with the rule of getting the product image for the “External Rule” tab. To do this, open the site page with the product, point the cursor at the picture, right-click to open the context menu and select the item “Inspect element” (note that this menu item can be called differently on your computer, for example, “Inspect”). As a result, the console opens, in which we will see CSS selectors with attributes.

email-layout-automation-code

In my case, the rule for obtaining the image was as follows:

CSS selector: div # product-primary-image.product-primary-image.js-product-primary-image a
Attribute: href

We set them in the appropriate fields of the “External Rules” tab. For the “Internal rules” tab, I specify:

CSS selector: .esd-block-image .adapt-img
Attribute: src

Due to this rule, the resulting image value will be applied to the ‘src’ attribute, which is located in the “Picture” block.

Variables for Product name and Price

In fact, the principle of action here is the same as we have already done for the picture. Only there is some trick that I want to share with you.

As you remember, I added two “Text” blocks to our smart element. The first one I’ll use for the title, and the second one for the price. And the content for the first block will be filled only from the site, and for the block with the price: some content will be taken from the site, and some will be a constant. For example, like this:

smart-block-stripo

In the second text block, the selected word “Price:” will be a constant, and the text will be replaced with the value obtained from the site.

In order for our smart element to distinguish between these blocks (which of the text fields we want to make for the title and which one for the price), and also to understand where to use the received content, we need to add each of them a unique class in the HTML code editor. In my case, these will be the esd-p-name and esd-p-price classes.

HTML-code-editor

Now we fill in each variable with alternate internal and external rules for controlling Matching rules.

In my case,

For the variable Name

  • internal rules

CSS selector: .esd-block-text.esd-p-name
Attribute: empty
CSS-selector 2: .esd-block-image a img
Attribute: title
CSS-selector 3: .esd-block-image a img
Attribute: alt

  • external rules:

CSS selector: h1.product-name.js-product-name
Attribute: empty

For the variable Price

  • internal rules

CSS selector: .esd-p-price
Attribute: empty

  • external rules:

CSS selector: span[itemprop=price]
Attribute: empty

That’s all. The most difficult thing behind! Now it’s up to the little thing to get the values from a link from an external site. To do this, simply paste the link into the Link field and wait a few seconds to display the received data.

smart-blocks-settings-stripo

Here is it – the smart element has done its work! The template displays the name, picture and price of the product from our website. Now it remains a little to edit the styles of the goods card. Look what I got!

goods-in-email-layout-stripo

In the “Appearance” tab we see all the data that is displayed in our template, then we can correct them without worrying that this will somehow affect the formatting styles.

email-goods-blocks-layout-stripo

Since our smart element is already configured, to create a similar product card from another page of this site, you just need to specify another path in the Link field and the product card will be filled with new data automatically, and your time will be significantly saved!

girls-in-email-pictures

To finish this article, we’ve prepared a nice bonus for you – within all of our free templates you can find already prepared smart elements. All of them have internal rules set up, so to use them you just need to specify external rules in accordance with your site. Since external rules are standard for most sites, we will soon add them as examples to the system for their automatic selection.

Was this article helpful?
Tell us your thoughts
Thanks for your feedback!
56 comments
James Gillis 13 hours ago
Is it possible to pull data from metadata other than OG? eg. if I wanted to pull the content from how would I go about doing that?
Dương Hồng Phúc 11 months ago
Hi, is it smart element work with woo-commerce? I cant import my product with smart elements. Here the link: https://droppii.vn/san-pham/nuoc-uong-ho-tro-tieu-duong-more/ I want to take Name, price, description & link. Thanks a lot
Dương Hồng Phúc 11 months ago
Although my website has "og:" tag, but it cannot load the element
Stripo Team 11 months ago
Hello, We opened the link you provided us and the site doesn't load completely. On the screenshot, we caught errors in the console - https://prnt.sc/noRlBcdyhj3r. We tried to connect different Internet connections and also enabled the VPN service. However, it didn’t help. That’s why our system cannot pull data from your site since it does not load to the end for us. Maybe you have another website example?
Arnaud BENEZ 1 year ago
Hello, there is a way to target the href attribute from a bracket? I use the MSO compatibility for my buttons and when i use the variables for adding my url into my html elements (image, link and buttons), that doesn't work for the mso button. Here is the line in question: [..]
Hanna Kuznietsova 1 year ago
Hello, Your line, "Here is the line in question: [..] " If this is supposed to be a link, it doesn', and werk, we can't click on it, sorry. Code for MSO buttons is an HTML comment, and as far as I know, Smart Elements does not work with HTML comments, they handle tags only. Would you provide us with a link to your product so we can check if it is compatible with the Smart Elements option? Thank you.
Arnaud BENEZ 1 year ago
Arnaud BENEZ 1 year ago
from a v:roundrect brack. Sorry I encounter some difficulties :'(
Phúc Dương 1 year ago
Hello, please help pulling main photo, price, name from: https://selly.vn/product/6225745b9da17eda62fb290e I have tried many ways with instruction but it was not worked
Alexander Zelenskiy 1 year ago
Hello, I want to bring to your attention that smart elements aren't the universal solution for all possible cases. Unfortunately, some sites don't allow get information from them using smart containers, as it happens with this site I assume.
Jose Basto 2 years ago
Hello, please help pulling main photo, price and name from: https://loja.misterpc.pt/DELL-LATITUDE-E6330-13.3-i5-3320m-6GB-120GB-SSD-OFERTA-DE-MALA Thanks.
Aleksandr Zelenskiy 2 years ago
Hello, You can try to get the image, name, and price via the next external attributes: - image CSS selector meta[property='og:image'] Attribute content https://skr.sh/s8mMuXxz6cF - name CSS selector .title-product https://skr.sh/s8mWqjDYnJ5 - price CSS selector .price-new https://skr.sh/s8msNx9lVA6
АромаАп Парфюмерия 2 years ago
Добрый день! Какие данные нужны, чтобы вытянуть картинку(основное фото), цену и название с конкретным объемом со страницы подобного типа https://aromaup.ru/parfyumeriya/muzhskie-duhi/banana-republic-wildblue-noir/ ? Заранее спасибо
Aleksandr Zelenskiy 2 years ago
Добрый день. С данного сайта получилось извлечь картинку, цену и название используя следующие внешние селекторы: .ty-product-block-title для названия - http://prntscr.com/117725t meta[itemprop="price"] и content атрибут для цены - http://prntscr.com/11771un meta[property="og:image"] и content атрибут для картинки - http://prntscr.com/11772iw Пожалуйста, обратите внимание что данный сайт использует изображения в формате webp. Они могут не отображаться в некоторых почтовых сервисам. Мы используем jpg, png и gif изображения как наиболее кросс-платформенные.
АромаАп Парфюмерия 2 years ago
Александр, мы сменили фото на формат jpg. Помогите, пожалуйста, еще с парой моментов. 1 - https://prnt.sc/117chj6 вы можете указать параметры для получения этого фото? А то мы очень тяжелое фото детализированное получили пердыдущим способом. 2. Как получить текст с объемом отсюда https://prnt.sc/117ckt3 ?Именно от первой строки(вариация товара с объемом) в карточке
Aleksandr Zelenskiy 2 years ago
1. Насколько я могу судить, картинка с меньшим разрешением на данном сайте не содержит каких-то уникальных классов. Классы использующиеся для изображении применяются на странице множество раз - http://prntscr.com/117ded6. Поэтому будет сложно получить значение именно из нужного тега. Если тег данной картинки будет содержать какой-то уникальный класс (не повторяющийся на странице) или ID это может помочь. 2. Можно попробовать использовать .ty-product-options-content > a > strong селектор Однако, как я понимаю тут похожая ситуация с первым пунктом, т.к. для данного элемента не используются уникальные классы и селекторы получают все значения доступные для данного класса - http://prntscr.com/117djoz
АромаАп Парфюмерия 2 years ago
Спасибо за помощь! Видимо, придется в отдельном формате фото выводить под это дело
Владимир Трепак 3 years ago
День добрый. Помогите пожалуйста с селекторами для картинки. Пробовал селекторы в контейнере с картинкой не работает. https://iherb.in.ua/houston-enzymes-trienza-90-kapsul.html
Aleksandr Zelenskiy 3 years ago
Добрый день. По данной ссылке удалось получить картинку используя следующие CSS селекторы: внутренний .adapt-img и атрибут src http://prntscr.com/10ou3ms внешний .imagezoom и атрибут href http://prntscr.com/10ou6g8
Александр Бондаренко 3 years ago
Добрый день! Вот есть товар https://fitomarket.com.ua/pravenor-forte-kaps-60 . Атрибут href, а CSS-селектор какой использовать?
Ruslan Trepukhalov 3 years ago
Здравствуйте. Для изображение можете использовать: CSS селектор: div.main-imagemain-image-wrapper > a > img Атрибут: src
Роман Харьков 3 years ago
Здраствуйте. Помогите с селекторами https://pro.auto/katalog/tjagachi/4x2/man-tga-18-390-id-13076/ . И еще вопрос: Можно ли как-нибудь автоматизировать. Чтобы данные брались не из товарной карточки, а со страницы с каталогом, чтобы в рассылку не попадали проданные товары?
Aleksandr Zelenskiy 3 years ago
Добрый день. Используя .vehicleName .priceIn .vehicleSpecifications внешние селекторы удалось получить название товара, цену и его описание. Насколько я могу судить, используя смарт-элементы получить картинки с данного сайта не получится. По поводу вашего вопроса об автоматизации. Могли бы вы уточнить адрес страницы с которой необходимо получить данные? Спасибо.
Daniel Herenyi 3 years ago
Подскажите какие селекторы нужно указать для названия товара и фото Для карточки товара https://kosmetika-proff.ru/catalog/detail/modeliruyushchiy_krem_filler_dlya_gub/
Aleksandr Zelenskiy 3 years ago
Добрый день. Название товара и фото с данного сайта получилось "подтянуть" используя следующие внешние селекторы: h1[itemprop='name'] для названия - http://prntscr.com/uprxrk а также .img-target и атрибут src для фото. Пожалуйста, обратите внимание что для фото понадобится использование модификатора /upload/ и замены https://kosmetika-proff.ru/upload/ http://prntscr.com/uprzxq
Daniel Herenyi 3 years ago
Благодарю за опаеративный ответ. Очень помогли. По аналогии попробовал добавить цену и старую цену.Почемуто и то и другое задваивается. https://yadi.sk/i/dgqsms4ZYUGfjA
Daniel Herenyi 3 years ago
Для старой цены указывал внешний селектор - s А для цены - span.price
Aleksandr Zelenskiy 3 years ago
Чтобы избежать "задваивания", можно попробовать использовать следующие внешние селекторы. Для цены: meta[itemprop='price'] и атрибут content https://prnt.sc/upt347 Для старой цены: .element-price-price-old.x-element-price-price-old http://prntscr.com/upt49z
Daniel Herenyi 3 years ago
Спасибо!!!
Татьяна NSP 3 years ago
Добрый день! А получится использовать эмейл рассылку с подхватом картинок и цен для сайта https://nspdoma.com.ua/colloidal-silver.php
Ruslan Trepukhalov 3 years ago
Добрый день. Напишите пожалуйста к нам в службу поддержки и мы поможем настроить Вам Smart-Container
НоваФлора Магазин 3 years ago
Добрый день. Никак не могу подобрать селекторы для картинок и стоимости для https://novaflora.com.ua/tyulpan-double-beauty-of-apeldoorn Заранее благодарен за помощь
Aleksandr Zelenskiy 3 years ago
Добрый день. Чтобы "подтянуть" картинку и стоимость вы можете попробовать использовать следующие внешние селекторы: meta[property='og:image'] с атрибутом content http://prntscr.com/t920mq #main-product-wrapper > div.row.product-info-row > div.col-md-5.col-product-info > div.product_header_container.clearfix > div > div:nth-child(3) > div > span без атрибута http://prntscr.com/t920v3
Sergey Stoyanov 3 years ago
День добрый. Помогите пожалуйста с селекторами для картинки. Перебрал селекторы всех в контейнере с картинкой ничего не работает. https://mitsudiesel.su/catalog/diesel/ad-30-t400/ Спасибо.
Aleksandr Zelenskiy 3 years ago
Добрый день. Для картинок на приведенном сайте используются относительные ссылки вместо абсолютных, поэтому потребуется использовать модификатор и следующий внешний CSS селектор: .wrp_img img атрибут src модификатор assets замещение https://mitsudiesel.su/assets http://prntscr.com/ss4f8i
Anya Stepanova 3 years ago
Здравствуйте! Подскажите, пожалуйста, какой селектор взять с сайта https://usmall.ru/product/734594-ribbed-stretch-viscose-tank-top-michael-kors Можно ли добавить определенную картинку из слайдера? Спасибо
Aleksandr Zelenskiy 3 years ago
Добрый день. Основную картинку удалось получить с использованием .p-product__thumb.__active img селектора и src аттрибута - http://prntscr.com/sokhku Вторую картинку из слайдера удалось "втянуть" с помощью следующего селектора: #__layout > div > div > section > div > div.grid.small-collapse > div.item.item--images > div.ui-scroller.p-product__thumb-list > div > div:nth-child(2) > img и того же атрибута - http://prntscr.com/sokiyf
Anya Stepanova 3 years ago
Делаю так, как вы написали. Приходят картинки других вариантов продукта - другого цвета вещи :( Вытянуть заглавную картинку слайдера вообще невозожмно?
Aleksandr Zelenskiy 3 years ago
Вы можете "вытянуть" заглавную картинку слайдера с помощью .p-product__thumb.__active img селектора, как я и писал выше. Пожалуйста, обратите внимание что если сайт использует разное расположение элементов и разные ID и классы на разных страницах (отличающихся от расположения по ссылке которую вы привели выше) то селекторы могут не работать универсально для всех страниц. Если вы хотите и уточните почтовый ящик на который зарегестрирован ваш аккаунт в Страйпо, я могу добавить в ваш аккаунт письмо с примером работы описанных мною селекторов.
Anya Stepanova 3 years ago
Я пробую сделать так и не всегда получаю данные из слайдера на странице. У товаров могут быть разные варианты по цвету и по этому селектору показывается карточка товара не из слайдера страницы, а из какого-то товара. Также есть вариант, что цена на разный цвет отличается, поэтому по селектору цены передается цена не того варианта. моя почта hello@anyastepanova.ru.
Hanna Kuznietsova 3 years ago
Анна, Спасибо. По Вашему вопросу связались с Вами в почте.
Anya Stepanova 3 years ago
Спасибо большое!
Matthias Schwindt 3 years ago
How can I pull a image url which is includet as background-image out of my website?
Aleksandr Zelenskiy 3 years ago
Hello, Please be advised that background images are creating via CSS styles. Our smart elements meant to get data within HTML tags but can't fetch CSS styles out of code, including background styles. You can add background images to an email only manually.
Paron Antonyan 4 years ago
Здравствуйте! Бьемся больше часа, попробовали разные способы по логике, приведенной ниже в комментариях, не получается. Помогите нам с селектором на картинку, пожалуйста. https://kidsavenue.ru/catalog/malchiki/odezhda_1/longslivy_1/36020/
Aleksandr Zelenskiy 4 years ago
Добрый день. По данной ссылке картинку можно подгрузить используя следующие селекторы\параметры: внешний #bx_117848907_36020_pict атрибут src внутренний .myImage атрибут src На скриншотах: http://prntscr.com/qscfe3 http://prntscr.com/qscfmy Важно отметить. На сайте используется относительный путь для картинки, поэтому необходимо использовать модификатор /upload/ с заменой на https://kidsavenue.ru/upload/ http://prntscr.com/qscggp
К. Зайцева 4 years ago
Здравствуйте, подскажите какой селектор ввести чтобы выгрузить картинку https://flytechnology.ua/dji-agras-mg-1p
Ruslan Trepukhalov 4 years ago
Здравствуйте, для Вашего сайта Вам нужно указать селектор #content > div > div.us-product-top.d-flex > div.us-product-left > div.us-product-photo-main.mb-4 > a > img Атрибут src Пример: http://prntscr.com/qc1kyq и выбрать динамический сайт в пункте URL http://prntscr.com/qc1h4a Но так как на Вашем сайте используются изображения формата .webp http://prntscr.com/qc1i3e мы не гарантируем что будет отображаться изображения в почтовых клиентах, так как нет подержки рендеринга изображений в формате .webp. Мы рекомендуем Вам использовать на Вашем сайте форматы изображений такие как jpg, png, gif.
Артём Русев 4 years ago
Добрый день, подскажите какой селектор ввести чтобы выгрузить картинку https://sayyes.com.ua/skrab-dlya-tela/10943-kofeynyy-skrab-joko-blend-cherry-200-g.html
Aleksandr Zelenskiy 4 years ago
Добрый день. По данной ссылке картинку получится подгрузить используя следующий внутренний и внешний CSS селекторы: внутренний .adapt-img атрибут src внешний head > meta:nth-child(13) атрибут content На скриншотах: http://prntscr.com/q25763 http://prntscr.com/q257im
Evgenii Romanenkov 4 years ago
Здравствуйте! Пробовал различные варианты для вытягивания картинки. Ничего не удалось. Например пробовал такие селекторы с href, img, src div#main-photo.d-doned-sm-block.zoom.card-image-zoom.card-zoom-small div.owl-item.active>div:nth-child(1)>a:nth-child(1) div.owl-item>div:nth-child(1)>a:nth-child(1) div.owl-item>div>a div.owl-item a:nth-child(1) div.owl-item a Какой селектор ввести чтобы выгрузить картинку отсюда https://wellmax.eu/ru/goods/67407 ?
Aleksandr Zelenskiy 4 years ago
Добрый день. В вашем случае, картинку получится подгрузить, используя следующий внутренний и внешний CSS селекторы: внутренний .esd-block-image img атрибут src внешний #card-main-photo атрибут src На скриншотах: http://prntscr.com/q0kk0u http://prntscr.com/q0kjoy
Evgenii Romanenkov 4 years ago
Получилось. Спасибо за оперативный ответ)
Людвик Сафарян 4 years ago
Добрый день! столкнулся с ситуацией в смарт контенте, у меня на сайты все ссылки на картинки начинаются с папки. /upload/resize_cache/iblock/6cd/500_500_19c25237da8d22b6fe15e058ccab634fe/6cd1af7c8c4dee53d44c1849e9757467.jpg , соответственно не открывается картинка, как сделать так чтобы впереди добавилось название сайта чтобы картинка подгружался ?
Aleksandr Zelenskiy 4 years ago
В Вашем случае, картинку получится подгрузить, используя следующий CSS селектор meta[property=og:image] и атрибут content Пожалуйста, посмотрите как это выглядит на скриншоте https://prnt.sc/of4cge
Людвик Сафарян 4 years ago
Спасибо за оперативный ответ!
Type
Industry
Seasons
Integrations
Stripo editor
Simplify email production process.
Stripo plugin
Integrate Stripo drag-n-drop editor to your web application.
Order a Custom Template
Our team can design and code it for you. Just fill in the brief and we'll get back to you shortly.