Menu

You can reference fields in your Email Design System to control what parts of your HTML you want to make editable, and how. This helps create an easy editing experience for your teams who'll be making emails in Taxi, as they can clearly see what is editable, and the options available to them.

Referencing fields in your Email Design System means you can:

  • Include the fields for things you want editors to be able to change
  • Don't include fields for what needs to be locked down.


Music: https://www.bensound.com/royalty-free-music

There are 2 attributes that can be used to replace content in a Taxi Email Design System:

  • replace=
  • replace-attributename= (where attributename is a typical HTML attribute, such as href)

In an anchor tag we typically use both kinds 

<a replace-href="{{href}}" href="http://taxiforemail.com" replace="{{link_text}}">visit our site</a>

The replace attribute tells Taxi to replace the content of the tag with the value from the link_text field, and the replace-href tag tells Taxi to replace the href attribute with the value from the href field.

The pattern of replace-attribute works with any attribute, not just hrefs.

  • The presence of, or value of, the original attribute value has no effect on the final rendered email, but it can be used to make the link work when previewing the Design System before loading it into Taxi
  • It is not required to include a corresponding attribute= just because you've included replace-attribute=

So far we have seen curly brackets used to reference a single variable. Multiple lookups in a single replace attribute are possible, as is having fixed content or a mixture of fixed content and variables. For example consider this editable: 

<editable name="headline"> <field name="fontcolor" type="color" default="#333333"></field> <field name="size" type="number" default="20"></field> <field name="content" type="text"></field> <span replace-style="color:{{fontcolor}}; font-size:{{size}}pt;" replace="{{content}}"></span> </editable>
  • Note that the contents of the original attribute will be overwritten entirely. In the example above, if you had additional style declarations specified, they would need to be added to the replace- attribute also.

Referencing in colour dropdowns

You can also reference fields in colour dropdown value and default attributes. For example, replace-default="{{document.field_name}}" or replace-value="{{document.field_name}}".

This is very useful when setting different styling across brands, such as colours or font sizes.

First you would start with fields either at document level or in a branding module that is outside of a modulezone. Only fields created at document level, or within a document level module, can be referenced in your EDS dropdown choice fields.

In this example, these will be for five different brand colours.

<module name="branding" label="Brand Settings">
<field type="colour" name="colour_1" label="Colour 1" default="#000000"></field>
<field type="colour" name="colour_2" label="Colour 2" default="#ffffff"></field>
<field type="colour" name="colour_3" label="Colour 3" default="#C429C1"></field>
<field type="colour" name="colour_4" label="Colour 4" default="#235296"></field>
<field type="colour" name="colour_5" label="Colour 5" default="#24D013"></field>
</module>

Then in any dropdowns throughout your Email Design System you can reference these fields as the value of a choice or default of the field.  

<field type="colour" name="text_colour" label="Text Colour" replace-default="{{modules.branding.colour_1}}">
<choice label="Colour 1" replace-value="{{modules.branding.colour_1}}"></choice>
<choice label="Colour 2" replace-value="{{modules.branding.colour_2}}"></choice>
<choice label="Colour 3" replace-value="{{modules.branding.colour_3}}"></choice>
<choice label="Colour 4" replace-value="{{modules.branding.colour_4}}"></choice>
<choice label="Colour 5" replace-value="{{modules.branding.colour_5}}"></choice>
</field>

Typically in a colour dropdown, the value will be a hex code. Here the value is a reference to the field in the branding module, so whatever is selected in that module controls the value of the choices.

This will enable you to have different colour dropdowns across brands. In each brand set the appropriate defaults in the branding module and then these will be used in all the dropdowns throughout the EDS.

If you need to update these values it has to be done in the Email Design System code or brand settings.

Top Tip for brands: You may have one brand with 5 colours and another brand that needs 4 colours. In this scenario, with the second brand, you can leave one of the colour fields in the branding module blank. This means that only 4 options will be visible in the dropdowns for this brand.

Currently you can't reference rich text, dropdowns or image fields in a dropdown value or default. If you feel you need this functionality please reach out to our support team and we can discuss your needs with you.

This functionality works with both colour and normal dropdown fields.

Next: Referencing variables across a document

Back to Advanced Syntax

← Back to /Code