NOTE: This example was created on an outdated version of the Lob API. Please see the latest Lob documentation for the most up-to-date information on integrating with Lob.
If your business sends invoices, chances are you're losing money to customers that are less than punctual about payment. The key to reclaiming those overdue bills? Consistently reminding customers to pay—and the more ways you can reach them the better. The mailbox and the inbox are your first lines of communication, but integrating reminders into your system can be time-consuming and difficult.
Not today! Give me 30 minutes of your time, and I'll show you how to automate your payment reminder system in only 60 lines of Node.js code.
This tutorial is going to show you how to create a payment reminder system in Node.js that will remind a user to pay their bill via a printed letter and an email follow-up. We will first print and mail a letter using Lob's Letter API, and then capture the expected delivery date. Using Customer.io we will trigger an email follow-up on the expected delivery date, reminding the user to pay their bill and to check their mailbox.
You will most likely be using this code with an existing project, but for the purpose of this example I'll show you how to start from scratch.
npm init
npm install --save analytics-node npm install --save lob
We will need to create two files for this tutorial, index.js and letter.html.
We first need to include the node modules that will be used in the top of our index.js. Make sure to replace xxxxxxx with your Lob Test API Key and the Segment Write Key.
var fs = require('fs');
var Lob = require('lob')('xxxxxxxxxxxxxxxxxxxxxx');
var Analytics = require('analytics-node');
var analytics = new Analytics('xxxxxxxxxxxxxxxxxxxxxx');
Next, we will want to initialize some user data. In the real world, you are going to be pulling this information from a database or possibly a user-submitted form.
But for the sake of this tutorial, we are just going to create a fake user object to use. Notice the bill_amount field. This is the value of their outstanding bill that we will include in the payment reminder letter.
var user = {
id: '123456789',
name: 'Joe Schmoe',
email: 'joe@schmoe.com',
bill_amount: 425,
address_line1: '123 Main Street',
address_city: 'Mountain View',
address_state: 'CA',
address_zip: '94041',
address_country: 'US'
}
Now, let's create our payment reminder letter template by placing the following HTML/CSS in the letter.html file.
Notice that we are using template variables called {{bill_amount}} and {{name}} in the HTML. These will be replaced with the user's name and outstanding balance when we send the letter through Lob's API.
<html></html>
<head></head>
<title>Lob.com Outstanding Balance Letter Template</title>
<style></style>
@font-face { font-family: 'Loved by the King'; font-style: normal; font-weight: 400; src: url('https://s3-us-west-2.amazonaws.com/lob-assets/LovedbytheKing.ttf') format('truetype'); }
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body { width: 8.5in; height: 11in; margin: 0; padding: 0; font-family: sans-serif; }
.page { page-break-after: always; }
.page-content { position: relative; width: 7in; height: 10.625in; left: 0.75in; top: 0.1875in; }
#logo { position: absolute; right: 0; }
.wrapper { position: absolute; top: 2.75in; }
.signature { font-family: 'Loved by the King'; font-size: 45px; }
<body></body>
<div class="page"></div>
<div class="page-content"></div>
<img id="logo" src="https://s3-us-west-2.amazonaws.com/lob-assets/deluxe-logo.png" width="150px">
<div class="wrapper"></div>
<p>July 21, 2015</p>
<p>Dear {{name}},</p>
<p>This is a friendly reminder that your account with us appears as past due. Our records indicate that you have</p>
a total outstanding balance of <b>${{bill_amount}}</b>.<p></p>
<p>We would much appreciate if you could let us know the status of this payment. Please do not hesitate to call</p>
us if you have any questions about the balance due on your account. If you have already sent us your payment,
please disregard this reminder.<p></p>
<p>Thank you very much for your attention to this matter and your continued business.</p>
<p>Sincerely,</p>
<p class="signature">Deluxe</p>
Now, going back to the index.js file, let's read in the letter.html file using Node's fs.readFileSync() function.
var letterHTML = fs.readFileSync('letter.html', 'utf8');
Alright, we have the customer's information and the payment reminder design all set up. Now it's time to actually print and mail the letter using Lob's Letter API.
We start by making a call to the Lob.letters.create() function, passing it the information needed to create our letter. The two parameters worth noting here are file and data. file will be passed the HTML template we just created, and data will contain the template variable values that will be replaced in the HTML. For more information on all available letter settings, check out the documentation.
Lob.letters.create({
description: 'Payment Reminder for ' + user.name,
to: {
name: user.name,
address_line1: user.address_line1,
address_city: user.address_city,
address_state: user.address_state,
address_zip: user.address_zip,
address_country: user.address_country,
},
from: {
name: 'Deluxe Virginia Realty',
address_line1: '123 Test Avenue',
address_city: 'Mountain View',
address_state: 'CA',
address_zip: '94041',
address_country: 'US',
},
file: letterHTML,
data: {
name: user.name,
bill_amount: user.bill_amount
},
color: true
})
Note that Lob's Node module can be used within a callback structure or with Promises. In this tutorial, I'm choosing to go with Promises. If you are not to sure how to use Promises, take five minutes to get up to speed.
Now we want to create a user in Segment using analytics.identify. You might not need to do this if you have already created or aliased your users in Segment, but for this example to work we need to create them.
Next we want to track an event called Sent Bill Reminder using the analytics.track function. Notice that we are passing a property to this event that contains the expected_delivery date of our letter.
Also, make sure to notice that we are calling a .then(function (letter) { on the Promise chain from the previous step. The letter object will contain all sorts of interesting information about our newly created letter, but we are only interested in the letter.expected_delivery_date at the moment. Check out the docs to see the rest of the letter information returned by the API.
.then(function (letter) {
analytics.identify({
userId: user.id,
traits: {
name: user.name,
email: user.email,
created_at: Math.floor((new Date()).getTime() / 1000)
}
});
analytics.track({
userId: user.id,
event: 'Sent Bill Reminder',
properties: {
expected_delivery: letter.expected_delivery_date
}
})
})
.catch(function (error) {
console.log(error);
})
For the sake of debugging, I'm showing a .catch() that will console.log errors to the terminal. This will be helpful if anything goes wrong during development.
Go ahead and run the script using node index.js. If you don't see any errors, open up a browser and take a look at Lob's Dashboard Letter Page to see if our payment reminder was created. You should be able to access the letters details screen if everything worked.
Now, let's take a look at Segment to make sure that our user and events were created correctly. The place to do this is in the Segment Debugger screen. You should see two entries, one for creating the user and one for sending the Sent Bill Reminder event.
Clicking the Sent Bill Reminder event should show you the expected delivery date properties.
And finally, let's head to Customer.io to make sure that Segment properly created a new user. You can check this by looking at the People screen in your Customer.io Dashboard.
Now that we know our script is running correctly, we can create the triggered email in Customer.io that will be sent to the user on the expected delivery date of their payment reminder.
The first thing we need to do is create a custom segment (not to be confused with Segment.com). This segment will contain the users that have completed the Sent Bill Reminder event and whose estimated_delivery date is before the current date. So if the estimated delivery time takes seven days, the user will show up in this segment seven days after we sent the letter. Take a look at the screenshot below to see how I set it up.
If you want to test your emails by triggering them immediately, change is a timestamp before to is a timestamp after.
Now we can set up our triggered email to be sent out when a user enters this segment. These are the steps you will want to take:
Here is a screenshot of what that email will look like in Customer.io:
Now we will want to see if we can run our script, node index.js, and trigger an email. Obviously we don't want to wait seven days to trigger the email, so change the Customer.io segment from is a timestamp before to is a timestamp after.
If you are running the script for the second time, you will need to either change the user's email and ID in the Node script or delete the user from Customer.io. Otherwise nothing will happen, because Customer.io thinks the user already exists.
If you are running into problems, I'd suggest first looking at the Activity Screen in Customer.io. This will tell you if there are any errors stopping the email from being triggered.
If you are still running into issues, leave a comment and I'll try to help.
Hopefully this tutorial has kickstarted all your creative juices and shown you what is possible when combining Lob, Customer.io, and Segment. Some logical next steps might be to integrate an email API like SendGrid to create more customized emails. Or maybe take a look at the list of Segment integrations for inspiration on other ways to communicate with your customers.
