Sculpt Blocks – Cordial Knowledge Base
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](https://support.cordial.com/hc/en-us/articles/115005531428-Image-library#h_01HAT3FAGE4WTAV9S098FFDVQK).
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**.
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:
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 publish
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 **Publish Draft**.
5\. When publishing a Sculpt block, you'll be prompted to provide a description of the changes made. This helps users reviewing updates understand what has changed before accepting them. Change descriptions are displayed directly within the message editor on any Sculpt blocks that have been modified.
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:
- [Banner Block](https://support.cordial.com/hc/en-us/articles/360002766031-Sculpt-Blocks#bannerBlock)
- [Call to action (CTA) Block](https://support.cordial.com/hc/en-us/articles/360002766031-Sculpt-Blocks#ctaBlock)
- [Headline Block](https://support.cordial.com/hc/en-us/articles/360002766031-Sculpt-Blocks#h_01H00RX1DQP0M5NGFW68P6NNH7)
- [Repeatable product Block](https://support.cordial.com/hc/en-us/articles/360002766031-Sculpt-Blocks#repeatableProductBlock)
### Banner Block
Our example banner Block consists of a `<table>` tag with a nested image.
```auto
<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:
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>
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>
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>
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}