Using dynamic HTML templates in Meteor emails

Question

Is there a way to render a Meteor template as the HTML body of an email?

For example if I want to show collection data or generate dynamic links inside that email.

Answer 1

Yes this is possible, here I provide a client-side solution to this common problem.

First you should define a simple template that will serve as your email html body :

<template name="shareEmailContent">
  <p>{{message}}</p>
  <a href="{{url}}">{{title}}</a>
</template>

Then you can use Email.send (see Email.send at docs.meteor.com, you'll need some proper configuration such as adding the email Smart Package and setting MAIL_URL) to email the result of the template rendering. Email.send only works on the server, so you must define a server method callable from the client.

Server side :

Meteor.methods({
  sendShareEmail:function(options){
    // you should probably validate options using check before actually
    // sending email
    check(options,{
      from:String,
      // etc...
    });
    Email.send(options);
  }
});

Client side :

var dataContext={
  message:"You must see this, it's amazing !",
  url:"http://myapp.com/content/amazingstuff",
  title:"Amazing stuff, click me !"
};
var html=Blaze.toHTMLWithData(Template.shareEmailContent,dataContext);
var options={
  from:"[email protected]",
  to:"[email protected]",
  subject:"I want to share this with you !",
  html:html
  })
};
Meteor.call("sendShareEmail",options);

As mentioned in the comments, you can also decide to render email templates on the server. Server-side rendering is not yet supported but you can still accomplish it using a third party templating package.

EDIT 06/09/2014 : updated to use the latest Blaze API as of Meteor 0.9.1

Answer 2

Meteor 1.0. If you want to send templated emails from your server:

1.Install the meteor package email:

meteor add email

meteor add blaze

2.Create an email account at sendgrid or just get the smtp parameters from your email provider. I didn't test with gmail. But with sendmail, it was straithforward!

3.Configure the smtp settings in /server/smtp.js:

Meteor.startup(
function (){
    process.env.MAIL_URL = 'smtp://<username>:<password>@smtp.sendgrid.net:587';
}

);

4.You can use the following on your server.js:

myfunction(){
   var html = Blaze.toHTML(Blaze.With(data, function() { return Template.my_template; }));
   Email.send({
            from: "My company name <[email protected]>",
            to: "[email protected]",
            subject: "Any subject...",
            html: html
        });
   }

5.Create your template in /client/template/my_template.html:

<template name="my_template">
    Hello <b>{{name}}</b>
</template>

Notice that {{name}} here refer to the properties defined in data, defined as data = {name: "John"}. The following template will output as: "Hello John", and all the html tags will be saved into the variable html.

6.Call myfunction() anywhere in your server code. Et voilà! The email will be sent. If you don't receive the email, make sure it didn't go into your spam.

This method still need the template to be in the client side.

Answer 3

accepted answer uses client side code. If you are looking to build email templates client side code can be insecure. there is a package(meteor-ssr) for server side rendering templates you can use that.