HTML snippets

HTML snippets can contain any contents that a section can have, such as text, images, variable data, dynamic tables, etc. Just like other types of snippets, HTML snippets are stored in the Snippets folder on the Resources pane, but their file name ends in .html.

This topic contains information that only applies to HTML snippets. If you want to know how to add an existing (remote) snippet to the resources, or how to create an empty HTML snippet, please see Snippets.

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

Using content to create an HTML snippet

To turn a part of a letter into an HTML snippet for reuse in the content of a template:

  1. Open the section and select the part or parts that should be saved to a snippet.

  2. Right-click the selection, point to Snippet and click Create to copy the selected part to a new snippet, or Create Shared Content to create the new snippet and replace the selected part with a reference to the new snippet.

  3. Give the snippet a name.

Note: Elements in a Print section that have a fixed or absolute position can be anchored to a specific page. It is recommended not to use these in a snippet, since they will appear on the page they are anchored to, even if the snippet is inserted on another page.

Adding an HTML snippet to a section

Drag-and-drop

To add an HTML 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.

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. 

Note: If an HTML snippet with expressions is loaded through a script, the expressions won't get replaced with values. Use a Handlebars template instead. (See Handlebars templates).

Editing a snippet

To edit a snippet, open the snippet file by double-clicking it on the Resources pane.

Editing shared content

By default, an HTML snippet that is being used as shared content can also be modified in a section where it is used. That way you actually adjust its source. The snippet will be changed at all locations where it is used.

The option to modify shared content snippets from within a section can be turned off:

  • In the menu, select View > Shared Content Editing to enable or disable editing of all shared content.

  • To enable or disable editing on a case by case basis, you can also manually set the contenteditable attribute on the Article element of the shared content to true or false. This overrides the menu setting.

Note: 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.

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:

  1. Open the section in which the snippet is used.

  2. Switch to Source view.

  3. Look for the <article> element in the HTML and replace the old snippet name with the new name in the source attribute.

Translating a snippet

Snippets in a multilingual template get translated at the moment they are inserted in the output, if the text is tagged for translation. For more information see Translating templates and Tagging text in snippets.