How We Extended Slack to Boost Productivity and Return Results

Slack Picks Up OurSlack

I opened WebMechanix’s eyes to the beauty of Slackabout a year ago. Before that eye-opening occurred, we were all struggling to follow a disjointed communication flow made up of a mishmash of email, Google Chat, Skype, SMS, Asana, and more.

Since we’ve adopted Slack as our primary communication channel, we consolidated many of the roles all those other channels used to play. This switch simplified our lives, giving us more time for productivity and fun.

Slack quickly became one of our most useful tools — between its robust search, public channels, private messages (group or otherwise), multi- and single-channel guests (to limit content exposure with outsiders), notifications, file attachments, posts, code snippets, calls, and 3rd-party integrations, it’s tough to find a more versatile instant messaging system.

And in addition to letting me to keep my lazy butt glued to my chair when discussing work with my team, Slack also lubricates sharing and collaborating on actual content — both internally and externally.

I could go on and on about Slack’s excellentnative features like mentions, reactions,”remind me about this message,” formatting, @slackbot as private sandboxes and slash commands, but I want to share how WebMechanix istaking Slack to the next level because, frankly, it’s just pretty darncool.

Outgoing WebHooks To Share Our Slacks with the World

Over the past year, we’ve created a few Slack channels where we post shareworthy news, resources, and observations about our industry. It keeps our team reading and on the cutting-edge.

Well, I’m proud to debut our latest Slack hack with this blog post:

Here’s how it works… Every time one of us posts to the #marketing-chat, #dev-design-chat or #cyber-security-chat Slack channels, the outgoing webhook we’ve configured in Slack will POST the message to our WordPress site. Our site then stores and displays the message as part of a WordPress custom post, publishing the previous day’s post of Slack messages daily.

If it’s shareworthy amongst our team, why not share it with the world? And I’m not gonna lie (we’re all Internet marketers here, right..?)—what agreatway to build links, beef up content, and show the world that we really do live on the bleeding edge of tech.

Custom Slash Commands for Slack

In addition to Slack’s super-helpful native slash commands, we’ve developed some custom slash commands to promptly return information in Slack.

Meeting Spaces: /conf, /collab,and/backoffice

We’re addressing our growing-so-fast-we’ve-outgrown-our-office-space problem by planning a movethis Summer, but in the meantime, we’re often scrambling to find a roomfor meetings and conference calls.

With our Google Calendar set up for reserving rooms, we can now type /conf, /collabor/backoffice intoany Slack thread and @slackbot will instantly tell us if the room is currently booked, as well as that room’s reserved time slots for the rest of the day. Additionally, we can follow any of those commands with a space and a specific date/time to check availability.

Here’s the truncated PHP code that does some of the heavy lifting (after validating the token provided by Slack, of course):

<?php 
// Based on the room defined in the slash command, define the .ics file URL for the appropriate Google Calendar:
$icsFile = '(.ics file url)';

// Use the .ics file parser from https://github.com/johngrogg/ics-parser:
require 'ics-parser-master/class.iCalReader.php';
$ical = new ICal( $icsFile );

// Validate input:
$timeToCheck = ( strtotime( $_POST['text'] ) !== false ) ? strtotime( $_POST['text'] ) : strtotime( 'now' );

// Are there any events?
if( $ical->event_count > 0 ) {

	// Set up variables:
	$events = $ical->events();
	$daysEventsArr = array();
	$i = 0;

	// Loop through events, building an array of any at the POST-ed time to check:
	foreach( $events as $event ) {
		$start = ( isset( $event['DTSTART'] ) ) ? strtotime( $event['DTSTART'] ) : null;
		$end = ( isset( $event['DTEND'] ) ) ? strtotime( $event['DTEND'] ) : null;
		if( ( $start != null ) && ( $end != null ) ) {
			if( date( 'YmdHis', $start ) <= date( 'YmdHis', $timeToCheck ) ) { if( date( 'YmdHis', $end ) > date( 'YmdHis', $timeToCheck ) ) {
					$i++;
				}
			}
			if( date( 'Ymd', $start ) == date( 'Ymd', $timeToCheck ) ) $daysEventsArr[] = $event;
		}
	}

	// Output availability:
	echo ( $i > 0 ) ? '- BOOKED AT ' . date( 'g:iA', $timeToCheck ) . " - \r\n" : '- AVAILABLE AT ' . date( 'g:iA', $timeToCheck ) . " - \r\n";

	// Output event details:
	if( !empty( $daysEventsArr ) ) {
		echo date( 'D, n/j', $timeToCheck ) . ' Bookings:' . "\r\n";
		foreach( array_reverse( $daysEventsArr ) as $event ) {
			$start = ( isset( $event['DTSTART'] ) ) ? strtotime( $event['DTSTART'] ) : null;
			$end = ( isset( $event['DTEND'] ) ) ? strtotime( $event['DTEND'] ) : null;
			echo ( $start != null ) ? date( 'g:ia', $start ) . ( ( $end != null ) ? ' - ' . date( 'g:ia', $end ) : '' ) . ': ' . $event['SUMMARY'] . "\r\n" : '';
		}
	}
} else {
	// No events, so room must be available!
	echo 'AVAILABLE (no bookings found)';
}

