Meteor and HTML email

Hello,
I’m trying to make email with HTML. Now it sending just a plain text.
HTML page is ready and all I should do is integrate it in existing code.
And here I’m not sure how to do it.
Now I have a code like this:

                        let subject = 'Confirmation  ' + Name + '  date: ' + moment(start).format("DD MM YYYY, HH:mm:ss");
                        let text = 'Your rdv of' + moment(start).format("DD MM YYYY, HH:mm:ss") + ' is confirmed' + ' \n\n' + 'Hello,' + '\n\n' + 'You ' + Name + ' is confirmed.' + '\n\n';
                        Meteor.call('sendEmail', email_Client, 'MyMail <somemail@mail.com>', subject, text);

So all I want to do is add a bit styles to my email. Can I replace last argument text by the string with html code?
Could you help me to find the easiest way to integrate html page in my email sending.

Email.send({
  to: email,
  from: 'contact@yourdomain.io',
  subject: 'subject',
  html: message
});
1 Like

Should I install something to use Email object?

Have you done meteor add email?

1 Like

Yeah, it has already been added. And just a question about html code. I save it as a string? For example like this:

<html = `<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width" />
</head>
<body>
	<header style="background: linear-gradient(to right, #D0BC90, #BC7A68);margin-top: 10px;width: 100%;height: 70px;">
		<img src="" alt="nuri" />
		<p style="color: white;padding-top:15px;font-size: 20px;">
			Header
		</p>			
	</header>
       <div>
               some divs go here
      </div>
</body>
</html>

yes

let message = '<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">......'
1 Like

Thank you guys, you really help me! Have a nice day!

Just a question, as I understood Email.send() is a server side function. And In my case client-side function is used. Is it possible to send html code with it?
Also I tried to replace Meteor.call(‘sendEmail’ … ) by Email.send() but it doesn’t work.

You should go back to Meteor tutorial and understand that you use Meteor.call on the client in order to execute code in a Meteor.method.

  1. Use Email.send() on the server inside a Meteor method.
  2. Call the Meteor method on the client side.
1 Like

Ok, there is email_config.js file and I’m pretty sure it’s what I need. In this file I find function Meteor.methods :

Meteor.methods({
    sendEmail: function(to, from, subject, text) {
        check([to, from, subject, text], [String]);

        // Let other method calls from the same client start running,
        // without waiting for the email sending to complete.
        this.unblock();
        Email.send({
            to: to,
            from: from,
            subject: subject,
            text: text

        });
    },

So as I get it, I should add here all the information about email ( email address, html, subject, etc)? Am I doing right?

Yes looks good, just be sure to use html instead of text when sending html content

I changed it, and it sends html email, but instead of data from app I have just {{my_variable}}. Example html string passed as parameter:

<h1>Hello, <span>{{name}}</span></h1>

And it shows in email as “Hello, {{name}}” but not as “Hello, Mike”.

So my question is, should I use blaze or there are some other solutions to integrate js in html email code?

You would use JSON objects and then read values by key.

Say your user object looks like this

{
  "_id": "Czm6uajNcqhtNYTJr",
  "profile": {
    "firstname": "First",
    "lastname": "Last",
    "gender": null,
    "locale": "en",
    "online": false,
  },
  "emails": [
    {
      "address": "test@gmail.com",
      "verified": true
    }
  ],
  "username": "username",
  "createdAt": "2017-05-10T12:32:41.802Z"
}

Then just read username as user.username;


let message = "<h1>Hello, <span>" + user.username +"</span></h1>"
1 Like

Thank you a lot, now it works as I want!

1 Like

Great to hear! Good luck with your app!

Hello,
Sorry to bother you again, but I have a question concerning my html email and don’t want to create a new topic.
I want to make a table of data. It should look like this:

Id | Name | Date | Address |
1 Joe 31/07/2017 London
2 Karl 01/08/2017 Berlin
etc
There is an array of objects with all this information, but I have no idea how to integrate it on my existing html string. I thought about construction like this but it doesn’t work:

let myHtml = `
<div>
  ${arrayOfData.map( (el) => {
      <div>
            <span>el.id</span> <span>el.name</span> <span>el.date</span> <span>el.adresse</span>
      </div>
  }
  }
</div>
`

Could you please help me with this construction, maybe I’m wrong and there is another way to integrate array of data into email html page?

When sending an HTML email, should you also set the text field as like a backup or something in case HTML isn’t supported? The doc says it’s “and/or” sort of alluding to this. Was just curious if anyone had tried it.

Sending out nice HTML emails is a pain to get right. That’s been my experience anyway.

Check out Foundation for Emails.

Are there any other HTML email frameworks out there anyone knows about?

https://mjml.io

Since we are using React, we find this very easy to use: https://github.com/wix-incubator/mjml-react

1 Like