insertvideo

Step 1: Import the code snippet

npm i @panora/embedded-card-react

By default, all connectors are rendered but you have the option to use the category prop to filter them by category. Learn more about values accepted here.

Import a single connector card

You must import both @panora/shared (which contains the types) and @panora/embedded-card-react.

Don’t forget to import the styles as well import "@panora/embedded-card-react/dist/index.css";

import "@panora/embedded-card-react/dist/index.css";
import { PanoraProviderCard } from "@panora/embedded-card-react";
import { ConnectorCategory } from '@panora/shared'

const MyPage = () => {
    return (
        <PanoraProviderCard
            name={"hubspot"} // name of the provider
            category={ConnectorCategory.Crm} // category where provider belongs to
            projectId={"c9a1b1f8-466d-442d-a95e-11cdd00baf49"} // the project id tied to your organization
            returnUrl={"https://acme.inc"} // the url you want to redirect users to after the connection flow is successful
            linkedUserId={"b860d6c1-28f9-485c-86cd-fb09e60f10a2"}  // the linked id of the user if already created in Panora system or user's info in your system
        />
    )
} 

Import the whole connector catalog

import "@panora/embedded-card-react/dist/index.css";
import { PanoraDynamicCatalogCard } from "@panora/embedded-card-react";
import { ConnectorCategory } from '@panora/shared'

const MyPage = () => {
    return (
        <PanoraDynamicCatalogCard
            category={ConnectorCategory.Crm} // optional but if provided it returns only connectors of the category
            projectId={"c9a1b1f8-466d-442d-a95e-11cdd00baf49"} // the project id tied to your organization
            returnUrl={"https://acme.inc"} // the url you want to redirect users to after the connection flow is successful
            linkedUserId={"b860d6c1-28f9-485c-86cd-fb09e60f10a2"}  // the linked id of the user if already created in Panora system or user's info in your system
        />
    )
}

Congrats ! You should be able to see the displayed connectors !

Step 2 (optional): Select your own connectors

insertvideo

You have the ability to choose which connectors will be rendered (also applied to magic-link).

Go to Manage Catalog Widget section, locate the connector you wish to add/remove and switch it on/off.