💬 Send Slack Notifications

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

1. Integrate front-end

Redirect users to Slack OAuth, then optionally let them pick a channel.

There are two ways to do this:

Prebuilt React component (1 minute)
JavaScript (5 minutes)

Install the SDK:

npm install @notificationapi/react

Add our provider and SlackConnect component anywhere in your front-end:

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

const SettingsPage = () => {
  return (
    <NotificationAPIProvider clientId="YOUR_CLIENT_ID" userId="USER_ID">
      <SlackConnect />
    </NotificationAPIProvider>
  );
};

For custom UIs, use our headless JavaScript library. Install the SDK:

npm install @notificationapi/core

Generate the OAuth URL and redirect the user to it:

import { NotificationAPIClientSDK } from '@notificationapi/core';

// Initialize
const client = NotificationAPIClientSDK.init({
  clientId: 'YOUR_CLIENT_ID',
  userId: 'USER_ID'
});

// Generate OAuth URL (redirects back to current page by default)
const oauthUrl = client.slack.getOAuthUrl();
window.location.href = oauthUrl;

Read workspace channels and users:

const user = await client.user.get();
if (user.slackToken) {
  const response = await client.slack.getChannels();
}

Set a default channel/user for notifications to go to:

await client.slack.setChannel(`#${channelName}`);
await client.slack.setChannel(`@${userName}`);

Tenants

To avoid multiple users from one organization creating multiple “integrations” to the same channel like #general, it’s best that you set the “userId” to the end-user’s organization ID. This way, multiple users would be seeing and updating the same Slack integration.

At send time, you would also use the orgId.

Default Channel

You can start sending right after OAuth, by specifying the slackChannel parameter in the send method. The channel selection simply let’s the user pick a default one, so you don’t have to figure out the slackChannel in your back-end.

2. Trigger notifications from back-end

This part is easy, same as any other channel:

Install the SDK:

npm install notificationapi-node-server-sdk

Import, initialize, and send:

import notificationapi from 'notificationapi-node-server-sdk';

notificationapi.init('CLIENT_ID', 'CLIENT_SECRET');

notificationapi.send({
  type: 'order_tracking',
  to: {
    id: 'USER_ID or ORG_ID', // MUST match the userId from Step 1
    slackChannel: '#general' // Optional. If not specified, the default channel will be used
  },
  slack: {
    text: 'Hello, world!', // supports plain text and blocks
    blocks: [
      { type: 'section', text: { type: 'mrkdwn', text: 'Hello, *world*!' } }
    ]
  }
});

Install the SDK:

pip install notificationapi_python_server_sdk

Import, initialize, and send:

from notificationapi_python_server_sdk import notificationapi
import asyncio

notificationapi.init("CLIENT_ID", "CLIENT_SECRET")

async def send_slack_notification():
    await notificationapi.send({
        "type": "order_tracking",
        "to": {
            "id": "USER_ID or ORG_ID",  # MUST match the userId from Step 1
            "slackChannel": "#general"  # Optional. If not specified, the default channel will be used
        },
        "slack": {
            "text": "Hello, world!"
        }
    })

# Run the async function
asyncio.run(send_slack_notification())

Install the SDK:

composer require notificationapi/notificationapi-php-server-sdk

Import, initialize, and send:

use NotificationAPI\NotificationAPI;

$notificationapi = new NotificationAPI('CLIENT_ID', 'CLIENT_SECRET');

$notificationapi->send([
    "type" => "order_tracking",
    "to" => [
        "id" => "USER_ID or ORG_ID", // MUST match the userId from Step 1
        "slackChannel" => "#general" // Optional. If not specified, the default channel will be used
    ],
    "slack" => [
        "text" => "Hello, world!", // supports plain text and blocks
        "blocks" => List.of(new Block(BlockType.SECTION, Map.of("text", Map.of("type", "mrkdwn", "text", "Hello, *world*!"))))
    ]
]);

Install the SDK:

composer require notificationapi/notificationapi-laravel-server-sdk:@dev

Setup and send:

Add to .env:

NOTIFICATION_API_KEY=clientID
NOTIFICATION_API_SECRET=clientSecret

Send notification:

$user = new NotificationUser();
$user->id = "USER_ID or ORG_ID"; // MUST match the userId from Step 1

$user->notify(new MyNotification([
    "type" => "order_tracking",
    "slack" => [
        "text" => "Hello, world!", // supports plain text and blocks
        "blocks" => List.of(new Block(BlockType.SECTION, Map.of("text", Map.of("type", "mrkdwn", "text", "Hello, *world*!"))))
    ]
]));

To specify a channel:

