Overview
Dynamic Content is composed of two elements: Shared Content and Snippets.
Shared Content are reusable templating elements that can easily be used in all Templates. Common examples of Shared Content include Email Headers and Footers, Social Media icons, and legal disclaimers. Once Shared Content is present in Templates, any changes to the configuration of the Shared Content will cause all instances of the Shared Content to update. This content is considered global.
Snippets are not global like Shared Content. Instead, Snippets are configured for each Template individually. While Snippets are meant to be used within a single template, Shared Content is created with multiple templates in mind and can be used in any number of different templates. Snippets are commonly used to handle data management or advanced properties in a separate location than an HTML Template. Instead of coding everything within one file, a Snippet allows the organization of data and is referenced in the final product. This content is considered local.
Both Shared Content and Snippets are written in HTML and FreeMarker. Knowledge of these languages is necessary to use Dynamic Content effectively. Find more information on FreeMarker here.
| Dynamic Content is considered an advanced feature. Improper use of HTML can lead to a template not rendering correctly. |
Table of Contents
Common Examples of Dynamic Content
Shared Content
Creating Shared Content
Navigate to Message → Content → Shared Content to access the Dynamic Content feature. In doing this, Shared Content is saved in a file format. You will then need to select the appropriate folder and use the Actions button to add a new Shared Content. After a Shared Content item is created, it will be available to reference in any template within your organization.
Give the Shared Content a name and description and save the first version of the content.
Similar to when you use Snippets, the Shared Content Library is a repository of macros, functions, HTML, and other coded content for use within templates. Because Shared Content is managed as an asset, each instance of it can be organized into folders and have differing Permissions applied.
The code for including Shared Content in a template looks like this:
<#include '/global/yoursharedcontentname’>
HTML and FreeMarker
All Dynamic Content, whether it’s Shared Content or Snippets, is written in HTML. FreeMarker, a third-party template engine, is supported in Accelerator.
Shared Content can be created in the available text editor or imported from a local file.
| Familiarity of the Audiences that could be used with this Dynamic Content is important. Variables from Audiences must be listed in the correct format. |
The benefit of using Shared Content is the ability to easily reuse items that are present on multiple Templates.
Type or paste the HTML into the Dynamic Content editor and use the Action drop-down to save.
Testing Shared Content
When ready to implement Shared Content, it is a best practice to test the content before exiting. If the Shared Content has not been tested, a warning will display.
Changes to Shared Content will also change any Template that currently uses the Shared Content. It will also remind the user that this Shared Content will be available to select for all Templates.
Using the Test feature, the Shared Content will automatically detect if there are any issues in variable names, data types, or naming conventions. If there are issues, the testing interface will display up to 100 of the detected errors with a description of the issue.
Note: It is recommended to resolve these errors before saving the Shared Content. Acknowledging the risk, a user can choose to save the Shared Content without testing.
Once saved, the Shared Content is available for use in Templates.
Snippets
Snippets are Dynamic Content, but are not considered global like Shared Content. Instead, Snippets are considered local. Snippets are configured and used within one Template. Open a Template to the Template Overview screen to add a new Snippet.
The method of creating a Snippet is the same as creating Shared Content. Clicking the + Snippet button opens the Snippet view. The Snippet view displays any created Snippets. Use the Action button in the top right to add a new Snippet.
The Snippet editor works in the same manner as the Shared Content editor. HTML and FreeMarker are supported.
Snippets are commonly used for data manipulation purposes. For example, if the data coming in from an Audience must be processed and modified for a later API call, Snippets are useful for centralizing all the data manipulation processes under one name. This is one of many uses for Snippets.
Snippets can be created using one of two views. The default view when editing or creating a Snippet is the Source View. Switching to the WYSIWYG Editor allows for easier formatting. WYSIWYG stands for What You See Is What You Get. This is the preferred formatting for those without knowledge of HTML.
If using Snippets for the FreeMarker features, the Source view must be used.
Snippets also support importing a file instead of creating the HTML in the editor.
Use the Theme drop-down to change the style of the text editor. It is set to Default automatically, but there are dozens of additional options.
Once configured, use the Test button to check the Snippet against the Template.
Save the Snippet to be able to place it in a Template.
Use the Back to Snippet List to exit the Snippet Editor.
| Multiple Snippets and Shared Content can be used in Templates. |
Adding Dynamic Content
Templates can be added through the Drag-and-Drop Editor or the HTML Editor.
Adding Dynamic Content with the Drag-and-Drop Editor
Dynamic Content is an option under the Content tab. Click and drag the Dynamic Content to the appropriate location.
With the Dynamic Content item selected on the Template, select the Shared Content or Snippet desired from the Content Properties. All Snippets are named "local/Snippet_Title". Shared Content is named "global/Content_Title".
It is important to Preview the Template when using Dynamic Content to ensure the message is rendering properly. This is also why it is important to test Dynamic Content prior to use.
Adding Dynamic Content with the HTML
While the Drag-and-Drop Editor is a valuable tool, knowledge of HTML, CSS, and FreeMarker leads to more customization. Adding Dynamic Content through the Source View is simple.
Using FreeMarker, adding Dynamic Content is one line of code.
For Snippets: <#include 'local/Snippet_Title'>
For Shared Content: <#include 'global/Shared_Content_Title'>
Common Examples of Dynamic Content
Shared Content in HTML Template
Variable Assignment with Snippets
Snippet Content in HTML Template
Email Footer
Static items, pieces of content that don’t change from one email to another, are easily handled using Shared Content. This could be a visual header to an email with a company logo and a hyperlink or an email footer with legal disclaimers and an unsubscribe link. Anything that will be constant in all Templates can be implemented with Shared Content.
Below is a basic example of an Email Footer described in a Shared Content and added to an HTML Template.
Shared Content Code
<!--footer section-->
<tr>
<td valign="top" align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#69d2e7">
<tr>
<td width="50" class="em_side"> </td>
<td valign="top" align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td height="60" class="em_height"> </td>
</tr>
<tr>
<td valign="top" align="center"><table width="200" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td valign="top" width="32"><a href="#" target="_blank" style="text-decoration:none;"><img src="https://s3.amazonaws.com/mg-demo-assets/1490713870953_Welcome/images/fb.png" alt="FB" height="32" border="0" width="32" style="border:none; display:block; font-family:Arial, sans-serif; font-size:16px; line-height:18px; color:#000000; text-align:center;" /></a></td>
<td width="10"> </td>
<td valign="top" width="32"><a href="#" target="_blank" style="text-decoration:none;"><img src="https://s3.amazonaws.com/mg-demo-assets/1490713870953_Welcome/images/tw.png" alt="TW" height="32" border="0" width="32" style="border:none; display:block; font-family:Arial, sans-serif; font-size:16px; line-height:18px; color:#000000; text-align:center;" /></a></td>
<td width="10"> </td>
<td valign="top" width="32"><a href="#" target="_blank" style="text-decoration:none;"><img src="https://s3.amazonaws.com/mg-demo-assets/1490713870953_Welcome/images/insta.png" alt="INSTA" height="32" border="0" width="32" style="border:none; display:block; font-family:Arial, sans-serif; font-size:16px; line-height:18px; color:#000000; text-align:center;" /></a></td>
<td width="10"> </td>
<td valign="top" width="32"><a href="#" target="_blank" style="text-decoration:none;"><img src="https://s3.amazonaws.com/mg-demo-assets/1490713870953_Welcome/images/yt.png" alt="YT" height="32" border="0" width="32" style="border:none; display:block; font-family:Arial, sans-serif; font-size:16px; line-height:18px; color:#000000; text-align:center;" /></a></td>
<td width="10"> </td>
<td valign="top" width="32"><a href="#" target="_blank" style="text-decoration:none;"><img src="https://s3.amazonaws.com/mg-demo-assets/1490713870953_Welcome/images/pin.png" alt="PIN" height="32" border="0" width="32" style="border:none; display:block; font-family:Arial, sans-serif; font-size:16px; line-height:18px; color:#000000; text-align:center;" /></a></td>
</tr>
</table></td>
</tr>
<tr>
<td height="20" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td valign="top" align="center" style="font-family:Arial, sans-serif; font-size:13px; line-height:20px; color:#ffffff;"><strong>Call:</strong> <a>+0 123 456 789</a> | <span>Email:</span> <a>contact@getawayhotels.com</a></td>
</tr>
<tr>
<td height="10" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td valign="top" align="center" style="font-family:Arial, sans-serif; font-size:13px; line-height:20px; color:#ffffff;"><span style="font-weight:bold;">Address:</span> 191 Peachtree St NE, Atlanta, GA, USA.</td>
</tr>
<tr>
<td height="56" class="em_height"> </td>
</tr>
</table></td>
<td width="50" class="em_side"> </td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" align="center" class="em_aside"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td height="20" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td valign="top" align="center" style="font-family:Arial, sans-serif; font-size:12px; line-height:20px; color:#999999;">© 2017. All Rights Reserved. | <span style="text-decoration:underline; color:#999999;"><a href="#" target="_blank" style="text-decoration:underline; color:#999999; white-space:nowrap;">View Online</a></span> | <span style="text-decoration:underline; color:#999999;"><a href="#" target="_blank" style="text-decoration:underline; color:#999999;">Unsubscribe</a></span></td>
</tr>
<tr>
<td height="20" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table></td>
</tr>
<!--//footer section-->
Shared Content in Template
<div style="padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;"><#include 'global/CWL Company Footer'></div>
Content Output
Email Header
Shared Content Code
<div align="center" class="img-container center autowidth " style="padding-right: 0px; padding-left: 0px;">
<!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr style="line-height:0px;line-height:0px;"><td style="padding-right: 0px; padding-left: 0px;" align="center"><![endif]-->
<img class="center autowidth " align="center" border="0" src="https://mg-cf.s3.amazonaws.com/img/77D2A95D1ABD2AA8C3A3790EF87B601AD9BAA3D3/City%20%26%20Glory/Welcome-email_03.jpg" alt="Image" title="Image" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block !important;border: 0;height: auto;float: none;width: 100%;max-width: 343px" width="343" />
<!--[if mso]></td></tr></table><![endif]-->
</div>
Shared Content in HTML Template
<div style="padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;"><#include 'global/Training/CWL City & Glory Header'></div>
Content Output
Variable Assignment with Snippets
Not all items of Dynamic Content are visible. Snippets are a great way to centralize all Variable Assignments under one easy-to-manage set of instructions. Instead of coding this directly into a Template, the code is placed in a Snippet and easily referenced within an HTML Template or the Drag-and-Drop Template Editor.
Snippet Content Code
<#assign cust_token = ${Recipient.cust_code} + "-" + ${Gears.recipientId()} + ${Gears.date}>
<#assign cust_name = ${Recipient.preferred_name + " " + ${Recipient.last_name}>
Snippet Content in HTML Template
<#include 'local/Variables'>
Comments
0 comments
Please sign in to leave a comment.