Building Reusable Email Components with Snippets

January 25, 2018

In this guide, you'll learn how to create and use snippets as well as get a sense of some common use cases for snippets. Get the full email source code here to follow along with the examples.

Getting Started

You've imported your first template into Dyspatch, what next? This is the perfect opportunity to take advantage of Dyspatch Snippets. Snippets are designed to centralize commonly used blocks of code across multiple email templates. Snippets make updating your templates simple because any changes made to a single snippet will automatically be reflected across all templates that reference it.

Take a look at our Dyspatch invitation email, what are some elements you can spot that could be used across many email templates?

Dyspatch Email Example

If you said the header and footer, you're absolutely correct! Since both of these components will be used across multiple email templates, these are the perfect candidate for snippets!

There are three main steps you'll need to know about snippetizing your template:

  1. Find the code block of the component you would like in a snippet
  2. Create a snippet
  3. Reference that snippet

That's it! Let's start off by moving the header section out of the HTML and placing it into a snippet.

HTML

In the highlighted code below, we're selecting the code that displays the Dyspatch header logo. Let's cut that section out and paste it into a snippet.

...
<center style="width: 100%;">

	<!-- Email Header : BEGIN -->
		<table cellspacing="0" cellpadding="0" border="0" align="center" width="600" style="margin: auto;" class="email-container">
			<tr>
				<td style="padding: 20px 0; text-align: center">
					<a href="https://wwww.dyspatch.io/">
						<img src="https://d1pgqke3goo8l6.cloudfront.net/cLwlDJWDTy14v0HkabkB_Dyspatch%20Logo.png" width="150" alt="Dyspatch Logo" border="0">
					</a>
				</td>
			</tr>
		</table>
	<!-- Email Header : END -->

	<!-- Email Header Icon : BEGIN -->
	<table cellspacing="0" cellpadding="0" border="0" align="center" width="600" style="margin: auto;" class="email-container">
...

Snippet — Dyspatch Header

In this example, we have created a snippet named Dyspatch Header and pasted the header code in the snippet body.

<table cellspacing="0" cellpadding="0" border="0" align="center" width="600" style="margin: auto;" class="email-container">
	<tr>
		<td style="padding: 20px 0; text-align: center">
			<a href="https://wwww.dyspatch.io/">
				<img src="https://d1pgqke3goo8l6.cloudfront.net/cLwlDJWDTy14v0HkabkB_Dyspatch%20Logo.png" width="150" alt="Dyspatch Logo" border="0">
			</a>
		</td>
	</tr>
</table>

Updated HTML

After the snippet has been created, we will now reference it in the HTML. Simply add the following Jinja snippet call.

...
<center style="width: 100%;">

	<!-- Email Header : BEGIN -->
				{% snippet "Dyspatch Header" %}
	<!-- Email Header : END -->

	<!-- Email Header Icon : BEGIN -->
	<table cellspacing="0" cellpadding="0" border="0" align="center" width="600" style="margin: auto;" class="email-container">
...

Perfect! When completed, the template design should look exactly the same.

Let's quickly move the footer into its own snippet too.

HTML

Following the three steps, first, navigate to the section where the footer code lives.

...
	</table>
		
	<!-- FOOTER : START -->
	<table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="email-container" style="margin: auto;" width="600">
		<tbody>
			<tr>
				<!-- FOOTER LOGO: START -->
				<td style="padding: 30px 0px 10px 0px; text-align: center" >
					<a href="https://www.dyspatch.io/">
						<img alt="Dyspatch Logo" border="0" src="https://d1pgqke3goo8l6.cloudfront.net/cLwlDJWDTy14v0HkabkB_Dyspatch%20Logo.png" width="150" /> 
					</a>
				</td>
			</tr>
			<!-- FOOTER LOGO: END -->
			<!-- FOOTER : START -->
			<tr>
				<td align="center" style="font-family:Helvetica, Arial, sans-serif; text-align:center; border-collapse:collapse; color:#a4a4a4; text-decoration:none; font-size:14px; padding-bottom:30px; line-height:2" >
					<a href="https://app.dyspatch.io/" style="text-decoration:none; color:#a4a4a4">Website</a> | 
					<a href="https://docs.dyspatch.io/" style="text-decoration:none; color:#a4a4a4">Support</a> | 
					<a href="https://docs.dyspatch.io/api/" style="text-decoration:none; color:#a4a4a4">Docs</a>
					<br />
					3252 19th St, #A , San Francisco, CA 94110 <br />
					© 2018 All Rights Reserved
				</td>
			</tr>
		</tbody>
	</table>
	<!-- FOOTER : END -->

