Launch Notes Introducing Cord's Notification Components

Introducing Cord's new components: Notification List and Notification List Launcher. Learn how to use and customise these new features, and why your customers and your developers will love them.

Notifications are embedded into almost all of our online and in-app experiences.

Your bank notifies you when your account balance is low. LinkedIn, Twitter, Instagram, and Facebook notify you if you’ve been tagged in a post. Slack notifies you when someone’s reacted or responded to a message you sent. And now, you can easily add notifications to your B2B SaaS product thanks to Cord’s new Notification components: Notification List and Notification List Launcher.

Before we explore when, how, and why to use Cord’s Notifications, let’s start with a bit of background on notifications more broadly, and why they’re surprisingly tricky to build.

Why are notifications so tricky to build?

The purpose of notifications is both simple and intuitive: to alert users of something relevant to them specifically, and make it easy for them to learn more. This encourages engagement within an application.

Seems simple enough, right? Wrong.

The toughest part involves answering the all-important (but difficult-to-answer) question: how and when should we notify users? Here’s a taste of what you might need to consider…

Source: Slack

The bottom line: there’s nothing worse than being notified about something you already saw, or being notified several times about the same thing via different channels. Raise your hand if this sounds familiar 🙋‍♀️

Your dad tries to call you. When you don’t pick up, he leaves you a voicemail. He follows that voicemail up with a text message saying “Hey, just tried to call you.” Now you have a missed call notification, a text message notification, and a voicemail notification. Talk about overkill. This illustrates just how quickly notifications can turn into noise.

Back to the workplace…

For notifications to be effective and drive engagement, they have to be relevant, customizable, and never, ever spammy.

Why? Because if you notify users too much, they’ll either become so desensitized to the notifications that they’ll ignore them, or they’ll become so overwhelmed by the never-ending barrage of alerts that they’ll unsubscribe to them altogether.

For example, the average person doesn’t want to be notified about every single message and every single channel they subscribe to…but when someone first joins a new workplace and isn’t terribly active, amplifying existing activity will help encourage them to get more involved.

Likewise, it might make sense for everyone who has access to a particular document to be notified of activity (a comment, reply, reaction, etc.) if there are only three people with access. But this changes considerably when all 550 people at a company have access.

There’s an infinite number of scenarios to consider, and users’ stated and demonstrated preferences vary. (We told you it was tricky!) Fortunately, Cord and our talented bench of PMs and developers have done the hard work so you don’t have to.

How do Cord’s Notifications Components work?

Notification List

With this component, users can see all the notifications they have related to replies, reactions, or people @mentioning them across your app. And, thanks to our REST API, you can also programmatically add custom notifications that aren’t triggered by a Cord-specific action. It could be a notification about a security update or a task being completed. Whatever makes sense for your product, and your users.

Regardless of the notification type, they appear in a scrolling list where your customers can track when the notification was generated and review/update read states.

In addition to customizing parameters related to the size and style of the list, and if/when these notifications get sent via Slack or email, you can also customize the following properties:

• Filter: Want to customize what your customers see in their Notification List? With this optional string, you can filter notifications in whatever way makes sense for your app. For example, you could only show notifications from a particular page, or a certain type of notification.
• showPlaceholder: This lets you control the ‘empty state’ (what end-users see when they don’t have any notifications) of your Notifications List. A lot of apps use this space for either a feel-good message like “All done!” or a feature introduction text like “Here you’ll see when people @mention you or reply to your messages”.

Check out our Docs for more info.

Notification List Launcher

Notification badges (traditionally red dots in the top right corner of your favorite app) have been triggering dopamine releases for over a decade.

As the name suggests, Cord’s Notification List Launcher displays a button that will open and close the Notification List when clicked. It will be badged in real-time when relevant notifications appear, saving you the trouble of managing that state.

Check out our docs to see all the styling and badging types you can control.

Why developers will love these new components

1. Works out of the box: Notification systems are hard to build (more on this below), and they’re even harder to build well. But with Cord, you don’t have to worry about pagination, badging logic, or live injecting components for real-time updates. And, bonus, it’s automatically wired into all of Cord’s other components which means as soon as you drop the Notification List component on the page, it’ll be populated with all the relevant things that have been happening in the product.
2. Fully customizable design: Our customizable CSS allows you to set fonts, colors, and sizes to match your brand’s look and feel. You can also control where badges appear.
3. Programmatically add custom notifications: Want to send users notifications about activity that happens outside of Cord’s components? That’s easy with our REST API. Alert users when a task has been completed, when a password has been changed, or when a new report has been generated. Learn more here.

Why your customers will love these new components

1. Keeps them updated, in context, and in control: Cord’s Notification components consolidate alerts relevant to a specific person, about a specific workstream. And, because the Notification List appears in your product includes deep linking, and gives users the ability to manage, archive, and quick-act on notifications directly from the widget…they can stay on top of replies, reactions, @mentions, and custom notifications to keep them on track *without ever leaving your application. *
2. Not spammy: Cord’s Notification components batch several messages into a digest and limit repeat alerts. We measure individual users’ activity on pages, and only deliver notifications if they weren’t active before the message was sent. That means they’re not notified about things they saw live, and interacted with in real-time. Likewise, we deliver a Slack message first, and only trigger an email if the Slack notification was ignored. (Of course, there are granular subscribe/unsubscribe options per-thread and per-platform so users can fully customize their experience.)
3. Feels native: We all intuitively know how to interact with notifications. And, because you can customize the design of the components and configure them to suit the UX of your product, your customers won’t feel like they’re using Cord. All credit goes to you!

Add Notification components to your product

Want to add Cord’s Notification List and Notification List Launcher to your product? Explore our docs to see how to customize and implement each component, or get in touch with us to learn more.