Connect Components

Novu provides pre-built UI components for chat platforms like Slack, Microsoft Teams, Telegram and other communication platforms. Add these components so users can install the communication platform app in their workspace and connect it to your agent.

Slack connect button

SlackConnectButton is a pre-built UI component in the @novu/react SDK that connects an agent to a Slack workspace. Check out the example below.

import { SlackConnectButton } from '@novu/react';

const SlackConnectButtonComponent = () => {
  const subscriberId = 'subscriber-id';
  const integrationIdentifier = 'integration-identifier';
  const agent = {
    identifier: 'agent-identifier',
    name: 'agent-name',
  };

  const handleSlackOAuthSuccess = () => {
    // Handle success
  };

  return (
    <SlackConnectButton
      integrationIdentifier={integrationIdentifier}
      connectionIdentifier={`${subscriberId}:${integrationIdentifier}:${agent.identifier}`}
      connectionMode="subscriber"
      connectLabel={`Install ${agent.name} ↗`}
      connectedLabel="Connected to Slack"
      onConnectSuccess={handleSlackOAuthSuccess}
      onConnectError={(error: unknown) => {
        console.error(error);
      }}
    />
  );
};

export default SlackConnectButtonComponent;

Add SlackConnectButton to my app

Open in Cursor

API reference

SlackConnectButton accepts the following props to customize the UI and behavior:

Property	Type	Description
`integrationIdentifier`	`string`	Required. Identifier of the Slack integration to connect against.
`connectionIdentifier`	`string`	Optional. Unique identifier for the connection. Auto-generated per subscriber when omitted.
`subscriberId`	`string`	Optional. Subscriber to connect. Defaults to the `NovuProvider` subscriber.
`context`	`Partial<Record<string, ContextValue>>`	Optional. Contextual attributes used to scope the connection. Required when `connectionMode` is `shared`.
`scope`	`string[]`	Optional. OAuth scopes requested during connect.
`connectionMode`	`ConnectionMode`	Optional. `subscriber` (default) or `shared`.
`onConnectSuccess`	`(connectionIdentifier: string) => void`	Called once the connection is established.
`onConnectError`	`(error: unknown) => void`	Called when the connect flow fails or times out.
`onDisconnectSuccess`	`() => void`	Called after the connection is removed.
`onDisconnectError`	`(error: unknown) => void`	Called when disconnecting fails.
`connectLabel`	`string`	Label shown when disconnected.
`connectedLabel`	`string`	Label shown when connected.
`appearance`	`ReactInboxAppearance \| ReactSubscriptionAppearance \| ReactAllAppearance`	Style overrides reusing the shared `channelConnectButton*` keys.
`container`	`HTMLElement`	Optional element to render the component into.

Microsoft Teams connect button

MsTeamsConnectButton is a pre-built UI component in the @novu/react SDK that connects your agent to a customer’s Microsoft Teams tenant. When clicked, it opens Microsoft’s admin consent flow in a new tab and polls until the tenant administrator grants consent, then stores a ChannelConnection for that tenant. In subscriber mode, autoLinkUser defaults to true, so the same flow also links the subscriber who clicked Connect as a personal Teams endpoint for direct messages. Set autoLinkUser={false} to perform only the tenant-level admin consent.

import { NovuProvider, MsTeamsConnectButton } from '@novu/react';

const MsTeamsConnectButtonComponent = () => {
  const subscriberId = 'subscriber-id';
  const integrationIdentifier = 'msteams-integration-identifier';

  return (
    <NovuProvider subscriberId={subscriberId} applicationIdentifier="application-identifier">
      <MsTeamsConnectButton
        integrationIdentifier={integrationIdentifier}
        connectLabel="Connect MS Teams"
        connectedLabel="Connected to MS Teams"
        onConnectSuccess={(connectionIdentifier) => {
          console.log('Connected', connectionIdentifier);
        }}
        onConnectError={(error: unknown) => {
          console.error(error);
        }}
        onDisconnectSuccess={() => {
          // Handle disconnect
        }}
      />
    </NovuProvider>
  );
};

export default MsTeamsConnectButtonComponent;

Admin consent connects the customer’s Microsoft 365 tenant. It is required for both channel messages and direct messages. Linking a subscriber for direct messages is a separate step handled by autoLinkUser or the MsTeamsLinkUser component below. Sending to a specific channel additionally requires registering an ms_teams_channel channel endpoint after consent.

Add MsTeamsConnectButton to my app

Open in Cursor

API reference

MsTeamsConnectButton accepts the following props to customize the UI and behavior:

Property	Type	Description
`integrationIdentifier`	`string`	Required. Identifier of the Microsoft Teams integration to connect against.
`connectionIdentifier`	`string`	Optional. Unique identifier for the connection. Auto-generated per subscriber when omitted.
`subscriberId`	`string`	Optional. Subscriber to connect. Defaults to the `NovuProvider` subscriber.
`context`	`Partial<Record<string, ContextValue>>`	Optional. Contextual attributes used to scope the connection. Required when `connectionMode` is `shared`.
`scope`	`string[]`	Optional. OAuth scopes requested during connect.
`connectionMode`	`ConnectionMode`	Optional. `subscriber` (default) or `shared`.
`autoLinkUser`	`boolean`	Optional. When `true` (default in subscriber mode), chains into the delegated user-linking flow after admin consent. Set `false` for tenant-only admin consent.
`onConnectSuccess`	`(connectionIdentifier: string) => void`	Called once the connection is established.
`onConnectError`	`(error: unknown) => void`	Called when the connect flow fails or times out.
`onDisconnectSuccess`	`() => void`	Called after the connection is removed.
`onDisconnectError`	`(error: unknown) => void`	Called when disconnecting fails.
`connectLabel`	`string`	Label shown when disconnected. Defaults to `Connect MS Teams`.
`connectedLabel`	`string`	Label shown when connected. Defaults to `Connected`.
`appearance`	`ReactInboxAppearance \| ReactSubscriptionAppearance \| ReactAllAppearance`	Style overrides reusing the shared `channelConnectButton*` keys.
`container`	`HTMLElement`	Optional element to render the component into.

