Templates are the HTML markup that your app block injects into the email and/or page and forms HTML markup. The guidance on this page should be considered when authoring your templates to ensure your extension block markup works as expected.

Well formed HTML

Please ensure your app block HTML is well formed and valid HTML.

Our recommendation is to building your app block HTML within the Easy Editor itself using the Edit source option toensure your app block's content displays well and interacts well with EasyEditor settings and entities.

This is strongly recommended to ensure your app block can display in columns, and if you include buttons within your app block. Utilizing the EasyEditor to create and build column content will make sure it adheres to wider EasyEditor rules and displays properly on different devices/in different inboxes.

Once you are happy that the markup for your app block is working well, take the markup and ready to use as the template field for your app block when you register it.

Refering to parameters values

If you want to reference your app block's parameter values then simply use the token pattern: [[id of parameter]] in your HTML to insert the value.

e.g.

[[accountName]]

<h2>Welcome [[firstName]] to the Acme monthly newsletter</h2>

🚧

When referring to parameters please ensure you get the case correct as the references are case sensitive.

Referring to assets

When referring to any external assets, such as images, please ensure that you refer to them using HTTPS based links, as insecure web assets will not be loaded in preview and often not within the email clients either.

Using JavaScript

If your app block is designed to be used within the email EasyEditor then you must be careful to test JavaScript in the template, as email clients may block it from running for security reasons; our recommendation is to avoid JavaScript within email scoped app blocks.

If your app block is scoped to the pages and forms EasyEditor only, then JavaScript is permitted to be included in your template HTML.

CSS Styling

Your app blocks can be designed one of two ways - which way you choose determines how much control Dotdigital users have over styling the content of the extension blocks within their wider email campaigns:

Option 1 - User can manage basic styles

This option allows an end user to manage the styles that the app block is utilizing in the app style manager within EasyEditor, available under Utilities > Manage All Styles.

Click the App Block Styles button to edit the styles for the following HTML tag types:

• <p>
• <h1>
• <h2>
• <h3>
• <h4>
• <a>

In order for users to be able to manage these options, you must use these HTML tags and not attempt to override the style of them with either inline style attributes or CSS.

In the EasyEditor style editor select the tag type you want to edit the style for:

Edit the tag style as desired:

Option 2 - User has no control over styles

If you insert your own specific styles into your app blocks HTML using either inline style attributes or CSS, then our style manager won’t affect those tags, leaving them as is.

This means the app block content might have specific styles that clash or do not mesh well with a user’s overall campaign. In general Option 1 is recommended to avoid this and leave the user in control.

If you do use styling within an app block, those styles will be extracted during the send process and inserted into the email campaign header to ensure proper rendering in different types of inboxes.