</center>
...

Snippet — Dyspatch Footer

Second, create a snippet and paste the code into the snippet body. In this example, the footer snippet is named Dyspatch Footer.

<table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="email-container" style="margin: auto;" width="600">
	<tbody>
		<tr>
			<!-- FOOTER LOGO: START -->
			<td style="padding: 30px 0px 10px 0px; text-align: center" >
				<a href="https://www.dyspatch.io/">
					<img alt="Dyspatch Logo" border="0" src="https://d1pgqke3goo8l6.cloudfront.net/cLwlDJWDTy14v0HkabkB_Dyspatch%20Logo.png" width="150" /> 
				</a>
			</td>
		</tr>
		<!-- FOOTER LOGO: END -->
		<!-- FOOTER : START -->
		<tr>
			<td align="center" style="font-family:Helvetica, Arial, sans-serif; text-align:center; border-collapse:collapse; color:#a4a4a4; text-decoration:none; font-size:14px; padding-bottom:30px; line-height:2" >
				<a href="https://app.dyspatch.io/" style="text-decoration:none; color:#a4a4a4">Website</a> | 
				<a href="https://docs.dyspatch.io/" style="text-decoration:none; color:#a4a4a4">Support</a> | 
				<a href="https://docs.dyspatch.io/api/" style="text-decoration:none; color:#a4a4a4">Docs</a>
				<br />
				3252 19th St, #A , San Francisco, CA 94110 <br />
				© 2018 All Rights Reserved
			</td>
		</tr>
	</tbody>
</table>

Updated HTML

Finish off by referencing the snippet in the HTML.

...
	</table>

	<!-- FOOTER : START -->
		{% snippet "Dyspatch Footer" %}
	<!-- FOOTER : END -->

</center>
...

CSS

Now that both components are in snippets, let's see if we can go a step further. Another element of the template we can move into a snippet is the embedded CSS style rules. That's right! You can even pull common CSS rules used in multiple emails into its own snippet. This will ensure all emails maintain consistency by using the same colours and design.

You know the deal — find the section where the code lives, create a snippet, and cut and paste that code block into the snippet.

Snippet — Base CSS

<!--[if mso]>
  <style>
    * {
      font-family: sans-serif !important;
    }
  </style>
<![endif]-->


<style type="text/css">
  html,
  body {
    margin: 0 auto !important;
    padding: 0 !important;
    height: 100% !important;
    width: 100% !important;
  }
  * {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }
  div[style*="margin: 16px 0"] {
    margin: 0 !important;
  }
  table,
  td {
    mso-table-lspace: 0pt !important;
    mso-table-rspace: 0pt !important;
  }
  table {
    border-spacing: 0 !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
    Margin: 0 auto !important;
  }

  table table table {
    table-layout: auto;
  }
  img {
    -ms-interpolation-mode: bicubic;
  }
  .mobile-link--footer a,
  a[x-apple-data-detectors] {
    color: inherit !important;
    text-decoration: underline !important;
  }
  .button-td,
  .button-a {
    transition: all 100ms ease-in;
  }
  .button-td:hover,
  .button-a:hover {
    background: #2077cd !important;
    border-color: #2077cd !important;
  }
  
 @media only screen and (max-width: 600px)  {
    .email-container {
      width: 100% !important;
      margin: auto !important;
    }

    .fluid,
    .fluid-centered {
      max-width: 100% !important;
      height: auto !important;
      Margin-left: auto !important;
      Margin-right: auto !important;
    }
    .fluid-centered {
      Margin-left: auto !important;
      Margin-right: auto !important;
    }
    .stack-column,
    .stack-column-center {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      direction: ltr !important;
    }
    .stack-column-center {
      text-align: center !important;
    }
    .center-on-narrow {
      text-align: center !important;
      display: block !important;
      Margin-left: auto !important;
      Margin-right: auto !important;
      float: none !important;
    }
    table.center-on-narrow {
      display: inline-block !important;
    }
  }
</style>

Updated HTML

Complete it by referencing the newly created snippet in the HTML of the template.

...
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">

{% snippet "Base CSS" %} 

</head>
...

Nested Snippets

Let's wrap this guide up with one final example. You may have noticed both our Header and Footer snippets use our Dyspatch Logo. If you're thinking would you be able to use a snippet within a snippet? You sure can!

Snippet — Dyspatch Logo

