MeisterTask, HipChat and Atlassian Connect

Update 11/02/2018: Please note that HipChat has been discontinued and that MeisterTask’s integration with HipChat is thus no longer supported.

HipChat – this tool needs no introduction. Part of Atlassian’s product family, it provides private chat and instant messaging for teams around the world and it’s available on all major platforms. It also has integrations with over 100 tools already, so we thought about getting on the list as well.

The technical process of building an integration is described in detail in HipChat’s documentation, so we won’t go into everything that goes on under the hood. We want to describe integrating with HipChat from a user’s perspective, focusing more on what matters – the signal-to-noise ratio. We didn’t want to build something that just fills HipChat rooms with too much information, eventually suffocating the conversation. Instead, we wanted to bring in as much relevant data as we could, but still keep it out of the normal conversation view.

This is where Atlassian Connect and the HipChat API come into play. Integrations can, through a system of embeddable iframes, add information in HipChat rooms. The location for these frames is customisable and it ranges from sidebar glances and views that can take up the whole sidebar to dialogs and context menus.

Since the most common use case that came to our mind is teams having a chat room assigned to a project, the first thing we added was the ability to see the status of a project at a glance: small enough not to be intrusive, the view shows a small icon, the project name and a status showing the number of open tasks versus the number of completed tasks.

Clicking on the glance will display a second iframe, showing the familiar MeisterTask user interface. It contains the sections and open tasks from the project associated with the room.

Clicking on one of the tasks will show yet another iframe with all the task’s notes, checklist items and dates, plus a handy button to view the task in MeisterTask.

This covers getting data from MeisterTask into HipChat, but what about the other way round? What about creating tasks from HipChat?

HipChat integrations can access two locations where they can add their own actions: in the message input field context menu:

And in the message context menu that shows up when hovering a message:

Clicking on any of these three actions will show a HipChat dialog that allows a user to add more details and create the task:

And last but not least, the fastest way to add a task. HipChat integrations can register webhooks that are triggered when a particular pattern is matched in the messages in a room. When the integration is installed, we register a webhook that will take messages that match “/mt <text>” and create tasks with the message body as the task name. Since the webhook installation process is done without any visual cues or user interaction, we provide a welcome message to the users in the room, letting them know that new functionality is available:

Take a look at the whole workflow in action:

Conclusion

Working with HipChat was very straightforward. Their API and integration system is very powerful, without being too complex. It allowed us to focus on getting more information to the users and displaying it in a clean way, instead of having to limit what we send in order to not clutter the conversation too much. Atlassian Connect also comes with its own Javascript libraries and CSS, so making things fit into HipChat, while still maintaining some of the MeisterTask designs, was a breeze.

This covers our integration so far. We’re still researching ideas on what features to build into it. Allowing users to modify task data or statuses straight from HipChat is probably next on the list.