​
Step 1: Import the code snippet

pnpm i @panora/embedded-card-react

​
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";

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 "@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} 
            projectId={"f9e9601e-d6da-471a-9777-94257e9b4f00"} 
            linkedUserId={"4c6ca51b-7b23-4e3a-9309-24d2d331a04d"} 
            optionalApiUrl={"http://localhost:3000"} // Optional (only if you are in selfhost mode and want to use localhost:3000), by default: api.panora.dev
        />
    )
}

​
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} 
            projectId={"f9e9601e-d6da-471a-9777-94257e9b4f00"} 
            linkedUserId={"4c6ca51b-7b23-4e3a-9309-24d2d331a04d"} 
            optionalApiUrl="http://localhost:3000"
        />
    )
}

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

​
Step 2 (optional): Select your own connectors

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.

Was this page helpful?

Suggest editsRaise issue