The Outkit Support and Developer Hub

Welcome to the Outkit support and developer hub. Here you'll find comprehensive guides and documentation to help you start working with Outkit as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started     Guides

Template Concepts

Save time, use templates. Here’s everything you need to know.

Templates can be a huge time-saver, but Outkit templates aren’t your ordinary templates. We use inheritance to supercharge them. But what do we mean by that? We’ll get to that shortly, but first a few words on syntax.

Template syntax

Our templates support the Handlebars syntax. Basically, you write normal text or HTML and insert placeholders for variable data with a syntax like this: {{this_is_a_local}}. So, in context that might look something like this:

<h1>Welcome to {{product_name}}!</h1>
<p>Hi {{first_name}}, we’re so happy to have you on board.</p>

Handlebars also supports block expressions, including control flow:

{{#if title}}
  <h2>{{title}}</h2>
{{/if}}

You can read more about what Handlebars supports on their website.

Now, what’s the deal with template inheritance?

Data inheritance

Picture a set of stairs. At the top is your team. A few steps down is the project that your template belongs to. Below that is your template. And at the very bottom is the message.

team
    project
        template
            message

Now let’s say that your template uses the following snippet: Welcome to {{product_name}}. If you have followed our Getting Started guide, or perhaps read about locals/variables in the documentation for messages, you might think that the only way to inject the value for product_name into your message is by setting it in the data property of the message, like so:

{
  "data: {
    "product_name": "Acme Knives",
  },
}

But that’s not the case - that’s just one way to do it.

In most cases, this particular piece of data would best be defined on the project, if we assume that project == product, which it will for most companies. However, if this was a huge product, and the company behind it only had this one product, you could probably define it on the team, since team == company == product in that case.

The point of all this is that data can and should be defined as high up as it makes sense, and then be inherited all the way down to the message, according to the order we described earlier.

If something is defined on multiple levels, for example on the team and the project, the lowest definition (closest to the message) will always override what has been inherited from higher up.

Structural inheritance

A template is more than data, though. There’s also a lot of HTML markup, CSS and plain text. Why can’t this be inherited too? Ah, but it can!

If your project has multiple templates that share a footer and header, then those footers and headers can be defined on the project, and the templates will be wrapped inside them.

project header
    template body
project footer

But why stop there? If every template in every project has the same "Can’t read this email? Click here to read it on the web" intro at the top, and the same tiny "An Acme product" message at the bottom, why not define them on the team, and wrap the projects in those? That’s exactly how Outkit works!

team header                 <-- Can’t read this email? Click here
    project header          <-- Product logo and header
        template body       <-- Click here to reset your password
    project footer          <-- Facebook | Twitter | Blog
team footer                 <-- An Acme product

And it doesn’t stop with markup and text. The exact same system is in place for CSS/styles. Define your team styles on your team, then give each project their own look, and override at the template level (if you even need to). Pretty sweet.

team styles
    project styles
        template styles

By using our inheritance system wisely, setting up a new template can be as easy as clicking a few buttons and tweaking just a tiny amount of markup, and you’re good to go with a sweet-looking template.


What's Next

Now that you know the theory behind our templates, it’s time to learn how to create and edit them.

Template Editor