<a href="https://www.dyspatch.io/">
  <img alt="Dyspatch Logo" border="0" src="https://d1pgqke3goo8l6.cloudfront.net/cLwlDJWDTy14v0HkabkB_Dyspatch%20Logo.png" width="150" /> 
</a>

Snippet — Dyspatch Header

<table cellspacing="0" cellpadding="0" border="0" align="center" width="600" style="margin: auto;" class="email-container">
  <tr>
    <td style="padding: 20px 0; text-align: center">
      {% snippet "Dyspatch Logo" %}
    </td>
  </tr>
</table>

Snippet — Dyspatch Footer

<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="email-container" style="margin: auto;" width="600">
  <tbody>
    <tr>
      <!-- FOOTER LOGO: START -->
      <td style="padding: 30px 0px 10px 0px; text-align: center" >
        {% snippet "Dyspatch Logo" %}
      </td>
    </tr>
    <!-- FOOTER LOGO: END -->
    <!-- FOOTER : START -->
    <tr>
      <td align="center" style="font-family:Helvetica, Arial, sans-serif; text-align:center; border-collapse:collapse; color:#a4a4a4; text-decoration:none; font-size:14px; padding-bottom:30px; line-height:2" >
        <a href="https://app.dyspatch.io/" style="text-decoration:none; color:#a4a4a4">Website</a> | 
        <a href="https://docs.dyspatch.io/" style="text-decoration:none; color:#a4a4a4">Support</a> | 
        <a href="https://docs.dyspatch.io/api/" style="text-decoration:none; color:#a4a4a4">Docs</a>
        <br />
        3252 19th St, #A , San Francisco, CA 94110 <br />
        © 2018 All Rights Reserved
      </td>
    </tr>
  </tbody>
</table>

With Snippets, the opportunities are endless! At this point, your email should look exactly the same, but your email is in a much better state. Your team can now utilize these same components to maintain consistency across all of your emails. Furthermore, editing these snippets is quick and easy. No more having to go into every individual email template to make the same exact change!

Have a neat idea for using Dyspatch snippets? Want to share the concept with other users? Reach out to the Customer Success team at success@dyspatch.io. Have any questions? Let us know at support@dyspatch.io.


Complete HTML

The complete HTML used in every example in this guide.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<!--[if mso]>
		<style>
			* {
				font-family: sans-serif !important;
			}
		</style>
	<![endif]-->

	<style type="text/css">
		html, body {
			margin: 0 auto !important;
			padding: 0 !important;
			height: 100% !important;
			width: 100% !important;
		}
		* {
			-ms-text-size-adjust: 100%;
			-webkit-text-size-adjust: 100%;
		}
		div[style*="margin: 16px 0"] {
			margin: 0 !important;
		}
		table, td {
			mso-table-lspace: 0pt !important;
			mso-table-rspace: 0pt !important;
		}
		table {
			border-spacing: 0 !important;
			border-collapse: collapse !important;
			table-layout: fixed !important;
			margin: 0 auto !important;
		}

		table table table {
			table-layout: auto;
		}
		img {
			-ms-interpolation-mode: bicubic;
		}
		.mobile-link--footer a, a[x-apple-data-detectors] {
			color: inherit !important;
			text-decoration: underline !important;
		}
		.button-td, .button-a {
			transition: all 100ms ease-in;
		}
		.button-td:hover, .button-a:hover {
			background: #2077cd !important;
			border-color: #2077cd !important;
		}
		
		@media only screen and (max-width: 600px)  {
			.email-container {
				width: 100% !important;
				margin: auto !important;
			}

			.fluid, .fluid-centered {
				max-width: 100% !important;
				height: auto !important;
				margin-left: auto !important;
				margin-right: auto !important;
			}
			.fluid-centered {
				margin-left: auto !important;
				margin-right: auto !important;
			}
			.stack-column, .stack-column-center {
				display: block !important;
				width: 100% !important;
				max-width: 100% !important;
				direction: ltr !important;
			}
			.stack-column-center {
				text-align: center !important;
			}
			.center-on-narrow {
				text-align: center !important;
				display: block !important;
				margin-left: auto !important;
				margin-right: auto !important;
				float: none !important;
			}
			table.center-on-narrow {
				display: inline-block !important;
			}
		}
	</style>
