Content in a Content Block can be made dependent on a variable. Variables are used in templates, giving a level of flexibility when this template is used in a journey. You can then fill out this variable and influence the final look and feel of the content.
Example: I want a multi-functional button, but must be able to adapt the size and the alignment. In this case, you can create a Content Block for the button and have two variables defined for the color and the alignment.
A template variable exists on template level and when used in a Content Block, the value selected for the variable applies to all Content Blocks in the template using that variable.
To use an existing template variable in the Content Block the following syntax is used.
[%[VARIABLE.Name]%]
Example: <sg:conditional id="social" expression="all(eq([VARIABLE.Social], 'true'))">
All content added in between these sg:conditional tags will be dependent on the value that you enter for the variable.
A local variable is defined and used in the Content Block.
To use a local variable in a Content Block that does not yet exist in the template, the following SG syntax is used:
<sg:var name="" type="" value="" alias="" description="" />
You can set :
- a name
- the type of the variable. This defines the type of value that is expected for the variable and the way it is displayed in the interface: a text variable will only allow to enter textual values, a color variable displays a color selector, a boolean variable displays a check box.
- the default value (optional) for this variable. When used in a content, the default value is automatically applied.
- an alias (optional). This is used in the variable field in the Content Block properties. If no alias is provided, the name of the variable is used.
- a description (optional). This is displayed below the variable field in the Content Block properties.
<sg:var name="MyText" type="Text" value="mytext" alias="my_alias" description="my_description" />
<sg:var name="Mycolor" type="Color" value="#0000FF" alias="my_alias" description="my_description" />
<sg:var name="MyName" type="Number" value="75" alias="my_alias" description="my_description" />
<sg:var name="MyBoolean" type="Boolean" value="TRUE" alias="my_alias" description="my_description" />
<sg:var name="MyDecimal" type="Decimal" value="0,01" alias="my_alias" description="my_description" />
<sg:var name="MyDateTime" type="Datetime" value="2019-10-17 10:00" alias="my_alias" description="my_description" />
<sg:var name="MyDate" type="Date" value="2019-10-17" alias="my_alias" description="my_description" />
<sg:var name="MyTime" type="Time" value="10:00" alias="my_alias" description="my_description" />
<sg:var name="My_image" type="image" value="" />
Example:
On the left, the Content Block created in the Library chapter, contains 3 variables of type boolean, text, and color.
On the right, when using the Content Block in a message, the properties window displays all 3 variables (boolean as a toggle, text as a text field, color as a color picker), with their alias and description. 
Additionally, with sg:option you can define different possible variable values to choose from:
<sg:var name="MyValues" type="text" value="option2">
<sg:option value="option1">Option 1</sg:option>
<sg:option value="option2">Option 2</sg:option>
</sg:var>
Example 1:
Have a look at this example, where the color (that will be used later on as background color of the template header) is stored as a variable with 2 possible options:
Using the Content Block in a template, the color variable is listed in the Content Block component properties. The 2 color options are displayed, which can be toggled.
In the style dialog of the template header, adding 'background-color: [color variable name]' as custom style, applies the selected option of the sg:var color variable in the Content Block as background color to the message header (which is currently purple).
Switching to the other color option in the Content Block component properties (to green), automatically updates the template header color.
The same way, in every section of the template where the variable is used, the color will be adapted to the selected value in the Content Block.
Example 2:
A variable of type image is added to the Content Block and used in an image tag:
In the message, an image can be selected for this variable:
Note: Local variables are defined in the Content Block, and for each Content Block added to the template, the variable value needs to be defined. This means that although the same Content Block can be used multiple times, they can all look differently.
When template variables are used in a Content Block, this value is defined only once when using it in the template and applied to all Content Blocks using that variable.
More information on the use of Content Blocks with variables can be found in this topic.