Wehavethese slash commands configured in Slack to POST to the URL where we have this code hosted (sidenote: Slack requires a domain with a non-self-signed SSL); the echo statements within that PHP then post and display content back in Slack.

InternalDashboard Slash Commands

I won’t go into the nitty-gritty code detailof our Dashboardslash commands, but here it is in a nutshell…

We built aninternal WebMechanix Dashboard that aggregates data from a bunch of our tools, such as Harvest, HubSpot, Google Analytics, Slack, QuickBooks, and more. The dashboard then outputs that data in a variety of easy-to-digest ways to facilitate internal reporting and productivity. A whole other blog post could (and perhaps will) be devoted to Dashboard’s amazingness, but for now, we’ll keep it brief.

With custom slash commands in place, we can type thefollowingcommands into any Slack thread to instantlyreturn data from our Dashboard:

• /client [client code] – This returns a client’s name, description, site domain(s), contact information, their scope of work, the internal owner, internal team members, internal strategist, a link to their profile on our Dashboard, plus a whole bunch more proprietary metrics.
  

  

• /contact [client code] – This is an abbreviated version of the above; it returns a client’scontact information for all points of contact at the company plusa link to the company’s profile on our Dashboard.
  

  

• /hours [client code] – We log our time in Harvest, which is pulled into Dashboard. For retainer clients, we define “allotted” time within Dashboard. We then use that in conjunction with last month’s actual hour usage and this month’s current hour usage to calculate “Projected” hour usage for the current month, as well asthis month’s percentage of time utilized. This slash command returns those five figures, color-coded to indicate how well we’re utilizing our time (or not), as well as a link to that client’sprofile on our Dashboard.
  

  

• /goals [client code] – This returns Google Analytics Goal values for the current week as well as cumulative for the month, quarter and year. It also shows how each of those values have changed since last month and last year. It’s color-coded to indicate status. (Goals to be included can be toggled in Dashboard— a link to which is also returned in Slack.)
  

  

These slash commands return the data as “In Channel” messages. This means that a team leader could output a particular client’s goals to share that data with her team, sparking a conversation in Slack about the team’s progress towards those goals. How cool is that?!

…And we’ve only just begun! More slash commands are in the works as we continue to develop Dashboard.

Dashboard “TV View” Integration

WebMechanix team members can log into our Dashboard through their browsers, but we’ve also developed a Dashboard “TV view,” which we display on TVs around the office all day. This TV view displays data (all pretty and optimized for a big screen) such as outstanding invoice tallies, a gamified leaderboard of everyone’s logged time for the month, and our WIN WALL— a feed, driven by Slack’s Real Time Messaging API, of the six most recent messages shared in our #win-stories Slack channel:

Now that’s what I call #winning! Not only can team members share company successes and peer recognition in Slack, but anyone and everyone in our office gets to see those successes broadcast in real time around the office. This feature is a perfect complement to our RESULTS-driven philosophy that we exercise in everything we do.

Our List of Configured Integrations (likely to grow)

We use Asana for project and task management (for its Harvest time-tracking integration, amongst many other reasons). To be able to simply type /asana into any Slack thread means we don’t have to open new windows ortabs to get a quick glance atour to-do lists.

BitBucket is our file version controltool of choice. We’ve set up Slack channels devoted to BitBucket commit message feeds so that we can track project progress and continue the conversation within Slack about those commit messages.

Sharing assets such as website wireframes andmockups has never been easier;DropBox files shared in Slack instantly become Slack “attachments,” meaning their filenames, meta dataandthe textual content within the filebecome indexed and searchable within Slack, so finding those files later is super fast and easy. It’s incredible.

Having fun while we smashprojects is very much in line withWebMechanix’s core values. Typing/giphy ____ into any Slack thread (replacing ___ witha relevant search term) returns just that: a fun image that puts a smile on our faces. 🙂

Google Apps (including Gmail, Calendarand Drive) isanother one of our essential, day-to-day tools; many of us have configured our private @slackbot channels to automatically send us Google Calendar reminders, helping toconsolidateall our variousnotifications.

