When building an Email Design System you'll want to make sure that the teams creating emails are using each field in the right way. For example, ensuring they don’t use too much text for a headline or that they don’t leave a particular field blank. You can use expectations to add this level of control to your Design System.

This means that you can tell Taxi exactly what you want from the different parts of your Email Design System, so you can do more to stop emails being exported with content missing or with content you don’t want.

For example below, there is a placeholder image that has to be changed before the email is exported from Taxi. There is a message in the editor telling you it needs to be changed and there will also be a warning if you try to export this email without changing the image. Therefore reducing the chance of this email getting sent out with a placeholder image.


To find out more information about how this will appear in your Taxi account, have a look a this help article.

To add this to your code, you use the expect attribute on fields or editables. You can use more than one expectation per field or editable. To do this, separate them with semicolons, similar to CSS.

<editable rich name="text" default="lorem ipsum" expect="must-change;no-blank;copy-limit:30">
</editable>


The values you can use in this attribute are:

Must-change

If this is applied then the field has to be changed before the email is exported. For example, if you have ‘Lorem ipsum’ placeholder copy, you can use the must-change expectation to make sure this isn’t in the email when it is exported. 

The field must be changed before the email can be exported. This expectation can be used on all fields.

<editable name="text" default="lorem ipsum" type="text" expect="must-change"></editable>

No-blank

This means that the field has to have a value input before the email is exported, it can’t be left empty. This expectation can be used on all fields.

<editable rich="" name="text" default="lorem ipsum" expect="no-blank"></editable>

Must-translate

This is similar to the must-change attribute but it means that the fields in the non master version of a mailing must not be inheriting their content from the master version. This can be used on all fields.

<editable rich name="text" default="lorem ipsum" expect="must-translate"></editable>

Copy-limit

You are able to set a limit on the number of characters that can be used in rich text fields. The field will show a warning when the copy limit is exceeded and you won’t be able to export the email.

Unlike the above expectations, which are just a single word such as no-blank or must-change, this expectation uses a key pair value, so you’re able to define the number of characters in the copy-limit.

<editable rich name="text" default="lorem ipsum" expect="copy-limit:20"></editable>

Values

This expectation can be used in alignment fields. It enables you to define which alignment options you want to be available in the editor. For example, if you only wanted the choice of left and centre alignment but not right.

<field name="alignment" type="align" expect="values:left centre"></field>

Existing attributes

There are several attributes that can be used in a field tag that control what options are available in that field, such as allow-custom on a colour field or allow-styles on a rich text field. These existing attributes can also be used as expectations.

Allow-custom

This attribute is used on dropdown colour fields when you have a set list of colours to choose from but you also want to input a custom hex code if needed. For example, allow-custom="true". You can include this expectation using the key pair value of true or false. If you include just allow-custom on it’s own, this is the equivalent of allow-custom:true.

<field type="colour" name="colour" expect="allow-custom:true"></field>
<field type="colour" name="colour" expect="allow-custom"></field>

Allow-none

Allow-none can be used on image fields and will give you the option to not include an image when there is an image field in your Design System. This can be used as a value in the expect attribute instead of as an attribute itself. You can also use allow-none:true to have the option to not include an image.

<field type="src" name="image" expect="allow-none"></field>

Allow-styles

This is used to define what styles you want available on individual rich text fields. For example, allow-styles="bold italic". It can be used in the same way in the expect attribute with the styles separated by a space.

<field type="rich" name="text" expect="allow-styles:bold italic"></field>

Format

This can be used on colour fields to define what formats can be used, such as hex, rgb or rgba. The default is hex if you don’t define a format and you can use one format in any colour field.

<field type="colour" name="colour" expect="format:rgb"> </field>


When the expect attribute includes something which is also set with a custom attribute, then you will see a warning when you upload your HTML. For example, if allow-custom is set as an attribute but also as part of the expect attribute. 

If the expect attribute contradicts another attribute in that field then there will be an error message when you upload your HTML. For example, allow-custom="true" and expect="allow-custom:false" in the same field would cause an error message.

Other considerations

These expectations can be used on editables or fields. If used on an editable, all fields within that editable will use that expectation. If used on a field, the expectation will only apply to this field, and if that field is within an editable that has a different expectation, the field expectation will take precedence.

Not all expectations can apply to all fields, for example you can’t have a copy limit on a colour field. If a field is inside an editable that uses an expectation that can’t be used, the expectation will be ignored for that field. If no fields in the editable can use the expectation then you will see a warning message when you upload your HTML.