Every first Friday of the month, Unsplash hosts Make Day, where we encourage people to build something and share it with the world. For a recent Make Day, we thought it would be cool to have access to Unsplash 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.
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.
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.
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:
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:
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.
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.
Unsplash for Slack was built using our Official Unsplash JavaScript wrapper which supports Node, Browsers and React Native. In addition to JavaScript, we also have wrappers for Ruby and PHP that you can use to make something awesome.