</head>
<body>
  <div style="background-color:#FBD1A4;">
  	<!--[if gte mso 9]>
		<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
			<v:fill type="tile" src="https://d1pgqke3goo8l6.cloudfront.net/fuuff5BsSyaEd4oiMmy5_bg-blue-light-gradient-lighter.jpg" color="#FBD1A4"/>
		</v:background>
  	<![endif]-->
  <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td valign="top" align="left" background="https://d1pgqke3goo8l6.cloudfront.net/fuuff5BsSyaEd4oiMmy5_bg-blue-light-gradient-lighter.jpg">

  		<center style="width: 100%;">

		<!-- Email Header : BEGIN -->
		<table cellspacing="0" cellpadding="0" border="0" align="center" width="600" style="margin: auto;" class="email-container">
			<tr>
				<td style="padding: 20px 0; text-align: center">
					<a href="https://www.dyspatch.io/">
						<img src="https://d1pgqke3goo8l6.cloudfront.net/cLwlDJWDTy14v0HkabkB_Dyspatch%20Logo.png" width="150" alt="Dyspatch Logo" border="0">
					</a>
				</td>
			</tr>
		</table>
		<!-- Email Header : END -->

		<!-- Email Header Content : BEGIN -->
		<table cellspacing="0" cellpadding="0" border="0" align="center" width="600" style="margin: auto;" class="email-container">
			<tr>
				<td style="padding: 40px; text-align: center; font-family: sans-serif; font-size: 34px; mso-height-rule: exactly; line-height: 40px; color: #555555;">
					You have been invited to participate on a Dyspatch team.
				</td>
			</tr>
		</table>
		<!-- Email Header Content : END -->

		<!-- Email Body : BEGIN -->
		<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="600" style="margin: auto;" class="email-container">

			<!-- CONTENT : BEGIN -->
			<tr>
				<td style="padding: 50px; text-align: left; font-family: sans-serif; font-size: 16px; mso-height-rule: exactly; line-height: 26px; color: #555555; border: 1px solid #deebfa;">
					You have been invited to participate using Dyspatch. Once logged in you'll be able to contribute to creating content for <b>{{ teamName }}</b>.
					<br /><br />
					<!-- Button : BEGIN -->
  					<div align="center">
						<!--[if mso]>
							<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://app.dyspatch.io" style="height:50px;v-text-anchor:middle;width:180px;" arcsize="13%" stroke="f" fillcolor="#3e9fff">
							<w:anchorlock/>
							<center>
						<![endif]-->
							<a class="button-a" href="https://app.dyspatch.io" style="border-bottom: 3px solid #2077cd; background-color:#3e9fff; border-radius:5px; color:#ffffff; display:inline-block; font-family:sans-serif; font-size:20px; font-weight:bold; line-height:50px; text-align:center; text-decoration:none; width:180px; -webkit-text-size-adjust:none;">Get Started</a>
						<!--[if mso]>
							</center>
							</v:roundrect>
						<![endif]-->
					</div>
					<!-- Button : END -->
					<div style="text-align: center; margin: 0 auto;">
						<p>
							Thanks,<br /> 
							The Dyspatch Team
						</p>
					</div>
				</td>
			</tr>
			<!-- CONTENT : END -->

		</table>

<!-- FOOTER : START -->
	<table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="email-container" style="margin: auto;" width="600">
		<tbody>
			<tr>
				<!-- FOOTER LOGO: START -->
				<td style="padding: 30px 0px 10px 0px; text-align: center" >
					<a href="https://www.dyspatch.io/">
						<img alt="Dyspatch Logo" border="0" src="https://d1pgqke3goo8l6.cloudfront.net/cLwlDJWDTy14v0HkabkB_Dyspatch%20Logo.png" width="150" /> 
					</a>
				</td>
			</tr>
			<!-- FOOTER LOGO: END -->
			<!-- FOOTER : START -->
			<tr>
				<td align="center" style="font-family:Helvetica, Arial, sans-serif; text-align:center; border-collapse:collapse; color:#a4a4a4; text-decoration:none; font-size:14px; padding-bottom:30px; line-height:2" >
					<a href="https://app.dyspatch.io/" style="text-decoration:none; color:#a4a4a4">Website</a> | 
					<a href="https://docs.dyspatch.io/" style="text-decoration:none; color:#a4a4a4">Support</a> | 
					<a href="https://docs.dyspatch.io/api/" style="text-decoration:none; color:#a4a4a4">Docs</a>
					<br />
					3252 19th St, #A , San Francisco, CA 94110 <br />
					© 2018 All Rights Reserved
				</td>
			</tr>
		</tbody>
	</table>
<!-- FOOTER : END -->
<!-- Email Body : END -->
					</center>
				</td>
			</tr>
		</table>
	</div>
</body>

</html>

Didn't find what you're looking for?

Ask our support team, we're here to help!

Contact Support