💬 Send Slack Notifications

The Slack notification feature allows you to send messages directly to your end-users’ Slack workspaces.

Overview

How it works

The Slack notifications work by letting the end-user authorize a “Slack app” to their workspace, which will post your notifications to the workspace. NotificationAPI handles the authorization flow, storing the credentials, and white-labeling the experience to your brand.

From the end-user’s perspective

  1. The user clicks a “Connect Slack” button in your front-end to get redirected to Slack.com.
  2. In Slack.com, the user sees a screen to authorize a Slack integration to their workspace.
  3. After authorization, the user is redirected to a white-labeled screen to pick their preferred channel.
  4. Your back-end can now trigger notifications that will be delivered to the user’s Slack workspace and channel.

Setup

  1. Create NotificationAPI Account
  2. Add the Connect Slack Button (front-end)
  3. Trigger Notifications (back-end)

1. Create NotificationAPI Account

Make sure you have a NotificationAPI account and grab your Client ID from the dashboard.

2. Add the Connect Slack Button (front-end)

Install the SDK:

npm install @notificationapi/react --legacy-peer-deps
# or
# yarn add @notificationapi/react
# or
# pnpm add @notificationapi/react

Then, use the NotificationAPIProvider and render the SlackButton component.

import { NotificationAPIProvider, SlackButton } from '@notificationapi/react';

const YourApp = () => {
  return (
    <NotificationAPIProvider clientId="YOUR_CLIENT_ID" userId="USER_ID">
      <SlackButton
        style={{ ... }}
      />
    </NotificationAPIProvider>
  );
};

This will render a “Connect Slack” button. When a user clicks it, they will be guided through the Slack authorization process.

Coming soon.

3. Trigger Notifications (back-end)

At this stage, NotificationAPI has all the permissions and tokens necessary to post messages to the user’s Slack workspace.

You can now trigger notifications from your backend.

INFO

Ensure that the userId used to trigger the notification is the same as the userId used to initialize the frontend SDK.

Schematic Diagram

Below is a detailed schematic that breaks down the process:

sequenceDiagram participant User participant Your Frontend participant Slack participant Your Backend participant NotificationAPI User->>Your Frontend: Clicks "Connect Slack" Your Frontend-->>Slack: Redirects user to install/authorize Slack app User->>Slack: Authorizes Slack app Slack-->>NotificationAPI: Redirects to a page to pick a channel User->>NotificationAPI: Selects a channel NotificationAPI-->>Your Frontend: Redirects back to your app with success message Note over User,NotificationAPI: Everything is now ready for notifications to flow! Your Backend->>NotificationAPI: Sends Notification to Slack NotificationAPI->>Slack: Pushes Notification to User's workspace Slack->>User: Displays Notification

Frequently Asked Questions (FAQs)

Does the user see NotificationAPI branding during the Slack authorization process?

No, the user will see a bland “Notifications” integration being added to their Slack workspace. Furthermore, the page where users pick their channel is white-labeled too.

Can I use my own Slack app?

Yes, you can use your own Slack app. Reach out to our team to get started.

Can I replace the Connect Slack and the channel selection screen with my own UI?

To replace the Connect Slack button, simply look at the code inside the SlackButton component.

  1. Form your own Slack OAuth redirect URL,
  2. Render the button or any UI that redirects the user to this URL,

Optional: you can use APIs to determine the user’s Slack connection and change the UI based on that.

To replace the channel selection screen:

  1. Query our APIs for the user’s Slack workspace channels,
  2. Let the user select one,
  3. Pass the selection to our identify function