Snippets

A snippet is a small, ready-to-use piece of content in a file. Snippets can be re-used within the same template, in all contexts and sections. They can contain any contents that a section can have, such as text, images, variable data, dynamic tables, etc.
Normally, a snippet is an HTML file, but it can also be a JSON file.

When a snippet is added to different sections or contexts, it is displayed according to the section's or context's style sheet. This means that the same content can look different depending on the styles applied to the section or context, without changing the content.

It is possible to open and edit any HTML or JSON file in the Designer: select File > Open, select All files (*.*) as the file type and then select a HTML or JSON file.

Adding a snippet to the Resources

Before adding a snippet:

Import the resource files that are related to the snippet, such as image files and CSS files, into the template file. Drag and drop the files to the corresponding folders (Images and Stylesheets, respectively) on the Resources pane. If you want to use external images, see Images.
Drag the snippet itself to the Snippets folder on the Resources pane, or create a new snippet from an existing piece of content in the template (see Creating a snippet).

Remote snippets

A remote snippet is an HTML file that is not located within your template file but is hosted on a Content Management System or other location.

To add a remote snippet:

Right-click the Snippets folder on the Resources pane, and click New Remote Snippet.
Enter a name for the file as it appears in the Snippets folder. This name is shown in the Snippets folder with the .rhtml file extension.
Enter the URL for the remote resource. This must be a full URL, including the http:// or https:// prefix, domain name, path and file name.

Remote snippets may contain other resources, such as images. There is one limitation though: only absolute paths are supported inside remote snippets. Images and other resources referred to with a relative path (for example: images/img.gif) or root-relative path (any path starting with a slash, for example: /base/images/img.gif) won't be available in the template.

Adding a snippet to a section

Drag-and-drop

To add the snippet to the content of a section, drag the snippet from the Snippets folder on the Resources pane to the desired location in a section.
Check the option Insert as shared content to insert a reference to the original snippet in the template, rather than a copy of the original snippet.
When a snippet is being used as shared content, the contents of the snippet itself are not added to the page. Modifying the snippet on the page actually modifies the snippet's source. If a snippet is used in multiple locations (such as different contexts and sections), modifying one instance will modify all of them at once.

Remote snippets inserted as shared content cannot be changed from within the Designer. Of course, their source file can be edited outside of the Designer. When that happens, the changes will become visible in remote snippets that are inserted as shared content.

Via a script

In addition to the drag-and-drop method, it is possible, and often useful, to insert a snippet or part of it, using a script; for remote snippets this is normal practice. See Loading a snippet via a script.

To export a snippet from your template, drag or copy/paste it out of the Snippets folder to a folder on the local hard drive.

Creating a snippet

To turn a parts of a letter, email or web page into a snippet for reuse in the content of a template:

Open the section and select the part or parts that should be saved to a snippet.
Right-click the selection, point to Snippet and click Create.
Give the snippet a name.

Renaming a snippet

To rename a snippet, right-click it on the Resources pane in the Snippets folder and select Rename.

If you rename a snippet that was inserted into a section as shared content, you need to update the reference to the snippet manually:

Open the section in which the snippet is used.
Switch to Source view.
Look for the <article> element in the HTML and replace the old snippet name with the new name in the source attribute.

JSON Snippets

JSON Snippets are snippets that contain pieces of JSON data instead of HTML. Just like HTML snippets, JSON snippets are stored in the Snippets folder on the Resources pane, but their file name should end in '.json'.

JSON Snippets cannot be inserted into the content directly, but they can be accessed via a script using the function loadjson():

var json_data = loadjson("snippets/snippet.json");
results.html(json_data.field1);