General

Page Contents

Specific Documentation
Content Blocks
Default Block Layout
Library Block Reference
Rich Text Editor
Language versioning
Indexing Attribute Editor
Toggles
Indexing Toggles
Edit & Runtime
Ignore Tags
Data Target
Data Syntax
Restricting Colors
Predefined Colors
Inserting Assets
Internal Links
Adding Events

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

A template is required to have one or more blocks defined to be compatible with the editor.

Block groups are defined using agblockgroup.

Blocks are defined using 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. A default value is required to be defined.

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 |LANG option is available on

STRING
LINK

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.

Ignore Tags

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.