Today we will talk about emails, webhooks and Marketcloud. Get ready to start ;)

Marketcloud offers "Notifications", a built in feature allows you to send emails to your customers in response to events that happens in your app. 

For example, after a user created an order, or after a customer paid an order and much more, Marketcloud enables you to send emails that can be customized in some of their aspects like title, introduction, lables...



This is enough for most of use cases,  if you want to fully customize the HTML of these emails, you are able to do it thanks to Marketcloud's webhooks engine.

Note

To intercept webhooks you need a server sided app with a publicly available address. You can use services like Heroku, Azure and AWS to easily setup a web application able to listen for POST http requests.

If you want to keep it local, you can use external services such as UltraHook

So let's see how easy is to use external services for sending complete custom email within your Marketcloud app. 

In the following example, we will use the Marketcloud's Node.js Starter with Nodemailer, a module for Node.js applications to allow easy as cake email sending. 

So let's install it via NPM:

npm i --save nodemailer

Let's create an instance of the nodemailer transport in our app

var nodemailer = require('nodemailer');

// create reusable transporter object using the default SMTP transport
var transporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
        user: '*****@gmail.com',
        pass: '******'
    }
});

Now we can use it inside a route to send emails when we receive the correct webhook.

router.post('/webhooks',function(req,res,next){
  console.log("Received a webhook", JSON.stringify(req.body));
  var event = req.body.event;

  if (event === 'payments.create') {
    // Then, an order has been paid. 
    // Grabbing the order information from the event
    var order = req.body.data._embedded.order;
   fs.readFile('./views/emails/email_order.ejs', 'utf8', function (err, template) {
        if (err) {
          return next(err);
        }
        var compiledTemplate = ejs.render(template, {order : order});
        var mailOptions = {
          from: '"Nerd Overlord" <*******@gmail.com>',
          to: order.billing_address.email,
          subject: 'Thank you for your order ✔',
          text: 'We received your order, we will send you a notification as soon as we ship it!',
         html:compiledTemplate
        }
       transporter.sendMail(mailOptions, function(error, info) {
            if (error) {
                return console.log(error);
            }
            console.log('Message %s sent: %s', info.messageId, info.response);
      });
      res.send({status:true})
    })
  }
})

As you can see, thanks to the email_order.ejs file and the order data recovered from the response, we can create our custom email template.

Note

At this link you can see the gist of email_order template that we used for this example.

Now that our web app is enabled to receive webhooks, we can proceed to create a new webhook endpoint in our Marketcloud app. 

To do this operation, you need to have access to the Marketcloud's app as an Admin.

Head over your dashboard and click on your app's settings -> Webhooks tab.

Here we can create a new webhook. 

If you need to check out what you can do with Marketcloud's webhooks engine, check out the dedicated guide.

Going back to our complete custom email, let's create a webhook that is fired when a customer is paying inside our app. 

Select payments.create as event and remember to set as webhook URL the url of your webapp.

In this example, YOUR_DOMAIN/webhooks is the URL.

Done!

Now, whenever a payment is created in our application, the webhook will be fired and the /webhook route in your app will be invoked and it will send a completely customizable email to your store's customers.

Questions? 

Join now us on our Slack Ninja's group or drop us an email!