Bring your existing components or design system into your Paragon integrations experience with the Headless Connect Portal.
paragon.getIntegrationMetadata
: Returns display and branding information for integrations in your project, including a display name and icon.paragon.installIntegration
: Prompts the user for third-party authorization details to connect their account. This function should be used when a user expresses intent to install your integration, for example: from a “Connect” button in your integrations catalog.paragon.uninstallIntegration
: Disconnects the user’s account.paragon.getUser
: Returns the current state of the user, with their integrations and account statuses.A demo implementation of the Headless Connect Portal, using Material UI components and the Paragon SDK
Displaying integration metadata in a Headless Connect Portal, with Material UI
.getIntegrationMetadata
, passing the integrationType
as the first argument. This will return an object with the matching integration’s display metadata:
.icon
property..name
property.Adding a 'Connect' button to a Headless Connect Portal
.installIntegration
function.
.installIntegration
accepts the same integrationType
argument, so we can pass this parameter through to this function:
Displaying the Connect/Disconnect button dynamically based on account state
.getUser
and .subscribe
.
.getUser
returns an object with the user’s account state:
user.integrations[integrationType].enabled
.
useParagonAuth
hook from the tutorial, the returned user
object will automatically stay up-to-date by subscribing to onInstallIntegration
and onUninstallIntegration
events from the SDK, as shown below:
useParagonAuth
hook and are unable to, you can call paragon.subscribe
on your own to receive updates, as demonstrated below: