Novu Agents Add Connect Components

Add Connect UI components so users can link accounts and channels to your agent.

Novu provides pre-built UI components for chat platforms like Slack and Microsoft Teams. Add these components so users can install the Slack or Microsoft Teams 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;

API reference

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

Prop	Type	Default
`container?`	`string \| Node \| null`	-
`appearance?`	`ReactInboxAppearance \| ReactSubscriptionAppearance \| ReactAllAppearance`	-
`connectedLabel?`	`string`	-
`connectLabel?`	`string`	-
`onDisconnectError?`	`((error: unknown) => void)`	-
`onDisconnectSuccess?`	`(() => void)`	-
`onConnectError?`	`((error: unknown) => void)`	-
`onConnectSuccess?`	`((connectionIdentifier: string) => void)`	-
`connectionMode?`	`ConnectionMode`	-
`scope?`	`string[]`	-
`context?`	`Partial<Record<string, ContextValue>>`	-
`subscriberId?`	`string`	-
`connectionIdentifier?`	`string`	-
`integrationIdentifier?`	`string`	-

Microsoft Teams connect button

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

Novu Agents Add Connect Components

Slack connect button

API reference

Microsoft Teams connect button

On this page