Same praise here as with ourDropBox and Google Calendar integrations: Drive file links shared in Slack instantly becomeSlack “attachments,” making them (and the content within them)searchable within Slack. Neato!

We’re all programmers at heart, right? As if the myriad 3rd-party integrations offeredby Slackweren’t enough, we’ve configured If This Then That “recipes” to be triggered either by certain Slack messages, or by outside triggers, to automatically perform nifty functions.

For example, when I receive emails labeled as coming froma certain client in my Gmail (I configured IFTTT to connect to my Gmail), the content of those emailsautomatically poststo a particular Slack channel so that I can treat them as “support tickets,” consolidate my notifications, and track all correspondence with that client (not to mention continue the conversation within Slack surrounding those emails).

Another example: I can tag URLs that I save toPocketto read later with “#slack,” which— as programmedbymy IFTTT recipe, automatically posts that shared URLto a Slack channel of my choosing. And with Slack’s automatic URL preview generator, that URL’s meta data is output to provide some pretty context.

Many noteworthy streams of information on the web are also offered as RSS feeds. And many of us have configured our private @slackbot channels (and some public channels) to pull in RSS feeds so that we have that content in one place, in real time. Then, we can share and continue the conversation within Slack surrounding that content, keeping everyone up-to-date and well-informed.

Twitter also has an integration. And I’ve set it up to receive@SlackHQtweets and new blog posts in my private @slackbot channel. This way, I see instant updates to Slack’s desktop and mobile apps, as well as helpful tips and tricks, which I can then share with my team in an instant by simply right clicking on that Slack message’s timestamp, selecting “Copy Link,” and pasting into another channel.

Just like the “IFTTT” integration described above, Zapier offers programmable functions triggered by Slack messages or triggering Slack messages. A recent example from our team would be the “zap” that we’ve configured to post Trello updates to Slack; Trello acts as our “Dev Queue” management platform and Slack now functions as an incoming ticket system.

This is just the start of our custom Slack integrations. Slack offers a huge, growing library of integrable 3rd-party apps. So if I keep finding extra time to slack off, I’ll undoubtedly set up even more 😉

Now For The Heavy Question: Does All This Slacking Boost Productivity Or Just Add Distraction?

Did you really think I was going to code all those integrations and write this blog post,only to saySlack’s just another distraction?! Of course it boosts productivity! If the testimonial that is this blog post isn’t argument enough, check out Slack’s data on the matter:

Sure, we have an ever-growing list of Slack channels (87!), but there’s value there. #fewer-emails-and-meetings

Sure, it’s easy toget wrapped up inarticles shared in Slack, but there’s value there. #forever-learning

Sure, /giphy is silly and clearly a potential distraction, but there’s value there. #culture

The bottom line is: weneed to communicate. It’s how we get work done. A tool that allows us to do that better, faster and in ways no other medium offers, is a very valuable tool.

If Slack were just a simple, IRC-like chat app, I wouldn’t be writing this blog post. But its richfeatures and the fact that we’re able to extend and customize Slack’sfunctionality in the ways described above, and in ways yet to be imagined, is what sets it far apart from the rest.

We’re living, working and growing in a world oversaturated with information flying at us from countless sources.If I can draft this blog post, collaborate on a website redesign, track supporttickets, reply to client feedback, set up and receive reminders, take notes while on a call, check my logged hours, review a client’s Google Analytics data, search for a code snippet or Google Doc that was shared with me two months ago (with only a few keystrokes!), chat with a colleague, answer another’s questions, and check the weather—all in an instant from one user-friendlyapp, then that means I’m spending less time looking for all that information or drafting those emails, chats, texts, calls, and meetings. And for that, I’m a more productive and happier employee. And I swear we’re not being paid by Slack to publish this blog post. We just love what it’s done for our company.

So What’s Next?

I mentioned additional slash commandsto outputDashboard data. We’re also planninga scrolling tickerof selectSlack messages for our Dashboard TV view (a la every news network on TV). We also plan to post alerts to individuals’@slackbot channels to remind themabout client expectations or logging their time. More integrations, more webhooks, more awesomeness.

You tell us, though!What usefulSlack integrations andslash commandsdoes your company use? What do wish your chat appcould do?

Interested in other hacks? This guide includes one of Museum Hack’s top growth hacks. It’s a hack that helped land the business in the New York Times and dozens of other media outlets, and propel the startup to ~$2.8 million in annual revenue, enough to join the Inc. 5000 as one of the fastest-growing private companies in America.

Read about the 11 tools you have to try

View all posts filed under “Development”

Back to the main blog overview

Return to WebMechanix.com homepage