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.

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.

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


Next: Referencing variables across a document