Real-time feedback
A simple technique for a delightful user experience within Slack
Providing real-time feedback on what your app is doing within Slack can be a delightful user experience and makes your bot feel snappy and responsive. In this article I want to showcase an approach we used for the Daily Fire Slack bot to show progress of a long running, multi-step task.
First, lets take a quick look at the technique in action:
🔥 A bit of context
At Daily Fire we want to liven up your Slack channels with music. We also want you to be able to take that music with you, so we enable you to save tracks others have shared and follow your peers to create curated playlists.
However, to enable these actions a Slack user must link their account to a Daily Fire account. Previously, this meant the user had to leave the Slack client and “Sign In with Slack” on the website. While Slack’s oAuth makes this easy, you still need to leave the Slack client and go to a new website, not an ideal experience.
After some head scratching, we realized we could make the experience seamless by providing an Amazon-style “1-click” button. With this button a user can create & link their accounts, within Slack, with 1-click.
We won’t go into too much detail on what is happening in the background here, but the general idea is that a user account is automatically created from the details Slack provides about a user, then the new account and the Slack account are linked.
A user is then able to Sign In with Slack on Daily Fire should they want to make use of the website.
🔥 Exploring the technique
We think the exciting part of this technique is its adaptability and its ability to show progress of long running tasks within Slack. This is enabled by the response_url provided by a message interaction and then making clever use of author_name, author_icon and color attributes of a message attachment
The general flow is:
- Slack user interacts with your apps message button
- Your app makes use of the
response_urlprovided in the interaction payload to update the message with a loading attachment (described below) - Your app then carries out some task and incrementally updates the message with success attachments and any additional loading attachments
Let’s see what a “loading” state looks like as message attachment JSON:
And a success attachment is very similar, we just use a tick rather than a GIF for the author_icon
🔥 Implementation
These attachments can get rather verbose when you start stacking them, so we recommend creating helper methods to generate the JSON for you.
For example, we use heading_attachment, loading_attachment and complete_attachment methods to generate our attachments.
Now that we can easily generate attachments, let’s take a look at the flow. First a user is presented with the following message:
When the Create & Link with 1-Click button is clicked the message is updated as follows:
The update_reply method takes care of making the http request to the provided response_url
Then, as our app is working through the request we simply update the message again with some new attachments:
Notice how the second attachment (Created Daily Fire Account), has changed to a complete_attachment and we have added another loading_attachment describing what our app is working on now. This is how we show progress.
Any known errors, like if a user with the email address already exists, are shown inline by updating the message again. However, we found it to be a good idea to provide a way for a user to get help should anything unexpected go wrong. We provide a feedback button (Get Help) that opens a dialog with the user.
🔥 Extending & considerations
This is only one use case for this technique and we believe it can be used for a wide array of non-trivial tasks. Providing real-time feedback on what your app is doing within Slack is a delightful user experience and makes your app feel more responsive.
Some example use cases may be:
- Migrating large amounts of data
- Fetching data from external services
- Linking user accounts 😛
- …any multi-step processes your service performs
Additionally, by making use of the response_url we are able to apply this technique to ephemeral messages, which is a huge bonus if your actions are specific to a user.
You could even extend this by adding an attachment that prompts the user to press a button, or select an option, making the flow interactive.
One important aspect to keep in mind, is that response_url's expire in 30 seconds. So, if your task is likely to take longer than 30 seconds, you may have to use an alternate method.
🔥 Wrapping Up
I hope this article gives you some fresh ideas for how you can improve your own Slack bot. Simple techniques like this can help make your app feel more responsive and prevent users from having to leave the Slack client.
If you want to see this technique in action, or share music on Slack, check out:
Daily Fire — a Slack app for every music lover.
Peace, Love & 🔥
