Meteor JS: How to set up templates in html to send email ?

For do this you can use the package :

 meteorhacks:ssr


https://atmospherejs.com/meteorhacks/ssr

Example :

To call : ( My mail.js file )

Meteor.methods({
sendConfirmationLinkUser: function(userId,email){
 var url = Meteor.absoluteUrl() + "confirmation/email/" +userId;
 var html = SSR.render('userConfirmationMail', {url:url});
 var subject = "Email Confirmation ";
 var to = email;
 try{
 Meteor.call('sendMail',to, subject, html);
 }catch(err){
 throw Meteor.Error(err.reason);
 }
}
});

Tips:

  • Here you can pass values and collections for your Template.
 var html = SSR.render('userConfirmationMail', {url:url});

In this example I send for there a url attribute, but you can pass N values like :

 var html = SSR.render('userConfirmationMail', {url:url, value2:value2, value3:value3});

  • When you will use this values you need call this.value2, this.url, etc …

Make the template : ( Javascript File )

userConfirmationMail.js

  • Here you can implement the helpers and functions that you will need to build your email.
SSR.compileTemplate("userConfirmationMail", Assets.getText("emailTemplates/userConfirmationMail.html"));

Template.userConfirmationMail.helpers({
    getConfirmationURL: function() {
        return this.url;
    }
});

Tips: :

SSR.compileTemplate("userConfirmationMail", Assets.getText("emailTemplates/userConfirmationMail.html"));
  • You will call by this name : userConfirmationMail
  • This is the path in your application :  “emailTemplates/userConfirmationMail.html”

userConfirmationMail.html ( HTML file)

In this file you need put your html code.

<html lang="pt-Br" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!--[if gte mso 9]>
     <o:OfficeDocumentSettings>
      <o:AllowPNG/>
      <o:PixelsPerInch>96</o:PixelsPerInch>
     </o:OfficeDocumentSettings>
    </xml><![endif]-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">

    <title></title>

</head>
<body style="width: 100% !important;min-width: 100%;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100% !important;margin: 0;padding: 0;background-color: #FFFFFF">
<style id="media-query">
    /*  Media Queries */
    @media only screen and (max-width: 500px) {
        .prova {
            width: 500px; }
        table[class="body"] img {
            width: 100% !important;
            height: auto !important;
{...}

</body></html>

Tips :

  • For you call any helper method use : {{getHelperMethodName}}
  • The HTML files need be in the private directory in your application.

Screen Shot 2015-10-14 at 5.03.18 PM

  • All styles need be in this file.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s