How To Use Custom Email Templates In Gravity

Kyle Gawley
Kyle Gawley
Gravity founder
How To Use Custom Email Templates In Gravity

Gravity includes a super-clean, responsive email template for sending transactional emails, but you can also add your own templates to cover a wider variety of use cases.

I recommend using htmlemail.io for premium templates. Gravity customers get 20% OFF – you’ll receive a coupon via email after you purchase.

This guide will show you how to implement a custom email template in Gravity.

Adding a Custom Email Template To Gravity

  1. Download the HTML template to the /emails folder.
  2. Pass the template name to the mail helper:
mail.send({
	
  to: 'name@domain.com',
  html_template: 'your_template_name.html'

});

Injecting The Custom Email Body

The mail helper will automatically inject a content body between {{body}} in your template so you can add custom content to each email using the same template.

The body for each template is stored in the email table in the database.

A typical email body looks like this:

Woohoo! {{content.friend}} has accepted your invitation to join your team.

The mail helper will automatically wrap each line of the body separated with \n in a styled paragraph tag.

Injecting Custom Values

You can also inject values into the body using brackets like this: {{content.value}} within the body content. In the example above, we can inject a friend’s name by passing a content object with a friend key to the mail.send helper:

mail.send({

  to: 'name@domain.com'
  html_template: 'invite_accepted.html',
  content: { 
  
    name: 'Kyle' 
    
  }
});

Adding a Button

If your email template includes a call to action button; you can inject the button_label and button_url values from the database by adding the following HTML to your template:

<a href='{{button.url}}'>{{button.label}}</a>

The mail helper will automatically inject the values for you.

That’s it! You can see how all of this works in practice inside the helper/mail function and by looking at the default template.html file inside the /emails folder.

Download The Free SaaS Boilerplate

Build a full-stack web application with React, Tailwind and Node.js.