Using Template Parameters

A practical guide about how to use template parameters when creating templates.

Template parameters allow you to define visual parameters in your code. These parameters can then be modified on a separate page by non-technical users using simple inputs. Using parameters allows you to create advanced templates for Weblayers, Experiments, Tag manager, Webhooks, and new HTML Blocks.

πŸ“˜

Template parameters are different than Jinja

Jinja allows you to insert personalization. Read more about Jinja here.

Where to use template parameters

Template parameters can be used in the following places:

πŸ“˜

New HTML Blocks

We have implemented new HTML Blocks and old HTML Blocks will be slowly discontinued in line with our Migration plan.

Learn how to use parameters with new HTML blocks in our guide!


Basic Syntax

The most basic template parameter looks like this:

[[ parameter ]]

Here's what the user sees in the application:

336336

As you can see, you can define multiple parameters and create a template that is easy to use even for non-technical people. For example, this is a simple Tag template using 3 simple template parameters:

10121012

Specifying Parameter Type

You can specify the type of the parameter like this:

[[ parameter : type ]]

Where type is one of these:

  • string (default) – a simple one-line text
  • text – multi-line text
  • number – accepts only a number
  • color – accepts only color values in HEX form and shows a color picker
  • enum – allows the user to select from a set of predefined values
  • recommendation – allows the user to select a recommendation from the project
  • metric – allows the user to select a metric from the project
  • date – date picker
  • time – time picker
  • datetime – date and time picker which allows selecting a timestamp
  • boolean – accepts a true/false value
  • image – input with (+) button to access the file manager, accepts a file URL

Using the Enum Type

If you want to use the enum type, you have to use the following syntax:

[[ parameter : enum(value1, value2, value3) ]]

You can provide any number of values you like. The user will see a select box with those values and will be allowed to choose from them.

346346 370370

Using these types allows us to create better templates. We can improve the previous Tag template like this:

10201020

Whitespace

Whitespace is not important and is ignored. You can use it however you like. The only whitespace which matters is in the parameter name and enum values. For example, all these are valid:

[[ defaultParam ]]
[[  defaultColorParam  ]]
[[ stringParam:string ]]
[[ multilineTextParam : text ]]
[[numberParam:number]]
[[ colorParam:  color]]
[[ enumParam :   enum(   simple, advanced) ]]

Default Values

You can specify a default value for a template parameter using this syntax:

[[ parameter | default value ]]
[[ parameter : type | default value ]]

For example, in the template above, we could set the default request method like this:

[[ method : enum(GET, POST) | GET ]]

Recommendations and Metrics

Using the recommendation and metric type allows your users to select a recommendation or a metric from the current project. They'll see a nice select box and you'll get the ID of the picked item in your code.

257257

Special Characters

You can use special characters in the parameter name as well as in the default value and the enum options. For example, these are valid parameter definitions:

[[ text > 99% ]]
[[ text < 99% ]]
[[ headline : string | GET NOW!!! ]]

Examples

[[ bannerText ]]
[[ buttonBgColor ]]

[[ buttonText : string ]]
[[ bannerBody : text ]]
[[ showDelay : number ]]
[[ bannerBgColor : color ]]

[[ bannerPrimaryAction | Add to cart ]]
[[ primaryActionColor : color | #ffd500 ]]

[[ httpMethod : enum(GET, POST, PUT, DELETE) | GET ]]
[[ horizontalAlign : enum(left, right) ]]

[[ recommendation model : recommendation ]]

[[ when to stop : datetime ]]
[[ target holiday : date ]]