A slash command for getting beautiful photos in your Slack

On the first Friday of every month, Unsplash hosts Make Day — a one-day event where we encourage everyone to build something new and share it with the world.

For February’s Make Day, our designer Kirill Zakharov and I thought it’d be cool to have access to Unsplash’s collection of 80,000+ CC0 licensed photos directly in Slack. So we teamed up to make an Unsplash Slack App.

Determining the type of Slack App to Build

Being a Make Day project, we wanted to make sure we could actually ship this by the end of the day. So to make sure we weren’t biting off more than we could chew, we went over to the Slack app documentation, to see what actually went into building a Slack App.

What we found out, is that a Slack app is actually a collection of custom integrations.

The various types of custom integrations you can build in Slack.

After consulting the different types of custom integrations, it was clear to us that we wanted to build a Custom Slash Command. Here’s how Slack explains it:

Slash Commands enable Slack users to interact with external services directly from Slack.

Because we wanted to give Slack users access to all of the photos on Unsplash, this seemed like exactly what we were after. On top of that, our team already overuses the /giphy command, so we knew using an /unsplash command would be simple and familiar us (and probably other Slack users too).

Now, what do we want it to do?

Now that we knew we were building a Slash command, it was time to decide on the commands we wanted to support.

After discussing with the rest of the team and consulting what was available via the public Unsplash JSON API, we agreed to support the following commands:

Getting a random photo Searching for photos by keyword Searching for users

Here’s a little more on the why and how we built each command.

Getting a Random Photo

In 2015, we released Unsplash Instant — a chrome extension that shows you a random Unsplash photo every time you open a new tab in Chrome. We wanted to replicate that experience, but in Slack.

A new Unsplash Instant tab in chrome.

Setting this up was fairly straightforward. It was simple as making one request to the /photos/random endpoint provided by the Unsplash API and formatting the response to a Slack message with an image attachment.

Here’s what the finished command looks like:

Searching by Keywords

Now that we had the random photo command integrated, it was time to move on to searching for photos.

Search for high-resolution photos by keyword is already available on Unsplash, but like getting random photos, we wanted the ability to do it directly from Slack.

Unsplash search results for mountains.

There are two things we wanted the search command to do:

Display the first 3 results for a given keyword Link to the full set of results on unsplash.com

Here’s what the result looks like:

Unsplash search results for mountains in Slack.

Searching for Users

Searching for users was by far the command we wanted the most, since we often chat about new photographers we discover on Unsplash.

Woah, check out these new photos by Will van Wingerden — Annie Spratt

And from time to time, we like to share the latest photo a photographer has taken with each other.

Have you seen Joshua Earle’s latest photo? — Luke Chesser

Rather than leaving Slack to copy paste a link in our chat, we wanted to use a slash command to share profiles with each other.

Like the search by keyword command, we wanted it to do two things:

Display the 3 latest photos taken by a photographer Link to the photographer’s profile

Here’s how it works:

Fun Fact: Unsplash for Slack is built on KoaJS, a web-framework authored by photographer TJ Holowaychuk

Bonus: Adding a Help Command

After adding the three commands, (and probably spending more time playing with them then actually building them!), it was time to share with the rest of the team. After seeing how others interacted with the command, we quickly realized the supported commands weren’t immediately obvious to everyone.

So we figured it would be a good idea to add a ‘help’ command to respond to mistyped commands, similarly to a command line interface. It also serves as a type of on-boarding for new users of the command.

You’ll notice that the help message is only visible to you, because nobody needs to know you made a typo. 😏

Submitting the App for Review

Before submitting our app to the Slack App Directory, we wanted to test it a little longer and with a slightly bigger audience. We figured who would be best to help us test it then the Unsplash community itself? So we shared it with our Community Slack Team.

Suddenly, we saw a flood of photos appearing in channels as community members were testing out the command. Not only was this a lot of fun to watch, but seeing the ways real users engaged with the command was probably the most rewarding part of the entire project.

Now that we had the app running in two Slack channels, we felt good about submitting it to Slack for review and after a couple of weeks, we were informed that our app would be published in the Slack App Directory.

Get Unsplash in your Slack!

We’ve been using Unsplash for Slack for a couple of months now and we’re excited to finally get to share it with you. It’s the best way to experience Unsplash and share photos in Slack. But don’t take my word for it, try it out for yourself.