rcmdnk's blog

Japanese ver.: Mandrillを使ってJavaScriptだけでメールを送る
20141211_mandrill_200_200

This blog is hosted on GitHub pages, in which we cannot use such PHP. Even in such a situation, I found the way to send email only by JavaScript.

Sponsored Links

Mandrill

Transactional Email from MailChimp - Mandrill

Mandrill is an email infrastructure service. With the API of Mandrill, you can send email only by JavaScript.

You can use up to 12000 mails in free per month. If you need more, you can use 1000 mails/$0.20 up to 1M mails, 1000 mails/$0.15 up to 5M mails, and 1000 mails/$0.10 for more.

There is an hourly limitation, which is decided by a reputation. My first limit as a reputation of “Unknown” was 252 mails/hour.

Anyway, to use the API, sign up and get a key from Settings category.

Then, you just need to post to https://mandrillapp.com/api/1.0/messages/send.json by ajax.

First, prepare following JavaScript (using jQuery):

utils.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function sendMail(){
  $.ajax({
    type: "POST",
    url: "https://mandrillapp.com/api/1.0/messages/send.json",
    data: {
      'key': 'YOUR_KEY',
      'message': {
        'from_email': '[email protected]',
        'to': [
          {
            'email': '[email protected]',
            'name': 'YOUR_RECEIVER_NAME',
            'type': 'to'
          }
        ],
        'subject': 'title',
        'html': 'html can be used'
      }
    }
  });
}

Please refer Messages API Mandrill about the data structure.

Above is a minimum example.

For from_email you can use any address if the address is valid shape like [email protected].

You can set more than one receiver in to, as you can see it is an array.

Mandrill accepts html format by html key. If you want to send flat text, use text key.

Then, include above script in such head of html. Don’t forget to include jQuery, too.

index.html
1
2
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="./utils.js"></script>

Now it is ready. You can call the function sendMail as you like.

For example using button:

index.html
1
2
3
<form name="mail">
<input type="button" value="Click!" onClick="sendMail()">
</form>

That is all.

These emails are also managed in Mandrill and you can see in your account page.

Sponsored Links
Sponsored Links

« Speed up Octopress generate for a check build Notice a copy event on your blog by email only by JavaScript »