General
Page Contents
We use the same syntax and editor across Email, Transactional email, Web, Advisor and Print templates. All documentation on this page are universal for all five channels. However, each type of template also has it’s own documentation for channel specific purposes.
Specific Documentation
Content Blocks
Define groups of blocks with agblockgroup
and agrepeatingblock
.
Practical implications of Content blocks.
Define a parent container for blocks with agblockgroup="active"
.
<div agblockgroup="active"></div>
Define the blocks with agrepeatingblock="active"
.
<div agblockgroup="active">
<div agrepeatingblock="active"></div>
<div agrepeatingblock="active"></div>
<div agrepeatingblock="active"></div>
</div>
Disable blocks with agrepeatingblock="inactive"
.
<div agblockgroup="active">
<div agrepeatingblock="active"></div>
<div agrepeatingblock="inactive"></div>
<div agrepeatingblock="active"></div>
</div>
agrepeatingblock
is required to be an immediate child of an agblockgroup
.
agid
‘agid’ is a unique identifier for blocks and editable fields, allowing you to rearrange and edit the markup in the future, without losing already configured content. We encourage you to define ‘agid’ on agblockgroup, agrepeatingblock and ageditable before uploading a template.
If the template is uploaded with ‘agid’ missing, ‘committing’ the template will automatically generate missing ‘agid’ attributes. We do not guarantee the naming of ‘agid’ remains the same forever – therefore if you upload a template without ‘agid’ values you must download the template with the assigned values and use this as your basis going forward.
<div agblockgroup="active" agid="header_group">
<div agrepeatingblock="active" agid="title"></div>
<div agrepeatingblock="active" agid="image"></div>
<div agrepeatingblock="active" agid="auto_20220421_170411"></div>
</div>
If agid
is changed or deleted, the mapping of the blocks will be lost and the blocks removed from exisiting content.
Default Block Layout
Define which blocks will be pre-inserted on new emails, pages or prints with blockreference
and agid
.
<div agblockgroup="active" agid="header_group">
<link type="blockreference" href="two-column">
<link type="blockreference" href="three-column">
<div agrepeatingblock="active" agid="two-column"></div>
<div agrepeatingblock="active" agid="three-column"></div>
<div agrepeatingblock="active" agid="rep_auto_20220421_170511"></div>
</div>
agrepeatingblock
with agid two-column
and three-column
are preselected.
The <link>
tag is required to be an immediate child of an agblockgroup
and the href
is required to be an existing agid
.
Library Block Reference
The <link>
tag supports both existing template blocks, as well as saved Library Blocks. To automatically insert a Library Block when creating a new Email, use the following (replace path to Library Block):
<link type="blockreference" href="/Campaign_Modules/Header_Block">
Rich Text Editor
Enable our rich text editor on an element with ageditable
and all editor options enabled.
align_justify
has limited support in email clients.
Enable our rich text editor on an element with ageditable
and no editor options enabled.
<div ageditable=""></div>
ageditable
is required to be a child, but not an immediate child, of an agrepeatingblock
.
ageditable
is required not to be present on these elements.
ageditable
and blockparam
cannot be on the same element.
Attribute Editor
Enable our attribute editor on attribute values with templateparam
and blockparam
.
Practical implications of our attribute editor.
Define settings on template level with templateparam
.
<body style="background-color: ${templateparam:namespace::name|TYPE|default_value};">
templateparam
are required to be defined outside agrepeatingblock
.
Define settings on block level with blockparam
.
<a href="${blockparam:namespace::name|TYPE|default_value}">
blockparam
are required to be defined inside agrepeatingblock
and not on an ageditable
element.
Reference the value of templateparam
or blockparam
with ref
.
<div style="background-color: ${ref:namespace::name};">
ref
is required to be defined after the parameter it references and is required to be within the same block if it references a blockparam
.
namespace
Define a namespace
for a group of settings.
<a href="${blockparam:Content::name|TYPE|default_value}">
name
Define a name
for each setting within a namespace
.
Underscore in namespace
and name
displays as a space between words in the editor.
TYPE
Define which kind of configuration is enabled in the editor.
IMAGE
enables the asset selector.COLOR
enables the color picker.LINK
enables the link editor.STRING
enables a text input.INTEGER
enables an integer input (No decimals).NUMBER
enables a number input (With decimals).
default_value
Define the default value on settings.
Restrict Values
Define a selection of values on settings.
The first value in an array will be used as the default value.
Arrays are required to be limited to COLOR
, STRING
, INTEGER
and NUMBER
.
Changing or deleting templateparam
and blockparam
will overwrite settings on exisiting emails, pages or prints.
Language versioning
aglanguage
Add the aglanguage
html attribute to template elements in order to predefine a specific language version to that element. Elements with the aglanguage
attribute defined, must at least have a “default” language version specified.
The aglanguage
value must be the ‘name’ of the specified language as specified in the “Settings / International” panel, not the language key!
<tr aglanguage="English">
In case you have multiple language keys specified for a particular language, you can specify the language keys by adding aglanguagekey
. The aglanguagekey
attribute takes a comma separated list of keys as value.
<tr aglanguage="English" aglanguagekey="uk,us">
LANG
Append |LANG
to templateparam
or blockparam
to unlock the editor for language versions.
The addition of |LANG
is not effective on all templateparam
and blockparam
. Typically LINK
and STRING
related to link URLs and texts are commonly using |LANG
.
Practical implications of language versions.
Indexing Attribute Editor
Define the order of namespace
in the editor with param-namespace-order
.
<meta name="param-namespace-order" content="Content">
Define the order of name
in the editor with param-order
.
<meta name="param-order" param-namespace="Content" content="Button_URL,Button_text,Button_background_color">
Define the order of multiple namespace
and name
in the editor.
<meta name="param-namespace-order" content="Body,Content">
<meta name="param-order" param-namespace="Body" content="Background_color">
<meta name="param-order" param-namespace="Content" content="Button_URL,Button_text,Button_background_color">
param-namepsace-order
and param-order
are required to be in the <head>
.
Toggles
Define toggles on template level with ag-show-template
.
<div ag-show-template="namespace::name"></div>
ag-show-template
are required to be defined outside agrepeatingblock
.
Define toggles on block level with ag-show-block
.
<div ag-show-block="namespace::name"></div>
ag-show-block
are required to be defined inside
agrepeatingblock
.
namespace
Define a namespace
for a group of toggles.
<div ag-show-block="Content::name"></div>
name
Define a name
for each toggle within a namespace
.
<div ag-show-block="Content::Image"></div>
<div ag-show-block="Content::Headline"></div>
<div ag-show-block="Content::Text"></div>
<div ag-show-block="Content::Button"></div>
Default State
Append |false
to ag-show-template
or ag-show-block
to set the element as removed by default.
<div ag-show-block="Content::Image|false"></div>
ag-show-template
and ag-show-block
removes the entire element and it’s children.
Indexing Toggles
Define the order of namespace
in the editor with param-namespace-order
.
<meta name="ag-show-namespace-order" content="Content">
Define the order of name
in the editor with param-order
.
<meta name="ag-show-order" param-namespace="Content" content="Image,Headline,Text,Button">
Define the order of multiple namespace
and name
in the editor.
ag-show-namepsace-order
and ag-show-order
are required to be in the <head>
.
Edit & Runtime
Define elements to be present in the editor but removed at runtime with agactive
.
<div agactive="edit"></div>
Define elements to be removed in the editor but present with agactive
at runtime.
<div agactive="runtime"></div>
agactive
removes the entire element and it’s children.
Define tags to be ignored at runtime with agignore
.
<div agignore="true"></div>
Removes the tag, but leaves it’s children at runtime.
Data Target
Define which tag we copy for each instance of data inserted into agrepeatingblock
in the editor.
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr agrepeatingtarget="active">
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
agrepeatingtarget
is required to be a child, but not an immediate child, of an agrepeatingblock
.
Practical implications of Data target.
Data Syntax
Insert data into ageditable
, templateparam
and blockparam
.
<persondata>FIRSTNAME</persondata>
Practical implications of data.
Insert data into <img src="">
.
<img src="https://<persondata>IMG_SRC</persondata>">
The protocol is required outside the data syntax.
Practical implications of data on images.
Insert data into <a href="">
.
<a href="https://{URL}"></a>
The protocol is required outside the data syntax.
Practical implications of data on links.
Insert data into a link parameter
<a href="https://www.store.com?profile=:EMAIL"></a>
Insert data anywhere outside of ageditable
, templateparam
and blockparam
.
{param:PERSONAL_COLOR}
This data syntax are required to be outside of ageditable
, templateparam
and blockparam
.
Restricting Colors
Restrict colors in the editor.
<meta name="restrict-font-color" content="#000000,#ffffff">
Note that it says restrict-font-color. It is all colors used by the editor and is not restricted to font colors.
restrict-font-color
is required to be in the <head>
.
Predefined Colors
Predefined Colors in the editor.
<meta name="predefined-color" content="#FFFFFF,#000000,#C9333E,#444444,#B12E37">
If no ‘restrict-font-color’ meta tag is present, the ‘predefined-color’ tag will allow you define a list of colors available to the configurator in the editor.
- If restrictions are placed on either ‘meta’ tag level, or on individual blockparameters (restricting attribute colors) – these will take priority.
Inserting Assets
Define the path to an asset.
<img src="../resources/templates/web/default/img/banner.jpg">
Assets are always located in the /resources/
folder.
Internal Links
Define a link to an Agillic web page (both examples below are supported).
<a href="menu://web/user/profile">
<a href="page://web/user/profile">
Define a link to an Agillic resource.
Adding Events
Define an event on a link.
<a href="https://www.agillic.com/?evt=AddPoints">
The value of evt
is required to match an event name in Agillic.