Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

Use Handlebars templates with the Trigger Email extension

If you specified a "Templates collection" parameter during configuration of the extension, you can create and manage Handlebars templates templates for your emails.

Template collection structure

Give each document a memorable ID that you use as the template name in the documents you write to your templates collection.

The template document can include any of the following fields:

  • subject: A template string for the subject of the email.
  • text: A template string for the plaintext content of the email.
  • html: A template string for the HTML content of the email.
  • amp: A template string for the AMP4EMAIL content of the email.
  • attachments: An array of attachments with template strings as values; Nodemailer options supported: utf-8 string, custom content type, URL, encoded string, data URI, and pre-generated MIME node (be aware that your email has no access to the cloud server's file system).

An example template might have an ID of following and content like:

{
  subject: "@{{username}} is now following you!",
  html: "Just writing to let you know that <code>@{{username}}</code> ({{name}}) is now following you.",
  attachments: [
    {
     filename: "{{username}}.jpg",
     path: "{{imagePath}}"
    }
  ]
}

Send emails using templates

To deliver email using templates, when adding documents to your mail collection, include a template field with name and data properties. For example, using our following template from above:

admin
  .firestore()
  .collection("MAIL_COLLECTION")
  .add({
    toUids: ["abc123"],
    template: {
      name: "following",
      data: {
        username: "ada",
        name: "Ada Lovelace",
        imagePath: "https://example.com/path/to/file/image-name.jpg"
      },
    },
  });

Template Partials

You can compose templates using reusable partials by specifying {partial: true} in the template document. Each of the standard data fields (subject, html, text, and amp) will be defined as a partial used only in its own environment. For example, a partial called footer might have data like:

{
  partial: true,
  html: "<p>This mail was sent by ExampleApp, Inc. <a href='https://example.com/unsubscribe'>Unsubscribe</a></p>",
  text: "This mail was sent by ExampleApp, Inc. Unsubscribe here: https://example.com/unsubscribe"
}

In another template, include the partial by referencing its name (document ID):

<p>This is my main template content, but it will use a common footer.</p>

{{> footer }}