$user = new NotificationUser();
$user->id = "USER_ID or ORG_ID";
$user->slackChannel = "#general";

$user->notify(new MyNotification([
    "type" => "order_tracking",
    "slack" => [
        "text" => "Hello, world!", # supports plain text and blocks
        "blocks" => List.of(new Block(BlockType.SECTION, Map.of("text", Map.of("type", "mrkdwn", "text", "Hello, *world*!"))))
    ]
]));

Install the SDK:

go get github.com/notificationapi-com/notificationapi-go-server-sdk

Import, initialize, and send:

import (
  notificationapi "github.com/notificationapi-com/notificationapi-go-server-sdk"
)

notificationapi.Init("CLIENT_ID", "CLIENT_SECRET", "https://api.notificationapi.com")

notificationapi.Send(
    notificationapi.SendRequest{
        Type: "order_tracking",
        To: notificationapi.User{
            Id:           "USER_ID or ORG_ID", // MUST match the userId from Step 1
            SlackChannel: "#general",          // Optional. If not specified, the default channel will be used
        },
        Slack: map[string]interface{}{
            "text": "Hello, world!", // supports plain text and blocks
            "blocks": List.of(new Block(BlockType.SECTION, Map.of("text", Map.of("type", "mrkdwn", "text", "Hello, *world*!")))) // supports plain text and blocks
        },
    },
)

Install the SDK:

dotnet add package NotificationAPI --version 0.5.0

Import, initialize, and send:

using NotificationApi.Server;
using NotificationApi.Server.Models;

var notificationApi = new NotificationApiServer("CLIENT_ID", "CLIENT_SECRET", false);

var user = new NotificationUser("USER_ID or ORG_ID") // MUST match the userId from Step 1
{
    SlackChannel = "#general" // Optional. If not specified, the default channel will be used
};

await notificationApi.Send(new SendNotificationData("order_tracking", user)
{
    Slack = new Dictionary<string, object>
    {
        { "text", "Hello, world!" }, // supports plain text and blocks
        { "blocks", List.of(new Block(BlockType.SECTION, Map.of("text", Map.of("type", "mrkdwn", "text", "Hello, *world*!")))) }
    }
});

Add to Maven:

<dependency>
    <groupId>com.notificationapi</groupId>
    <artifactId>notificationapi-java-server-sdk</artifactId>
    <version>0.2.0</version>
</dependency>

Import, initialize, and send:

import com.notificationapi.NotificationApi;

NotificationApi api = new NotificationApi("CLIENT_ID", "CLIENT_SECRET", "https://api.notificationapi.com");

User user = new User("USER_ID or ORG_ID") // MUST match the userId from Step 1
    .setSlackChannel("#general"); // Optional. If not specified, the default channel will be used

NotificationRequest request = new NotificationRequest("order_tracking", user)
    .setSlack(Map.of(
        "text", "Hello, world!", // supports plain text and blocks
        "blocks", List.of(new Block(BlockType.SECTION, Map.of("text", Map.of("type", "mrkdwn", "text", "Hello, *world*!"))))
    ));

String response = api.send(request);

Import, initialize, and send:

require_relative 'notification_api'

notificationapi = NotificationAPI.new('CLIENT_ID', 'CLIENT_SECRET')

notificationapi.send({
  type: 'order_tracking',
  to: {
    id: 'USER_ID or ORG_ID', # MUST match the userId from Step 1
    slackChannel: '#general' # Optional. If not specified, the default channel will be used
  },
  slack: {
    text: 'Hello, world!', # supports plain text and blocks
    blocks: [ { type: 'section', text: { type: 'mrkdwn', text: 'Hello, *world*!' } } ]
  }
});

INFO

The slackChannel parameter accepts #channelName, channelName (without #), channel ID, user ID, and @username.

How it Works (Diagram)

sequenceDiagram participant User participant Your Frontend participant Slack participant Your Backend participant NotificationAPI Note over User,NotificationAPI: Step 1: Integrate Slack User->>Your Frontend: Clicks "Connect Slack" Your Frontend-->>Slack: Redirects to Slack OAuth User->>Slack: Authorizes Slack app Slack-->>Your Frontend: Redirects to channel picker User->>Your Frontend: Selects channel Your Frontend-->>NotificationAPI: Stores channel preference Note over User,NotificationAPI: Step 2: Trigger Notifications Your Backend->>NotificationAPI: Triggers notification NotificationAPI->>Slack: Delivers to user's channel

Frequently Asked Questions (FAQs)

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

No. All parts of the process are bland and generic with no branding.

Can I use my own Slack app?

Yes. Reach out to our team to learn more.