Resolving to build a better Slack app

New decade, new features 🎉

Illustration and design by Giacomo Bagnara.

More tools at your fingertips

Looking for a New Year’s resolution? Now is the perfect time to modernize your Slack app using the Slack app toolkit — comprised of a new permissions model, evolving UI framework, new surfaces for apps in Slack, and action-oriented shortcuts.

These tools open up a world of possibilities for Slack apps, so here’s some guidance on how to build best-in-class app experiences — using Block Kit and app surfaces.

About Block Kit

Block Kit is Slack’s UI component library that enables you build rich, interactive app experiences — now supported in a variety of places across Slack. Transform your app through a more intuitive, persistent user experience, going beyond conversation-based message interactions.

Apps built with Block Kit are composed with blocks, stackable bits of customizable UI. Most of these blocks are familiar components — such as text, image, button, menu, etc. Simply define your desired app interface using our JSON schema, and let the Block Kit framework do the heavy lifting of rendering, passing submission payloads, and scaling across devices.

These blocks are available in Block Kit, to customize Slack app UI.

Initially available for Slack app messages, Block Kit is now an extensible framework that transforms other parts of the app experience — like ephemeral information display, structured data gathering, and more dynamic interactions.

Block Kit’s portfolio of blocks continues to grow based on your feedback.

A vocabulary lesson

Surfaces are places within the Slack UI where blocks can be displayed. Available surfaces are messages, modals, and the home tab. There is a unique use case for each surface, so you can build an optimal app experience. Let’s take a tour of each surface.

Messages

Messages are the original app surface. Blocks that live in messages are formatted text, images, and simple interactive elements. We recommend using messages for specific pieces of information that require immediate attention or multi-person collaboration in channels.

Use messages for urgent notifications, like this one.

Here’s another example of a message notification, an update on tracked tasks.

With the additional surfaces, you now have more flexibility to drive focus and improve user productivity with your Slack app. If immediate action is not required, there are two other surfaces to explore.

Home 🏠

This is the default place for a user to learn how to use your app, and actually use it. Home can be used for settings, onboarding, dashboards, or custom content — specific to each user and each app. Here are some examples we love.

Guru, a knowledge management tool, built a home tab as a persistent place for users to access actions they can take with the app — like Create Card, Create Board, Search Guru, and the help menu. Guru’s app home tab also includes a custom list of relevant information specific to each user, such as Recently Viewed Cards.

Here’s a preview of Guru’s app home tab in Slack.

Fellow, an app for tracking feedback and goals, built a home tab that follows a similar format — including accessible actions and personalized details relevant to each user, like Priority and Recent Activity. Also, Fellow uniquely uses this surface as a chance to hear from their users, by implementing a Send us feedback button.

Here’s a preview of Fellow’s app home tab in Slack.

Outlook Calendar, one of the calendar apps for Slack, displays upcoming events with the option to respond, see more details, or schedule a new meeting.

The OCal app for Slack uses datepicker, overflow menus, and buttons in the home tab.

For the home tab, the possibilities are endless! Imagine an app that could display documents for your review, or request feedback, or process updates to a sales record, or track performance metrics, or open incident tickets. This is a safe space for users to interact with your app; take the opportunity to engage with them — right in Slack, in the comfort of your app home.

Modals

Modals are ideal for focused productivity, complex workflows, or aggregated user input. Capabilities include dynamic updating, multi-step modals, and user input validation. If you don’t want to overload your app’s messages or home tab with tons of text, informational modals are ideal for pushing additional details to your users.

Today, modals are also used to display settings, authentication controls, and product details — leveraging capabilities like radio buttons, selects, and dynamic updating to help users connect an app to a third party service.

Streak, a CRM for Gmail, built a modal to display notification preferences for their app users in Slack.

Modals are also useful for collecting structured data. Input blocks enable you to ingest and validate information from users — followed by a dynamic update or another modal to kick off an advanced workflow that’s custom to each user. Today, these features are used for course enrollment, logging a ticket, filing an expense report, completing a survey, requesting IT support, and more!

The Bridge app, a learning and development tool, offers course enrollment in Slack using multi-step modals.

For existing apps, we strongly recommend migrating ephemeral messages to modals. For new apps, we suggest also including confirmation screens or using the confirm object to make sure a user knows exactly what their actions are triggering and where any information will go or post before you post on behalf of a user in another channel.

Slack warns users when closing a modal with unsaved work. Customize this message using the confirm object.

Looking for more tips and tricks? Read Cloverpop’s UX best practices for building with these features.

Looking ahead

This functionality will continue to evolve, but not every feature of your app needs to live in Slack. Keep an eye out for the intersection of productivity tools and collaboration in Slack — such as code reviews, approval flows, or status updates.

Slack is where communication, tools, and teams align — and it’s up to you to make that vision a reality. As you set out on your Slack app journey, these Block-Kit-powered surfaces enable you to build rich interactivity right into the app experience in Slack. We can’t wait to see what you build next!

Questions? Email feedback@slack.com or tweet @SlackAPI.