Step 1: Import the code snippet

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 the whole connector catalog

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.