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;

<Prompt description="Add SlackConnectButton to my app" icon="plug" actions={["copy", "cursor"]}> Add the Novu SlackConnectButton from @novu/react to my app so each of my end users can connect "YOUR_AGENT_NAME" to their own Slack workspace.

Context: The Slack integration already exists in Novu. This is purely a frontend code integration - do NOT run the Novu CLI or the agent-onboarding flow.

Requirements:

• Install @novu/react with my project's package manager.
• Render <SlackConnectButton /> inside a <NovuProvider> configured for the currently signed-in end user.
• Use applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" and integrationIdentifier="YOUR_INTEGRATION_IDENTIFIER" with connectionMode="subscriber". Store applicationIdentifier in an environment variable rather than hardcoding it.
• In subscriber mode each user gets their own connection, so pass the authenticated user's id as subscriberId - source it from my app's existing auth, don't hardcode it.
• Follow my app's existing framework, routing, styling, and TypeScript conventions, place the button in a sensible spot in the UI, and add no unnecessary wrappers.

Optional reference: https://docs.novu.co/agents/custom-code-agent/connect-components </Prompt>

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;

<Prompt description="Add MsTeamsConnectButton to my app" icon="plug" actions={["copy", "cursor"]}> Add the Novu MsTeamsConnectButton from @novu/react to my app so each of my end users can connect "YOUR_AGENT_NAME" to their own Microsoft Teams.

Context: The Microsoft Teams integration already exists in Novu. This is purely a frontend code integration - do NOT run the Novu CLI or the agent-onboarding flow.

Requirements:

• Install @novu/react with my project's package manager.
• Render <MsTeamsConnectButton /> inside a <NovuProvider> configured for the currently signed-in end user.
• Use applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" and integrationIdentifier="YOUR_INTEGRATION_IDENTIFIER" with connectionMode="subscriber". Store applicationIdentifier in an environment variable rather than hardcoding it.
• In subscriber mode each user gets their own connection, so pass the authenticated user's id as subscriberId - source it from my app's existing auth, don't hardcode it. autoLinkUser defaults to true in subscriber mode.
• Follow my app's existing framework, routing, styling, and TypeScript conventions, place the button in a sensible spot in the UI, and add no unnecessary wrappers.

Optional reference: https://docs.novu.co/agents/custom-code-agent/connect-components </Prompt>

API reference

MsTeamsConnectButton accepts the following props:

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;

<Prompt description="Add TelegramConnectButton to my app" icon="plug" actions={["copy", "cursor"]}> Add the Novu TelegramConnectButton from @novu/react to my app so each of my end users can connect "YOUR_AGENT_NAME" to their own Telegram chat.

Context: The Telegram integration already exists in Novu. This is purely a frontend code integration - do NOT run the Novu CLI or the agent-onboarding flow.

Requirements:

• Install @novu/react with my project's package manager.
• Render <TelegramConnectButton /> inside a <NovuProvider> configured for the currently signed-in end user.
• Use applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" and integrationIdentifier="YOUR_INTEGRATION_IDENTIFIER". Store applicationIdentifier in an environment variable rather than hardcoding it.
• Pass the authenticated user's id as subscriberId - source it from my app's existing auth, don't hardcode it.
• Follow my app's existing framework, routing, styling, and TypeScript conventions, place the button in a sensible spot in the UI, and add no unnecessary wrappers.

Optional reference: https://docs.novu.co/agents/custom-code-agent/connect-components </Prompt>

API reference

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

Related