Slackbots for Dummies
TL;DR: I made a little bookmarklet that lets you easily post an online menu into your company’s Slack channel for lunch ordering. You can remix it and configure it to work with your own Slack account here.
Yesterday, I had an epiphany. betaworks, like every other company on the planet (or so it seems), uses Slack for all of our internal communication. We have a #betalunch Slack room, which I created last year in the hopes of getting other lunch enthusiasts to post something when they’re ordering food on Seamless so we could order together and save money on delivery fees. This kind of works, although I’m the only person ever posting in there. What can I say. I love lunch and I am lazy and cheap.
I was looking back yesterday on alllll the Seamless links I’ve posted over the last few weeks, and realized that this is an unnecessary repetitive task that could probably be automated. So I attempted to use Dexter (disclosure: made by betaworks), a new product for connecting APIs and automating services, to see if I could whip up a solution.
I have some basic programming skills, but would normally have no idea how to build or host something like this — even though Slack makes it relatively easy in theory to create bots and integrations, you still have to figure out all the other services and, you know, do some programmin’. Dexter, in contrast, allowed me to put together the whole thing in about 10 minutes with zero code.
What I Set Out To Do
As with any programming-related task, it was helpful to first define what I wanted to make and how I thought I could accomplish it. My vision was to create a Chrome extension that I could click while browsing any Seamless page, which would then post something like “@maya is ordering lunch right now. Let her know if you want in! [Seamless URL]” into Slack for me.
What I Actually Did
TL;DR: it mostly worked! Here’s what my little bot looks like in Dexter:
I only had to use two modules. First, I grabbed Bookmarklet (there’s no Chrome extension module in Dexter yet), which is already set up to do all the basics: it sits in your bookmarks bar and it captures the current URL if you click on it. Then, I dragged over Slack Send Message. Then I connected them.
Slack did require some configuration, which was mostly straightforward with a few minor hiccups that I’ll run through here in case you want to make your own.
Here’s all the inputs that are required to use the Dexter Slack Send Message module.
- Text: in my case, I just connected the Bookmarklet trigger to the Text input, which means that the URL captured by the bookmarklet will act as the text the bot enters into Slack.
- Username: for each input, Dexter allows you to choose whether you want to hardcode it into your app (i.e., have it be the same thing every time), have it supplied by another Dexter module (as I did with Text), or prompt users to configure it for themselves when they use the app. For username, I chose the latter, so anyone who wants to use this bot can put their own Slack username in to identify who is placing the order.
- Channel: I got a little stuck on this one for two reasons. 1) This is already supplied in the Slack webhook (see below), so I wasn’t sure if it was required. I figured this out by just experimenting. 2) The formatting wasn’t explicitly explained, so I didn’t know if it should be just text (betalunch), or with a hashtag (#betalunch). It turned out to be required, and it needed a hashtag to work. ¯\_(ツ)_/¯
- Webhook URL: this is easy to generate from Slack; I’ll go into this below.
- Icon Emoji: obviously the most important part. I chose 🍔.
Generating a Webhook
Sign into your Slack team in a browser, and find Integrations (yourteamname.slack.com/services/new). (You may need to be an admin or owner depending on your team settings.) Click the link that says “Make your own!” Now, just do what it tells you.
- Choose the channel you want this bot to post messages to. I chose #betalunch.
- Copy the Webhook URL it generates for you and paste it into the Webhook URL field in Dexter.
- That’s literally all you have to do.
I now have a little bookmarklet that I can click when I’m looking at a Seamless menu. It immediately posts into our lunch channel and looks like this:
There’s still a few nice-to-haves missing, but it does the trick. I no longer have to copy/paste my Seamless URLs, and more importantly I feel way less insecure being the weirdo who’s constantly justifying ordering food in our lunch chat. (Having a bot do it automatically seems to negate that.) It’s pretty cool and judging by the karma rained down upon me by my coworkers, it seems like a useful addition to our Slack.
I should reiterate that in the real world I’m a pretty pitiful amateur programmer, and I’m constantly frustrated by my inability to build things I wish existed. Even though this was just a tiny little app, it felt SO GOOD to have an idea and execute it on my own. If you have things like this you keep hoping someone will fix for you, you should really try building it yourself on Dexter. If you do, I’d love to hear how it goes!
Wishlist / Further Plans
- I’d still like to append text into the post itself (“@maya is ordering lunch” etc), so that the bot can be named Lunchbot for consistency and so that new people have some context for how to respond. As a bonus, we could incorporate a keyword (like Seamless) that people can set as a highlight word so they only get notified by #betalunch when someone is ordering.
- I’d like the bookmarklet to throw an error if someone isn’t on a Seamless URL. Right now you can just post any URL you want into our lunch channel, which will be annoying and could get spammy if people misuse it.
- Like everyone else in the world, I wish this could be a full-featured bot that announces someone is ordering, takes everyone’s orders, sends it to Seamless, and venmos everybody. This appears to be impossible, even though it’s 2015 and we have hoverboards and spaceships going to Mars.
- Slack authentication would be nice, since right now anybody can add this and send URLs to the betaworks lunch channel. Obviously not ideal.
Update (Jan 2016): Dexter recently added the ability to remix and duplicate apps, so you can now set up this app to work in your own Slack! Just go here and click the remix button. Then, all you have to do is click “Use app”, then click “use this app” one more time, and it’ll ask you to throw in the webhook for your own Slack account and to specify the username you’d like to associate with your personal account. That’s it!