skills.rest
novuhq
novuhqOFFICIAL
Explore all skills by this author →
Website𝕏@novuhqGitHub

add-channel-connect-button

Implements channel connect buttons for chat providers in the Novu SolidJS and React SDKs.

39.7k|4.4k|Updated Aug 26, 2021
Search Tags:#solidjs#novu#reAct#chat channel#Connect button#oAuth#sdk component
One-click install
npx skills add https://github.com/novuhq/novu --skill add-channel-connect-button
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-channel-connect-button
Source: https://github.com/novuhq/novu/tree/main/.cursor/skills/add-channel-connect-button
Command: npx skills add https://github.com/novuhq/novu --skill add-channel-connect-button

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Adding connect/disconnect UI for a new chat channel (e.g. WhatsApp, Discord, LINE) to the Novu SDKs requires touching many files across two packages with subtle conventions; this Skill codifies the exact pattern so nothing is missed.

Core Features & Use Cases

  • Connection model decision guide: Chooses between the OAuth-based channelConnections model (Slack, MS Teams) and the deep-link channelEndpoints model (Telegram) before writing code.
  • Full file checklist: Covers the SolidJS core component, brand icon, data hook, Renderer registration, React wrapper, and package exports in @novu/js and @novu/react.
  • Behavior contract and templates: Defines the shared loading/connect/polling/disconnect state machine, appearance keys, and copy-ready code templates in reference.md.
  • Use Case: Add a DiscordConnectButton by copying the Telegram endpoint-based pattern, registering it in Renderer.tsx, exporting it from both packages, and verifying it in the Next.js playground.

Quick Start

Add a new Discord connect button to the Novu SDKs following the existing Slack and Telegram connect button pattern.

Frequently Asked Questions about add-channel-connect-button

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a new channel connect button to the Novu React SDK?▼

Create a SolidJS core component in packages/js mirroring SlackConnectButton or TelegramConnectButton, register it in Renderer.tsx, then add a React wrapper in packages/react that mounts it by name through novuUI.mountComponent. Export the component and its props type from both packages.

What is the difference between channelConnections and channelEndpoints in Novu?▼

channelConnections handles OAuth-based providers that authorize at workspace level, like Slack and MS Teams, using generateConnectOAuthUrl. channelEndpoints handles deep-link providers like Telegram, where subscribers link via a URL and connection is detected by listing endpoints.

How do I choose between the OAuth and deep-link connection model?▼

Use the connection-based model when the provider authorizes at workspace or tenant level via OAuth, and the endpoint-based model when subscribers link by opening a deep link with no workspace auth. OAuth app-install providers map to connections; bot deep-link providers map to endpoints.

Why is my Novu connect button not rendering correctly?▼

The name passed to mountComponent must exactly match the key in the novuComponents registry and be listed in CHANNEL_COMPONENTS in Renderer.tsx. A mismatch causes the component to render through the wrong path.

Can I add new appearance keys for a custom connect button?▼

No. All connect buttons share the appearance keys channelConnectButtonContainer, Button, Inner, Icon, and Label, each receiving a connected context. Reuse these keys and the IconRendererWrapper with channelConnect and channelConnected icon keys.

Do I need to change the Novu backend to add a connect button?▼

Usually not. The channelConnections and channelEndpoints SDK modules already cover both models, and backend code lives in apps/api/src/app/channel-connections. Only add a new SDK method if the provider needs a brand-new server call, and never edit the auto-generated libs/internal-sdk.

Related Skills

Explore More Software Engineering Skills→
novuhqnovuhq
3

novu-manage-subscribers

Create, update, and organize subscriber profiles with topic and credential settings via the Novu SDK.

Official
Intermediate
autonomy-cloudautonomy-cloud
2

release

Dispatch a GitHub Actions Release workflow with a validated semantic version bump.

Official
Intermediate
solana-mobilesolana-mobile
6

mwa-connection

Connect and disconnect wallets in React Native apps using the useMobileWallet hook.

Official
Intermediate
ClawLink-HQClawLink-HQ
117

pagerduty-incidents

Automates incident creation, acknowledgment, and resolution via the PagerDuty REST API.

Official
Intermediate