Account Snippets

Account Snippets allow Administrators and Designers to predefine information for an entire account in Outfit. This information can then be pre-populated within templates to remove the hassle of re-entering rarely changing content. Things like head office locations and primary brand assets are great elements to turn into Account Snippets.

To add an Account Snippet there are two steps that must happen:

  1. Defining the Account Snippet
  2. Adding the Account Snippet into a template

Defining an Account Snippet

  1. From the menu, navigate to the Account Settings screen
  2. Once there, click on Your Brand tab in the horizontal secondary navigation
  3. Then, click Snippets in the middle horizontal navigation User Interface Screenshot
  1. To add a new global Account Snippet click on the + New Snippet button. This then adds a new Account Snippet in the row below. User Interface Screenshot
  1. Hover over the Account Snippet and click the pencil icon to edit it. Give the Account Snippet a unique tag name, the tag name is one single string so use dashes and underscores instead of spaces (and preferably in lower case). This tag will be utilised in our templates and act as a reference of where the content will be placed. For example if I wanted to add a head office Account Snippet I would call the tag head-office.
  2. Next add the Account Snippet content by clicking within the box and entering text. Account Snippet content can contain anything from a simple text string, to HTML, CSS and even some simple JS scripts. If you’re working on creating a more comprehensive and complex snippet, there is the option to increase the size of the code editor by clicking the expand button.
  3. Once the two fields have been filled out, we can hit Save to add the Account Snippet. User Interface Screenshot

Adding the Account Snippet into a template

In templates we use HTML & CSS, however to make the editable inputs we use a Javascript language called Mustache. It is a Mustache tag that we will mainly be dealing with in the templates. They are super easy to spot as well, they look like the following (a set of closing and opening curly brackets with a tag name inside).

{{{ i-am-a-mustache-tag }}}

Unlike normal inputs, account snippets will utilise the prefix of ‘account.snippets.’ If we are replacing an existing editable input with an Account Snippet, all we need to do is to change the existing Input tag name to our Account Snippet tag name along with the prefix account.snippets..

So taking the example of the head-office Account Snippet, we would simply navigate to the index.html.mst of a template, find the corresponding input that handles the head office and replace it with the following:

{{{ account.snippets.head-office }}}

User Interface Screenshot

So when we Save this file and open up a document, residing in project within the account, we will find that the head office now reflects the information that was populated in the Account Snippet. Easy peasy.

User Interface Screenshot

To add an Account Snippet to a template that does not already exist as an editable input, you can simply add a new Mustache tag with the Account Snippet name remembering to add the prefix account.snippets..

{{{ account.snippets.head-office }}}

The styling of the Account Snippet you add to a Template will depend on the styling applied to the HTML element it sits within. Content within Account Snippets do support HTML markup, including the ability to add styling and scripts. For example, adding the below content to the Account Snippet and adding it as an additional Mustache tag {{{account.snippets.head-office}}} just below the existing head office tag, would result in the following. User Interface Screenshot

User Interface Screenshot

For experienced developers that may from time to time use Account Snippets to add content to in the form of HTML attributes or to alter scripts, there may occasionally be a need to use double Mustache tags in place of triple Mustache tags.

Triple Mustache tags {{{ i-am-a-triple-mustache-tag }}} return unescaped HTML (meaning HTML markup will be read and executed). This is standard and preferred practice when adding or editing tags to Templates in Outfit.

Double Mustache tags {{ i-am-a-double-mustache-tag }} return escaped HTML (meaning characters used in HTML markup will be converted to their corresponding HTML character entities e.g. " instead of “).