Skip to main content
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

Novu is working on adding a Microsoft Teams connect button to the @novu/react SDK. Reach out to support at support@novu.co to get access to a pre-release version.

​
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:
PropertyTypeDescription
integrationIdentifierstringRequired. Identifier of the Telegram integration to link against.
subscriberIdstringOptional. Subscriber to link. Defaults to the NovuProvider subscriber.
onConnectSuccess(endpointIdentifier: string) => voidCalled once the Telegram chat endpoint is detected.
onConnectError(error: unknown) => voidCalled when issuing the link fails or polling times out.
onDisconnectSuccess() => voidCalled after the chat endpoint is removed.
onDisconnectError(error: unknown) => voidCalled when disconnecting fails.
connectLabelstringLabel shown when disconnected. Defaults to Connect Telegram.
connectedLabelstringLabel shown when connected. Defaults to Connected to Telegram.
appearanceAppearanceStyle overrides reusing the shared channelConnectButton* keys.
containerHTMLElementOptional 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.