All You Need to Know About Templates using Block Parameters

Block parameters provide a way for the template developer to create interactive options such as those seen in the screenshot below.

This allows the template developer to provide a way for configurators to change the underlying HTML/CSS directly in the Email Editor. This significantly lowers the difficulty or knowledge of HTML/CSS needed by the configurator to style the email to their heart's content. At the same time, you have the option of limiting available options. You do this by designating a list of choices when incorporating the block parameters in your HTML email template.

Read more about Block Parameters.

Editing the block parameter properties for the item labelled as 'Button'

Incorporating Block Parameters in your HTML Code

For this example, we will be creating a button which has a block parameter controlling the destination of the link as well as the text displayed on the button.

A few different types of block parameters are available and will change how the option is presented in the interface. To set the link destination, we will make the type 'LINK' which will result in the link drop-down menu. We have also chosen to give it a default value of 'https://agillic.com/' as the destination. Below is an example HTML snippet:

<a href="${blockparam:Button::URL|LINK|https://agillic.com/}">${blockparam:Button::Text|STRING|Click here}</a> 

That would generate the following in the email editor interface:

A Block Parameter input field, controlling the Button Text and Button Destination

For the button text, we will make the type 'STRING', which will result in a simple text input field. We have chosen to give it a default value of 'Click here'.

Go to the Developers' Portal for the full list of available parameter types.

Using Block Parameters as a Configurator

If you want to access the block parameter settings, hover the mouse over the content block and click on the 'i' icon. This opens up the properties panel on the right side of the Email Editor. You will find the 'Options' listed here. 

From the Options panel, you'll be able to find all block parameters made available to you by the HTML template for that specific block.

Block parameter input fields allow you to insert generic placeholder values. For each recipient, the placeholder is replaced by data specific to them. Simply click the input field and watch the 'Personalise' panel appear. From here, you will be able to select a data field to merge in.

Merging in the result of a Unique Lookup as the button text

A Note on Promotions

There are a few things to be aware of when using Block Parameters in conjunction with Promotions. Make sure to choose your Promotion Field 'types' carefully. They affect how you insert the fields in your emails. Use it to your advantage!

Let's take a look at the example above. The button destination has a block parameter of the type 'LINK'. Creating a link type Promotion Field unlocks a new option in the url drop-down menu - 'Promotion link'.

Inserting a 'Promotion link' as the button destination

The promotion itself has been configured to have the link value saved in a 'LINK' type field, rather than the more general-purpose 'HTML' type.

A Promotion with a 'LINK' type promotion field

A similar approach is available for Promotion Fields of the type 'IMAGE' in conjunction with block parameters of the type 'IMAGE'.

A Promotion with an 'IMAGE' type promotion field

In this example, we've uploaded an image to the Assets Manager, created a Promotion with a Promotion Field of the type 'IMAGE', and selected an image resource. This unlocks a new option in the image source drop-down menu - Promotion. 

Inserting a Promotion Field 'IMAGE' as the image source

To learn more about Agillic HTML Template specifics, please visit https://developers.agillic.com/