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:

Microsoft Teams connect button

MsTeamsConnectButton is a pre-built UI component in the @novu/react SDK that connects an agent to a user’s Microsoft Teams. In subscriber mode, autoLinkUser defaults to true so the per-user Teams identity is linked after 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}
        connectionMode="subscriber"
        connectLabel="Install agent ↗"
        connectedLabel="Connected to MS Teams"
        onConnectSuccess={(connectionIdentifier) => {
          // Workspace linked
          console.log('Connected', connectionIdentifier);
        }}
        onConnectError={(error: unknown) => {
          console.error(error);
        }}
      />
    </NovuProvider>
  );
};

export default MsTeamsConnectButtonComponent;

Add MsTeamsConnectButton to my app

Open in Cursor

API reference

MsTeamsConnectButton accepts the following props:

Property	Type	Description
`integrationIdentifier`	`string`	Required. Identifier of the Teams integration.
`connectionIdentifier`	`string`	Optional. Stable id for the connection.
`subscriberId`	`string`	Optional. Defaults to the `NovuProvider` subscriber.
`connectionMode`	`ConnectionMode`	e.g. `subscriber`.
`autoLinkUser`	`boolean`	Defaults to `true` in subscriber mode.
`onConnectSuccess`	`(connectionIdentifier: string) => void`	Called with the connection identifier after consent succeeds.
`onConnectError`	`(error: unknown) => void`	Called when consent or link fails.
`onDisconnectSuccess`	`() => void`	Called after disconnect.
`onDisconnectError`	`(error: unknown) => void`	Called when disconnect fails.
`connectLabel`	`string`	Label when disconnected.
`connectedLabel`	`string`	Label when connected.
`appearance`	`Appearance`	Style overrides.
`container`	`HTMLElement`	Optional mount element.

If auto-link fails after admin consent, use MsTeamsLinkUser as a follow-up. Channel page: Microsoft Teams.

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.

Connect AI SDK

Connect an existing agent to Slack and get a reply in-thread.

Connecting your app

Wire the bridge endpoint and register agent handlers in your app.

Getting Started

Channels

Custom Code Agent

Managed Agent

Observability

Connect Components

Slack connect button

API reference

Microsoft Teams connect button

API reference

Telegram connect button

API reference

Connect AI SDK

Connecting your app

​Slack connect button

​API reference

​Microsoft Teams connect button

​API reference

​Telegram connect button

​API reference

​Related

Connect AI SDK

Connecting your app

Slack connect button

API reference

Microsoft Teams connect button

API reference

Telegram connect button

API reference

Related