Creating a snippet

A snippet is an HTML template assigned an id, retrieved via an SDK or API, and shared by an organization.

Logically, a snippet is a group of content or components that change together. Think of a snippet as a custom element you leave someone else to fill.

Physically, a snippet can be any valid HTML string you'd like to extract, outsource, and share:

  • plain-text;
  • an <h1> element;
  • a page of <div> elements;
  • a web component class
  • whatever you'd like!

Creating a snippet

To create a snippet:

  1. Sign in to your account.
  2. Click the "New snippet" button:
    • If this is your first snippet, the button is below the welcome message.
    • If not, the button is in the top-right of the page.
  3. Enter a name for your snippet to help tell them apart.
  4. Enter your snippet's content using the online code editor.
    • You can use variables, filters, control, and iteration with the Liquid template language.
  5. Click the "Save" button to view your saved snippet.
  6. Copy the code for your SDK (or the id) and paste it into your application.

That's it!

Using templates

Every snippet is a template: the same snippet can product different output using the Liquid template language and dynamic parameters.

Input
Hello {{ name }}!
Output
<!-- if params.name = "Jack" -->
Hello Jack!

<!-- if params.name = "Nancy" -->
Hello Nancy!

Learn more about using templates by:

Validation rules

There are a few things to keep in mind when creating snippets:

  • Snippets must be shorter than 20 pages of markup. If you find yourself needing more than 216 UTF-8 characters, split your snippet in two.
  • Snippets should be valid HTML. Be sure to close tags; use elements supported by your target browsers; etc. We'll take care of escaping special HTML characters like <, >, and & to their Unicode-escaped equivalent.
  • Snippets should be safe HTML. Don't include untrusted third-party <script> tags! Protect your snippets like you protect your source code. We'll do our best to help, but you're your best defense.

Next steps

Now that you know how to create a snippet, learn more about assigning variables.

Assigning a variable Ask a question