- Responsive Email Editor Review
- Designing your email
- Creating Synchronized Modules
- Setting Up Responsive Email Design
- Setting Up Smart Containers
- Creating a Gmail Promotions Annotation
- Adding The Rollover Effect
- Adding Anchor Links
- Module Library
- Adding a Table to an Email
- Adding Custom Fonts
- Creating CTA Button
- Working with Images
- Creating Timer
- Using AI in the Email Editor
- Setting Up Widgets for Your Site
- Widget Calling
- Setting Up Locations for the Widget Calling Rules
- Storing data from widgets to contact fields
- Using Annoyance Safeguard
- Actions After Form Submission
- Replacing Double Opt-In System Workflow
- Using Yespo Extension for Google Chrome
- Creating Pop-ups via Google Tag Manager or WordPress
- Sending Yespo Widget Events to Google Analytics
- Using A/B Tests for Widgets
- Building and Editing Workflows
- Configuring Workflow Start/Stop Conditions
- Start Block
- Popular Blocks
- Message Blocks
- Contact Blocks
- Conditions Blocks
- Other Blocks
- Message to Segment Blocks
- Time Blocks
- Setting Up Allowed Send Time
- Using Workflow Launch History
- Webhook Workflows
- Workflow Troubleshooting
- Double Opt-In
- Welcome Сampaign
- Welcome Series Segmented by Category
- Launching a Workflow After a Contact Import
- Regular Workflow for a Segment
- Birthday Campaign
- Linking Workflow to the Button
- Using Variables from Order in Workflow
- Collecting Order Feedback
- Customer Reactivation
- Sending Extra Campaigns
- Sending Campaign to Those Who Did Not Open the Previous One
- Email Campaign Report
- Web Push Campaign Report
- Viber Campaign Report
- Mobile Push Campaign Report
- App Inbox Campaign Report
- Widget Report
- Triggered Campaign Report
- AMP Campaign Report
- SMS Campaign Report
- Multilingual Campaign Report
- Setting up UTM Tags
- Revenue from Campaigns
- Tracking Campaign Performance in Google Analytics 4
Events and Behaviour Tracking
Setting Up Data Substitution Using SRT Blocks
The Yespo system can automatically create content for emails using external data sources and email modules from your library.
As a result, the converted data is connected to the modules in special stripes.
SRT defines the appearance and rules by which the system will insert data into the strip. The constructor has 3 sections:
- Start section – determine which modules to place at the beginning of the automatically generated area.
- Repeatable section – set a rule for displaying modules in each cycle.
- Tail section – set a rule to display a specific module in case there are not enough items (products) in your data source to complete the entire cycle from the repeatable area.
Theory. Basic SRT Settings
Before starting work:
- connect one of the data sources (Google Sheets, recommendations);
- set up smart containers for the selected source and save them to the module library.
Then you can start setting up the appearance of the blocks for substitution.
Email preparation and SRT setup
Add a stripe to the email. Click on the background around the email in the editor and click on the “+”.
Go to the Data → Dynamic tab:
Fill in the following fields:
- Element name.
- Data source.
- Select from the drop-down list what action to perform if the data source is empty:
- Hide element,
- Display element,
- Do not generate email message.
Double-click on the stripe to enter values to substitute:
Select the required structures from the module library and drag them into the email body:
1. Start section
Modules should be placed at the beginning of the dynamic element.
2. Repeatable section
Cycle modules and block substitution rules.
3. End section
Modules should be placed at the end of the dynamic element.
Completing all sections is optional. Sections #1 and #3 are used for static elements, which will be displayed as you define them.
Let’s consider the second section for repeatable elements.
Setting up SRT (Repeatable section)
Use the repeatable section to flexibly control the appearance of the inserted data and the rules for displaying it in the email. For example, you want to substitute the products in the following form:
- a module with three products per line;
- a module with two products per line;
- a module with one product per line (if one product is left in the source).
The system will insert products from the data source into the specified blocks and rotate them in the order 3+2+3+2 when sending an email. A single structure will be displayed if only one last item is left in the file.
Select the type of structure from the My Modules tab or the Advanced tab:
Drag it into the email. An empty structure will be displayed, which you need to fill with smart containers.
The container must have smart properties so that the system correctly substitutes the content from the data source.
You can immediately proceed to test email or set specific rules for displaying modules in emails.
You can set the rules for displaying the entire structure
or each container separately.
Here are examples of which setting option to choose:
1. Structure settings. Two products must be displayed in the structure. But the feed can contain an odd number of products.
Then we add two structures: for 2 products and below — for 1 product. For the structure for 1 product, add the rule Apply only if a specified field is present in the data source and write the value 1. If there are 4 products in the feed, they will be displayed 2+2. If there are 5 products in the feed, they will be displayed sequentially 2+2+1.
2. Сontainer settings. For example, there is a discount only for certain products, and you want to display crossed-out prices. To do this, create two containers:
- the first – new price + crossed-out old price;
- the second — only the current price.
Add a rule: if the product has the oldPrice field, show the first container, if not, the second.
To set the structure settings, select the desired block. A menu will open on the left, where you can:
- Leave current – the appearance of the block will match the added one. Use this option when you need static data. For example, a banner or description: You have viewed these products, You will be interested...
- Apply another – only an empty structure will be displayed, which must be filled with smart blocks for data substitution.
Columns will become available for the latter option after adding smart blocks, where you can set rules for each horizontal or vertical column separately.
There must be no empty structures in the option with columns: everything needs to be filled with data since empty elements will not be displayed.
Then you can add rules that are the same for blocks and structures.
Please note that you cannot change the appearance of containers in the SRT constructor itself. You can edit it in a parallel tab or return to the email. After making changes, you need to update the block in the library.
By settings, we mean the rules for displaying content in email and filling it with content.
You can choose whether to fill it with data or not for the container.
If you select No, the information will remain unchanged, the block will be static.
For example, No is selected for the left block and it remains static, while Yes is selected for the right block, and cards change in it.
After choosing an option, you can proceed to the rules or directly to testing.
Rules for Blocks and Structures
Option 1. Apply only if a specified field is present in the data source
How it works
For example, we want to display the old price of products that have a discount.
1. First of all, we create an alternative container for which the Or mark will appear:
2. Set the settings for the lower container, taking the required variable from the data sources. In our case, this is the name of the oldPrice column.
3. Write the variable in the field precisely as indicated in the table.
Thus, for products with the old price, it will be displayed in the card.
Option 2. Apply only if there is a specified number of records left in the data source
How it works
For example, the source uses an odd number of products.
The data structure will be displayed only if all the products have already been included in the email and there is only one left.
Option 3. Apply only to a specified cycle (loop)
How it works
For example, we have 12 products and need to show the CTA button after 6 products.
We add a structure with a button and specify that it should only be used for the 3rd cycle.
It turns out that the first two cycles contain 3 products each. After their substitution, the CTA button will be added, then products.
Important The condition is applied to the loop once.
Option 4. Apply only to cycles with a value that is multiple of a certain number
How it works
The setting is similar to the previous option, but will apply to all cycles that are multiples of our value.
For example, we have 12 products, and we need to show the CTA button after every 6 products.
We add a structure with a button and specify that it should be applied for every loop with three products.
Cycle #1 and #2 contain 3 items each. After substituting them, the CTA button will be added to cycle #3, then again two cycles of 3 products each — and the button will be displayed again.
Option 5. Apply to all cycles starting from a specified one
How it works
This rule will help us to use different layout options and display products differently from the selected cycle.
For example, it is necessary that at first, there was a layout of blocks of 3 products in a row, then it changed to 2 products.
We specify 5 for a block with 2 products, which will display this type of layout only from the 5th cycle.
Option 6. Apply until a specified cycle (loop)
How it works
This rule, similar to the previous one, will help you use different layout options, but only UNTIL the selected cycle.
For example, it is necessary that at first there was a layout of blocks of 3 products in a row, then it changed to 2 products.
We specify 5 for a block with 3 products, which will display this type of layout only up to the 5th cycle.
Starting from the 6th cycle, the appearance will change to two products in a row.
The custom code is generated when you make changes through the SRT constructor, or you can write it yourself. For example, if you need to copy a code from another email or view the stripe structure.
Part 2. An Example of Creating SRT Email
Before creating a letter, connect at least one data source in your account (Settings → Data sources).
Creation of email blocks. Preparatory stage
You can create an email completely in a dynamic stripe by filling in all sections or partially using only one. Consider creating an email with filling in all sections.
1. Create and save the Header structure to the block library.
2. Create an empty structure with two containers and add it to the module library:
3. Separately create a smart block in the structure for two containers and save it to the library. In our case, the data source is Google Spreadsheet. The field names in the table are our substitution variables.
You can use ready-made smart blocks from the library: Modules → Advanced → Product cards.
You only need to change the names of the variables and save the updated block to the library. It could be easier and faster than creating your own blocks.
Please note that it is the containers you need for substitution in SRT. Therefore, you can save the blocks and structure separately to make it easier to fill the SRT strip.
4. Create a smart block with the old price crossed out in the structure for two containers and save it to the library.
Use variables from a data source; for example, in Google Sheets variables are the names of the columns.
5. Create and save a structure with a button to the module library.
Setting up SRT in email
1. Go to the strip settings and click Dynamic. Then we give the name of the element, select the data source specified in the smart blocks, and what to do if the source is empty.
2. By clicking on the SRT stripe, open the constructor:
Optionally, add the Header structure from the modules to the start section, click on it and select Leave current on the left:
3. Add an empty structure from the modules to the repeatable section:
4. Drag smart blocks with the old price into it.
Drag smart blocks without the old price under them.
5. Select each container with the old price and add the rule Apply only if a specified field is present in the data source. If there is oldPrice, the customer will see the old price crossed out.
6. Add a structure with one product in case there is an odd number of records in the source. We select the rule Apply only if there is a specified number of records left in the data source for it and write 1.
The structure with data will be displayed only if all the products have already been included in the email and only one is left.
7. Optionally, add a structure with a button from the modules to the closing section, click on it and select the Leave current switch.
8. Save changes.
Sending a test message
To test the data substitution, send email via the Test button in the editor.
Or send the test in the message list through the Create campaign button,
by selecting the recipient in the Contacts tab.
Read also how to set up a recommendation email.