Link a subscriber for direct messages

MsTeamsLinkUser links an individual subscriber’s Teams identity so your agent can send them direct messages. It runs a delegated Microsoft OAuth flow (User.Read scope), resolves the subscriber’s AAD Object ID, and creates a ChannelEndpoint of type ms_teams_user. Admin consent from MsTeamsConnectButton must be completed first. Use this component when you set autoLinkUser={false} on the connect button, or when you want to link users in a separate step.

import { NovuProvider, MsTeamsLinkUser } from '@novu/react';

const MsTeamsLinkUserComponent = () => {
  const subscriberId = 'subscriber-id';
  const integrationIdentifier = 'msteams-integration-identifier';

  return (
    <NovuProvider subscriberId={subscriberId} applicationIdentifier="application-identifier">
      <MsTeamsLinkUser
        integrationIdentifier={integrationIdentifier}
        linkLabel="Link Microsoft Teams"
        unlinkLabel="Linked to Microsoft Teams"
        onLinkSuccess={(endpoint) => {
          console.log('Linked', endpoint.identifier);
        }}
        onLinkError={(error: unknown) => {
          console.error(error);
        }}
        onUnlinkSuccess={() => {
          // Handle unlink
        }}
      />
    </NovuProvider>
  );
};

export default MsTeamsLinkUserComponent;

MsTeamsLinkUser accepts the following props to customize the UI and behavior:

Property	Type	Description
`integrationIdentifier`	`string`	Required. Identifier of the Microsoft Teams integration to link against.
`connectionIdentifier`	`string`	Optional. Unique identifier for the connection. Auto-generated per subscriber when omitted.
`context`	`Partial<Record<string, ContextValue>>`	Optional. Contextual attributes used to scope the endpoint.
`onLinkSuccess`	`(endpoint: { identifier: string }) => void`	Called once the `ms_teams_user` endpoint is created.
`onLinkError`	`(error: unknown) => void`	Called when linking fails or polling times out.
`onUnlinkSuccess`	`() => void`	Called after the endpoint is removed.
`onUnlinkError`	`(error: unknown) => void`	Called when unlinking fails.
`linkLabel`	`string`	Label shown when not linked.
`unlinkLabel`	`string`	Label shown when linked.
`appearance`	`ReactInboxAppearance \| ReactSubscriptionAppearance \| ReactAllAppearance`	Style overrides reusing the shared `channelConnectButton*` keys.
`container`	`HTMLElement`	Optional element to render the component into.

Telegram connect button

TelegramConnectButton is a pre-built UI component in the @novu/react SDK that links a subscriber’s Telegram chat to your agent. It authenticates with the subscriber JWT from NovuProvider, so no secret key is exposed in the browser. When clicked, the button issues a t.me/<bot>?start=<code> deep link, opens it in a new tab, and polls until the subscriber presses Start in Telegram. Clicking again while connected disconnects the chat.

import { NovuProvider, TelegramConnectButton } from '@novu/react';

const TelegramConnectButtonComponent = () => {
  const subscriberId = 'subscriber-id';
  const integrationIdentifier = 'telegram-integration-identifier';

  return (
    <NovuProvider subscriberId={subscriberId} applicationIdentifier="application-identifier">
      <TelegramConnectButton
        integrationIdentifier={integrationIdentifier}
        connectLabel="Connect Telegram"
        connectedLabel="Connected to Telegram"
        onConnectSuccess={(endpointIdentifier) => {
          console.log('Connected', endpointIdentifier);
        }}
        onConnectError={(error: unknown) => {
          console.error(error);
        }}
        onDisconnectSuccess={() => {
          // Handle disconnect
        }}
      />
    </NovuProvider>
  );
};

export default TelegramConnectButtonComponent;

Add TelegramConnectButton to my app

Open in Cursor

API reference

TelegramConnectButton accepts the following props to customize the UI and behavior:

Property	Type	Description
`integrationIdentifier`	`string`	Required. Identifier of the Telegram integration to link against.
`subscriberId`	`string`	Optional. Subscriber to link. Defaults to the `NovuProvider` subscriber.
`onConnectSuccess`	`(endpointIdentifier: string) => void`	Called once the Telegram chat endpoint is detected.
`onConnectError`	`(error: unknown) => void`	Called when issuing the link fails or polling times out.
`onDisconnectSuccess`	`() => void`	Called after the chat endpoint is removed.
`onDisconnectError`	`(error: unknown) => void`	Called when disconnecting fails.
`connectLabel`	`string`	Label shown when disconnected. Defaults to `Connect Telegram`.
`connectedLabel`	`string`	Label shown when connected. Defaults to `Connected to Telegram`.
`appearance`	`Appearance`	Style overrides reusing the shared `channelConnectButton*` keys.
`container`	`HTMLElement`	Optional element to render the component into.

Create an agent

Create an agent in the Novu dashboard and connect a provider.

Quickstart

Create an agent, connect Slack, and get a reply in-thread.

​Slack connect button

​API reference

​Microsoft Teams connect button

​API reference

​Link a subscriber for direct messages

​Telegram connect button

​API reference

​Related

Create an agent

Quickstart

Slack connect button

API reference

Microsoft Teams connect button

API reference

Link a subscriber for direct messages

Telegram connect button

API reference

Related