Overview
Sculpt Blocks are HTML elements you can drag into Sculpt Templates to easily build custom message layouts and content. You can enhance your Blocks with Smarty variables and customized forms, unlocking powerful personalization options. To help you build content faster and fuel creativity, Sculpt features a high-powered generative AI toolset.
Blocks must be saved as complete and valid HTML elements. We strongly recommend that all Blocks start and end with a <table>
tag and are fully self-contained.
- You can find example Blocks further down in this article.
- If you want to get started right away, you can download and import our example Template and Blocks into your account.
Create a Sculpt Block
1. Navigate to Content > Sculpt Blocks > New to create a new Block.
2. Fill out the fields for the new Block:
- Block name: Used to identify the Block.
-
Block key: Used to reference the Block inside a Sculpt Template for pre-defined layouts. For example, if you want a Block to appear in a Template by default, you can include it in the Template HTML code using the following tag:
<block type="block_key"></block>
- Block description: Used to describe the Block.
- Block tags: Used for filtering Blocks during message creation.
-
Allow Blocks to be used in: Specify a Block's availability for each message type.
- Batch messages and automation: Block will be available in both message types.
- Batch messages only: Block will be available in batch messages only.
- Automations only: Block will be available in automations only.
- None: Block will not be available in any message type. This is useful when building a Block and restricting usage until it's complete.
3. Once you've filled out the fields, click Continue. You'll be presented with the Block Markup Editor.
4. You can paste in your Block HTML here and preview it using the Preview Block Markup button.
Create a Block form
Use Block forms to create editable elements such as images, text, and more that your team can customize during message creation.
1. To create a form, click the Form Builder button above the Block Markup Editor. You'll be taken to the Form Builder page.
2. Create a new section and give it a title. The section title will be used to name the section of the form containing the associated field(s).
3. Click the New Field dropdown and select the appropriate Form element type. The form element type determines which data type the form will collect. Available form element types:
- Checkbox
- HTML editor
- Image selector
- Text area
- Select menu of all lists
- Select menu of all HTML content
- Color Picker
- Number
- Select
- Rich text
5. Give the field a Default Value. The field will be pre-populated with the default value during message creation.
If no default value is given for an image selector field type, a placeholder image path will be automatically provided.
6. As you build out your form, you'll see a preview in the left pane.
Insert an image into a Sculpt Block
Before you can insert an image into a Sculpt Block, you need to upload it into the image library.
1. To insert an image into a Sculpt Block, click the Form Builder button and choose Image Selector under Form element type.
2. Click the Image library button.
3. Depending on your preference, choose the Thumbnail or Table view under Settings.
4. Locate the image you want to use and click on it or select Insert.
- Thumbnail view: Click the image to insert it or select the ellipsis button and choose Insert.
- Table view: Click the image to insert it or use the dropdown arrow and select Insert.
5. The image will be inserted into your Block.
Enable generative content
Generative content is available for both text area and rich text Blocks to build smarter email and in-app messages faster—and help spark creativity. Our models are trained on your brand's voice and style to give you relevant, impactful suggestions.
1. Create or edit an existing Sculpt Block and click the Form Builder button.
2. Select either Text, Text Area, or Rich Text for the Form element type.
3. Select the checkbox that appears at the bottom: Enable AI content generation.
4. With AI content enabled, you'll see the option to Generate AI Content in the form preview pane.
5. From within the generative AI pane, you can enter a prompt, click Generate AI Content, and see multiple variations of generative content you can use.
6. To customize the text, select one or multiple of the buttons: Shorten, Lengthen, Urgent, Casual, Funny.
7. Click Use Content under the AI-generated text you wish to use, and it will appear in your form.
8. Once your Block is saved, you'll have the ability to generate AI content any time the text area Block or rich text editor Block is used in a message.
Add variable key names to HTML
As you create your sections, fields, and default values, the variable key names and data schema will automatically generate in the background. Add the Smarty variables that reference these keys to your HTML in the Block Markup Editor in order for the values to populate correctly.
1. To view the variable key names and schema structure, click the Data Output button. This will open an overlay window with the option to view the data schema in JSON format, or each of the variable names in Smarty format. Keep this window open when referencing the variable keys in your HTML.
2. The data schema will be created based on the section name, field names, and the default values entered. Here's an example schema in JSON format:
The auto-generated data output will convert your section titles and field labels to code-friendly formats by making all characters lowercase and replacing spaces with underscores.
3. Click the Variable names icon to access the Smarty variables you'll paste into your HTML.
4. Paste the Smarty variables into the appropriate places in your HTML.
Add tags to links in Sculpt Blocks
Cordial automatically adds tags to your links within Sculpt Blocks using the Block tag: sculpt-block-{yourBlockTag}
. If desired, you can also manually go in and add a custom tag within the Block Markup Editor. This can be useful for your own analytics and tracking.
Paste HTML, preview, and save
1. Once the variables are updated in your HTML, paste it into the Block Markup Editor.
2. To preview the HTML, selecting the Preview in Sculpt message editor toggle.
3. You'll see a preview of how the Block will appear during message creation.
4. To save your Block, switch back to the Edit Block view in the upper drop-down menu, and then click Save Block.
The use of proper HTML markup is highly recommended to avoid message rendering issues. Using HTML Block elements within inline elements could cause undesirable rendering of content.
Example Blocks
We've created four example Blocks for you:
For each Block, we'll define the desired editable elements and create a form input field for each one.
Banner Block
Our example banner Block consists of a <table>
tag with a nested image.
-
<table width="579" border="0" align="center" cellpadding="0" cellspacing="0" class="mobile_width">
<tbody>
<tr>
<td><a href="http://cordial.com"><img alt="30% Off Sunglasses" class="mobile_width" src="https://d1ok0qgebci2d3.cloudfront.net/34/579x272/banner-CTA-3.jpg" /></a></td>
</tr>
</tbody>
</table> -
After building out our form fields to collect the data for the editable elements, the form preview will look like this:
-
{ "$blockData": { "banner_image": { "image_url": "https://d1ok0qgebci2d3.cloudfront.net/252/579x272/banner-3.jpg", "image_link": "http://cordial.com", "image_alt_text": "30% Off Sunglasses" } } }
-
Replace the banner image URL with the following Smarty tag:
{$blockData.banner_image.image_url}
Replace the image link with the following Smarty tag:
{$blockData.banner_image.image_link}
Replace the image alt text with the following Smarty tag:
{$blockData.banner_image.image_alt_text}
- Our banner HTML with the replaced Smarty variables now looks like this:
<table width="579" border="0" align="center" cellpadding="0" cellspacing="0" class="mobile_width">
<tbody>
<tr>
<td><a href="{$blockData.banner_image.image_link}"><img alt="{$blockData.banner_image.image_alt_text}" class="mobile_width" src="{$blockData.banner_image.image_url}" /></a></td>
</tr>
</tbody>
</table>
Call to Action (CTA) Block
Using the same techniques as the banner, we'll create the CTA Block. The editable fields for this Block will be Headline Text, Body Text, Button Text, and Button Link.
-
<table width="579" border="0" align="center" cellpadding="0" cellspacing="0" class="mobile_width">
<tbody>
<tr>
<td style="font-family: arial, san-serif; text-align: center; padding: 30px; background: #fff; color: #666; line-height:22px;"><h1 style="color:#292929; font-size:30px; line-height:34px;">Huge 48 Hour Sale!</h1>
<p>Don't miss your chance to get 30% off your favorite sunglasses.<br>
Hurry,
sale is this weekend only!</p>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" bgcolor="#1B9BA3" class="body-text" style="border-radius: 4px;"><a class="body-text" href="#" style="font-size: 14px; font-family:Arial, sans-serif; color: #ffffff; text-decoration: none; text-decoration: none; border-radius: 4px; padding: 12px 22px; text-transform:uppercase; font-weight:bold; display: inline-Block" target="_blank">Shop Now</a></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table> -
After building out our form fields to collect the data for the editable elements, the form preview will look like this:
-
The variable keys names and data schema are generated automatically for us so we can populate our HTML with the proper variables. Here's the data output:
{ "$blockData": { "body_cta": { "headline_text": "Huge 48 Hour Sale!", "body_text": "Don't miss your chance to get 30% off your favorite sunglasses.
Hurry, sale is this weekend only!", "button_text": "Shop Now", "button_link": "http://cordial.com" } } } -
Using the supplied variable keys, we'll add the following Smarty variables to our HTML:
{$blockData.body_cta.headline_text} {$blockData.body_cta.body_text} {$blockData.body_cta.button_text} {$blockData.body_cta.button_link}
-
After adding the Smarty variables to our HTML, here's the final code for our CTA Block:
<table width="579" border="0" align="center" cellpadding="0" cellspacing="0" class="mobile_width">
<tbody>
<tr>
<td style="font-family: arial, san-serif; text-align: center; padding: 30px; background: #fff; color: #666;"><h1 style="color:#292929">{$blockData.body_cta.headline_text}</h1>
<p>{$blockData.body_cta.body_text.content}</p>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" bgcolor="{$TemplateSettings.colors.button_color}" class="body-text" style="border-radius: 4px;"><a class="body-text" href="{$blockData.body_cta.button_link}" style="font-size: 14px; font-family:Arial, sans-serif; color: #ffffff; text-decoration: none; text-decoration: none; border-radius: 4px; padding: 12px 22px; text-transform:uppercase; font-weight:bold; display: inline-Block" target="_blank">{$blockData.body_cta.button_text}</a></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
Headline Block
We'll create the headline Block using the same approach. The editable fields for this Block will be Headline Text.
-
<table width="579" border="0" align="center" cellpadding="0" cellspacing="0" class="mobile_width">
<tbody>
<tr>
<td bgcolor="#f8f8f8" style="font-family: arial, san-serif; text-align: center; padding: 10px; color: #292929; font-size: 24px">Our Best Sellers</td>
</tr>
</tbody>
</table> -
After building out our form fields to collect the data for the editable elements, the form preview will look like this:
-
The variable keys names and data schema are generated automatically for us so we can populate our HTML with the proper variables. Here's the data output:
{ "$blockData": { "headline": { "headline_text": "Our Best Sellers" } } }
-
Using the supplied variable keys, we'll add the following Smarty variable to our HTML:
{$blockData.headline.headline_text}
-
After adding the variable key to our HTML, here's the final headline Block:
<table width="579" border="0" align="center" cellpadding="0" cellspacing="0" class="mobile_width">
<tbody>
<tr>
<td bgcolor="#f8f8f8" style="font-family: arial, san-serif; text-align: center; padding: 10px; color: #292929; font-size: 24px">{$blockData.headline.headline_text}</td>
</tr>
</tbody>
</table>
Repeatable product Block
We'll treat the product Block a bit differently because it's repeatable: when creating messages, your team can add additional products by clicking a button as opposed to dragging in a new Block from the library. The editable elements will be Title, Description, Button Text, Button Link, Image URL and Image Link.
-
<table dir="rtl" width="579" border="0" align="center" cellpadding="0" cellspacing="0" class="mobile_width">
<tbody>
<tr>
<td dir="ltr" valign="top" bgcolor="#FFFFFF" class="Block" style="padding: 10px"><table width="269" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><img src="https://cdn.shopify.com/s/files/1/1070/1848/products/3467238-p-MULTIVIEW_large.jpg" width="269"></td>
</tr>
</tbody>
</table></td>
<td dir="ltr" bgcolor="#FFFFFF" class="Block" style="padding: 10px"><table width="269" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="font-family: arial, san-serif; text-align: center; padding: 10px; color: #666; font-size: 14px; line-height: 22px;">QUAY AUSTRALIA<br>
Retro and modern influences merge seamlessly on lightweight sunglasses featuring tortoiseshell frames and flashy mirrored lenses.</td>
</tr>
<tr>
<td><table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" bgcolor="#1B9BA3" class="body-text" style="border-radius: 4px;"><a class="body-text" href="#" style="font-size: 14px; font-family:Arial, sans-serif; color: #ffffff; text-decoration: none; text-decoration: none; border-radius: 4px; padding: 12px 22px; text-transform:uppercase; font-weight:bold; display: inline-Block" target="_blank">BUY Now</a></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table> -
1. We want this Block to be repeatable, so we'll select the Yes, make this repeatable checkbox when creating the section.
2. After building our form fields to collect the data for the editable elements, the form preview will look like this:
3. The Add Another Featured Product option will display because we chose to make this section repeatable. Click the button to add another set of fields without the need to drag in a new Block.
-
The variable keys names and data schema are generated automatically for us so we can populate our HTML with the proper variables. Here's the data output:
{ "$blockData": { "featured_products": [ { "title": "QUAY AUSTRALIA", "description": "Retro and modern influences merge seamlessly on lightweight sunglasses featuring tortoiseshell frames and flashy mirrored lenses.", "button_text": "Buy Now", "button_link": "http://www.cordial.com", "image_url": "https://cdn.shopify.com/s/files/1/1070/1848/products/3467238-p-MULTIVIEW_large.jpg", "image_link": "http://www.cordial.com" } ] } }
The key/value pairs within featured_products were generated as an array (as denoted by the square brackets). This is because the section was set to be repeatable.
When writing the final HTML for the Block, we'll need to use the Smarty
{foreach}
function to loop though the data and populate the values. -
After adding the Smarty variables to our HTML, the final repeatable product Block will look like this:
{foreach $blockData.featured_products as $product}
<table dir="rtl" width="579" border="0" align="center" cellpadding="0" cellspacing="0" class="mobile_width">
<tbody>
<tr>
<td dir="ltr" valign="top" bgcolor="#FFFFFF" class="Block" style="padding: 10px"><table width="269" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><a href="{$product.link}"><img src="{$product.image_url}" width="269"></a></td>
</tr>
</tbody>
</table></td>
<td dir="ltr" bgcolor="#FFFFFF" class="Block" style="padding: 10px"><table width="269" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="font-family: arial, san-serif; text-align: center; padding: 10px; color: #666; font-size: 14px; line-height: 22px;">{$product.title}<br>
{$product.description}</td>
</tr>
<tr>
<td><table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" bgcolor="#1B9BA3" class="body-text" style="border-radius: 4px;"><a class="body-text" href="{$product.button_link}" style="font-size: 14px; font-family:Arial, sans-serif; color: #ffffff; text-decoration: none; text-decoration: none; border-radius: 4px; padding: 12px 22px; text-transform:uppercase; font-weight:bold; display: inline-Block" target="_blank">{$product.button_text}</a></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
{/foreach}
Experiment Blocks
You can add multiple experiments to a message using Experiment Blocks. The Experiment Block is a system block that's always present as the first block in the Block Library when you create Sculpt messages.
1. To add an experiment to your message, locate the Experiment Block in the Block Library, drag it into your Sculpt Template, configure its settings, then drag in content blocks for each variant in the experiment.
2. Once the Experiment Block is added to your Template, click on the Block and edit the settings.
- Experiment name: Add a name for the experiment (underscores will automatically replace spaces in the name).
- Optimize: Choose a metric for optimization: Unique Clicks, Unique Opens, Revenue Per Send, Orders Per Send, Orders Per Click, Revenue Per Click, Unique Clicks to Unique Opens
-
Experiment strategy: Choose a strategy:
- Batch messages: Split or Split with champion
- Automated messages: Multi-armed bandit
- Variants: Choose how many variants you want the experiment to contain.
3. After you've configured the experiment settings and added the desired amount of variants, you can drag Blocks into each variant using the variant dropdown button.
4. You can preview experiments using the variant dropdown in the experiment Block, or by using the Experiment Preview button and choosing the desired variants.
HTML content include Block
The Select menu of all HTML content Sculpt Block field creates a dropdown menu consisting of all content in your HTML library. The menu will list HTML content by name, and it's dynamically updated based on available items in your library. When used in Sculpt messages, Blocks containing this field allow you to select specific HTML content that the Block will render.
1. Create a new Sculpt Block with the Select menu of all HTML content field created in your form. We're naming our section HTML Include and our field Select HTML Content.
2. Switch to the Block Markup Editor and navigate to Data Output. Copy your field variable for use in the next step. Our example field variable is {$blockData.html_include.select_html_content}
.
3. Return to the Block Markup Editor. For the Block to render the HTML content as expected, write the include using one of the following methods:
-
Conditional Statement:
if
condition and theinclude
Smarty function. You can reuse the fully compiled example below but replace the field variable with your own.
{if $blockData.html_include.select_html_content != ""} {include 'content:'|cat:$blockData.html_include.select_html_content} {/if}
The if
condition preemptively sets the expectation of default HTML content selection being null. The cat:
Smarty modifier concatenates the field variable to the include function.
- Set a Default: Alternatively, you can specify a default value with the following Smarty modifier:
{include "content:{$blockData.include_key.htmlinclude|default:'html_default'}"}
4. Preview the Block and test the HTML content select menu.
Update existing Blocks
When an existing Sculpt Block is updated, any newly created Sculpt messages will use the updated Block. Any existing messages will retain the version of the Block you used when creating the message. This prevents existing Sculpt messages from malfunctioning if a Sculpt Block is updated with changed code.
When editing a message using a past version of a Block, you can click the yellow exclamation point next to the Block in your library, and then choose to either Update or Keep Existing. This makes it possible to lock down a Block within a Sculpt message (Keep Existing) or roll forward to the updated Block (Update).
Export, import, and copy Blocks
You can export, import, and copy Blocks by navigating to Content > Sculpt Blocks. The exported, imported, or copied files contain all Block data, including the HTML and the form builder, making it easy to share Blocks across different accounts. You can also copy the URL of your Blocks with one click.
Export Blocks
1. To export a Block, locate the desired Block and click the Export button.
2. To export multiple Blocks, select the desired Blocks, then click the Export Sculpt Blocks button in the top menu.
3. Once an export has been initiated, you can download the file on the Jobs page. The file can then be imported into another account.
Import Blocks
1. To import a Block, navigate to Content > Sculpt Blocks and click the Import Blocks button.
2. Choose one or more Sculpt files (in either .zip or JSON format) and click the Add Files button. You'll be taken to the Jobs page to see the status of the import. Once the import is complete, the imported Block will be available in the Block library.
When importing Blocks with the same key as an existing Block, the key and name of the imported Block will be appended with _copy. Existing Blocks cannot be overwritten during import.
Copy Blocks
1. To copy a Block, click the Copy Block button and fill out the Duplicate Block window.
2. Your duplicated Sculpt Block will be available from Content > Sculpt Blocks.
Copy Block URL
Click the Copy URL button to copy your Block URL and use it in a Template or message.
Download our example Template and Blocks
We made it easy to use our example Template and Blocks in your account.
Download and import the example Template
1. Download the example Template .zip file.
2. Import the zip file using the import Template feature.
Download and import the example Blocks
1. Download the example Block .zip file.
2. Import the zip file using the import Blocks feature.
In the next article, you can learn how to create Sculpt messages.
Comments
0 comments
Please sign in to leave a comment.