Create An Email-Only ToDo App In Under 10 Minutes 🏎
Use MailBots to get things done without leaving your inbox.
What is MailBots?
MailBots is a platform for building, distributing and using email-based bots that help people get more done from their inbox. We created MailBots to bridge the gap between your inbox and the various tools you use every day — CRMs, calendars, todo lists, note taking apps and more.
👉 Read more about MailBots in our introductory article.
Let’s Make a To Do List! ✅
In addition to being fun and useful, a to-do list is the lowest common denominator for many types of MailBots. It is a perfect starting point for you new weekly pizza ordering system, mother’s day flower delivery service or GitHub issue email utility. This concept is also at the heart of the original MailBot, FollowUpThen.
If you would prefer the “firehose” tour of the MailBots platform, play this video and watch me build a todo list in about 3.5 minutes. For this article, I promised 10 minutes to give us a little more time to explore. You can also browse the source code for a similar app in our MailBot Examples repo.
Basic Concepts
MailBots consists of three main parts.
- An open source bot framework for email
- Core APIs that handle email plumbing, data persistence and user accounts
- A central UI for developers and users to manage their bots
When the core API receives an event (ex: an email is received) it sends an HTTP POST to your bot. Your bot replies with JSON instructions telling the Core API perform different actions, for example, send an email, save data or schedule a followup.
1. Create a MailBot Using Glitch
Head over to the bot creation page (Note: if you haven’t received your developer invitation fill out our survey! 👈)
Setting up a MailBot is a one-click operation. Choose your starting point and we’ll spin up a complete, editable working version of that MailBot using Glitch, a browser-based development environment for Node.js apps.
Choose the “Blank” template. You could, of course choose “ToDo Bot”, but that would defeat the purpose of this tutorial.
After a quick connection process, you will end up in the Sandbox where you can test, inspect and experiment with your new MailBot.
2. Meet Your Dev Env
Once in the sandbox, click the blue EDIT IN GLITCH text.
Glitch’s editing environment that should feel familiar (even though it’s browser based). Click app.js in the left bar.
Note: The bot framework is MIT licensed making it friendly for use in any corporate environment.
A hello world handler is already here to give you a basic idea of how it works.
By the way, if prefer to develop locally, it is similarly straight forward.
3. Take It For A Spin
Go back to the Sandbox, place your cursor in the to field of the email emulator and choose the first address.
When you hit “send”:
- The MailBots core API sends a webhook to your MailBot
- Your MailBot processes the incoming JSON and sends a JSON response
- The MailBots core API processes your webhook response, which, in this case, sends an email.
You can view the JSON request and response in the logs.
4. The Basic Todo List
It only takes a few lines of code to turn our Hello World handler into a functioning todo list thanks to a core principle of the MailBots platform: inbound emails create tasks.
// when someone emails hello@my-bot.eml.bot...mailbot.onCommand("hello", function(bot) { // ...a task is automatically created
});
We know this is an opinionated approach but we chose it deliberately. There are many options for receiving and routing plain inbound emails – SES, Mailgun, etc. MailBots exists to help people get things done, and those things, generically, we call “tasks”.
So in a way, we cheated by building part of our ToDo list into the MailBots platform, event including a UI to manage these todos. Sorry!
But we’re not done yet. As it stands, when you email hello@[your-bot].eml.bot a task is created and instantaneously marked as complete. You can find these tasks by going to the MailBots tasks page, selecting your MailBot from the left menu, then filtering for completed tasks.
Short-lived tasks have their use (for example, keeping a record of an action performed by your MailBot) but in our case, we want a classic todo list.
5. Put the “todo” in your todo list
Edit your handler to listen for the todo command instead of the hello.
mailbot.onCommand("todo", function(bot) { ...Next, we’ll mark task as “not complete”.
bot.set("task.completed", 0);This will cause these newly created tasks to appear in the incomplete tasks section of the MailBots tasks view. We will also let the user know a todo has been added.
bot.webhook.quickReply("Todo added: " + bot.get("source.subject"));Lastly, we call bot.webhook.respond() to end the request and send a response back to the core API. Our handler should now look like this.
mailbot.onCommand("todo", function(bot) {
bot.set("task.completed", 0);
bot.webhook.quickReply("Todo added: " + bot.get("source.subject"));
bot.webhook.respond();
});Test this out in the sandbox: Email todo@[your-domain].eml.bot and inspect the webhook request and response.
You should also be able to see your recently added tasks on the MailBots tasks page.
6. Create A Reminder
MailBots excel at keeping track of tasks that require attention over an extended period of time. Let’s take advantage of this and schedule our todo item to reappear in our inbox at 8am tomorrow.
bot.webhook.setTriggerTime("tomorrow8am");This reminder date is expressed in FollowUpThen style syntax and could have been anything, including a recurring format – for example every8am if we wanted an extremely persistent (and annoying) todo reminder.
Our handler now looks something like this:
mailbot.onCommand("todo", function(bot) {
bot.set("task.completed", 0);
bot.webhook.setTriggerTime("tomorrow8am"); // <-- Reminder ⏰
bot.webhook.quickReply("Todo: "+ bot.get("source.subject"));
bot.webhook.respond();
});Handle When The Task Becomes Due ⏰
We use the term “trigger”, to indicate the moment a task becomes active and warrants the user’s attention. We handle this using the onTrigger handler.
To keep things simple for now, we’ll just sent the original email to the sender’s inbox when it becomes due:
mailbot.onTrigger("todo", function(bot) {
bot.webhook.quickReply("Reminder! "+ bot.get("source.subject"));
bot.webhook.respond();
});We could have also sent an SMS at this point, or checked the status of a task in another program, or otherwise modified the task at the time it became due.
7. Complete ToDo Items
A todo list without a “complete” button would be entirely …incomplete.
We will add a “Complete” button to the reminder email using a core feature of the MailBots platform called Action Emails. Action Emails are basically mailto links to let you dispatch actions without leaving your inbox. It looks looks like this in the emulator (and your mail client).
We’ll add add the “Completed” button to the confirmation email using the more full-featured sendEmail method.
Replace the bot.webhook.quickReply line with this:
bot.webhook.sendEmail({
to: bot.get("source.from"),
from: "My Todo List",
subject: bot.get("task.reference_email.subject"),
body: [
{
type: "button",
text: "Complete",
behavior: "action",
action: "complete",
subject: "Hit Send to Complete this task",
body: "This is a MailBots email-action"
},
{
type: "spacer"
}
]
});We’ll then handle the “Complete” action with another MailBot handler:
mailbot.onAction("complete", function(bot) {
bot.webhook.completeTask();
bot.webhook.quickReply("Task completed");
bot.webhook.respond();
});7. Keep Following Up Until It’s Done
MailBots are great for managing long-running tasks – like remembering to followup with someone in a week or a regularly paying a bill.
The sandbox makes it easy to test these long-cyle-time MailBots.
Modify the onTrigger handler to add the “Complete” button as shown above.
mailbot.onTrigger("todo", function(bot) { // If it's already completed, do nothing
if (bot.get("task.completed")) {
return bot.webhook.respond();
} // Send email with an action link to complete it
bot.webhook.sendEmail({
to: bot.get("source.from"),
from: "My Todo List",
subject: bot.get("task.reference_email.subject"),
body: [
{
type: "button",
text: "Complete",
behavior: "action",
action: "complete",
subject: "Hit Send to Complete this task",
body: "This is a MailBots email-action"
},
{
type: "spacer"
}
]
}); // Reschedule this same email to send again tomorrow
bot.webhook.setTriggerTime("tomorrow8am"); bot.webhook.respond();
});
Back in the Sandbox, click on one of your recent tasks in the logs, then click the “trigger” link for that task, shown below.
You can inspect the request and response of the trigger webhook in the logs. Any emails that would be sent are rendered below the emulator. (As of this writing, the sandbox sends an email to your actual inbox as well).
As you’ll see, when the task becomes due, it asks if we completed it. If we did, it stops following up. If we did not, it ask us to complete the task when it triggers and follows up the next day at 8am.
Try clicking the “Complete” action, then trigger the task again. It should no longer send the followup email since the task is now complete.
Variations
Different types of tasks require different “shapes” of reminders. A deadline-type task may require more and more frequent reminders as a date approaches. Other tasks may gracefully decay, sending fewer and fewer reminders over time. Some may require also sending a notification on another network (sms, WhatsApp, etc). With a few simple changes to the above logic, MailBots can accommodate any reminder situation.
Conclusion
MailBots exists to help you (and your users) get something done with email. The ToDo list pattern shown above is the foundation for a lot of interesting ideas — most of which we haven’t even considered.
Getting something done requires time, and as you can see, MailBots excel at following up at the exact right moment with exactly the right information to get something done.
If you do not yet have your developer invitation, please fill out our short survey. To stay up to date, add your email at mailbots.com. And if you build something cool, make sure to let us know!
