Prerequisites

Before you begin, make sure you have the following:

  • A cloud account (or see our guide here on getting started with the selfhost version)
  • An API key, see our guide here
  • Node JS v18.17.1 or newer installed on your computer

Step 1: Get access to your users data

You either have the option to use a no-code magic link or the embedded frontend snippet to get access to your user’s data. Choose the one that fits your needs !

We recommend listening to webhooks to get notified once a user connects and catch the connection token used for requests.

1

No Code: Magic links

Let’s send our first magic link so you can ask your customers to grant you access to their tools, without writing code.

1

Login to your account dashboard
2

Go to Connections section and click button Create a Magic Link

3

Click Create a Unique Magic Link
4

You’ll be asked for two informations: an Origin User Email (of the user you’re creating the link for) and an Origin User Identifier. The Origin User Identifier is the id of the user you’re inviting, as represented in your sofwtare. If you already have created a Linked User you have the option to select it.

5

Click Generate
2

For Developers: Native Integration

Embed Panora into your product with our native component to collect access to use user’s data.

You can find the component on NPM here

1

Install the package in your code:

npm i @panora/embedded-card-react
2

Import the component and the styles in your integrations page:

import "@panora/embedded-card-react/dist/index.css";
import PanoraProviderCard from "@panora/embedded-card-react";
import PanoraDynamicCatalog from "@panora/embedded-card-react";
3

Use the catalog in your integrations page

You can either import a single connector card or a catalog of all connectors that you select in the UI dashboard configuration (see here for more details).

In order to fill the linkedUserId prop, use your own remote id that exist in your system OR check this recipe !

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

<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
/>

You should see a card or catalog being rendered client-side !

insert photo

Once the user successfully completes the granting auth flow, the connection will have a status value of valid.

Step 2: Send your first unified API requests

Create a contact in a CRM

We assume for this tutorial that you have a valid Panora API Key, and a connection_token. Find help here.

You can find the Typescript SDK on NPM here

In this example, we will create a contact in a CRM. Visit other sections of the documentation to find category-specific examples.

import { PanoraSDK } from '@panora/sdk-typescript';

const sdk = new PanoraSDK({ accessToken: "MY_API_KEY" });

const input = {
    first_name: 'tom',
    last_name: 'jedusor',
    email_addresses: [
      {
        'email_address': 'tom@jedusor.com',
        'email_address_type': 'PERSONAL'
      }
    ],
    phone_numbers: [
      {
        'phone_number': '+33650438278',
        'phone_type': 'MOBILE'
      }
    ],
};

const result = await sdk.crmContact.addContact(input, 'MY_USER_CONNECTION_TOKEN', {
    remoteData: true,
});

console.log(result);

Let’s break down what’s happening here:

  • We import the Panora SDK, which provides a convenient way to interact with the Panora Unified API.
  • We create an instance of the Panora SDK client, passing in our API key.
  • We call the sdk.crmContact.addContact method to add a contact inside a 3rd party. We specify the input we want to use (see here for reference).
  • Finally, we print the response.

Next Steps

Congratulations, you’ve successfully sent your first unified API request with Panora! Here are some next steps to continue your journey.

Listen to events using a webhook

Visit our webhooks section.

API resources

Drop into our API documentation for more details on the available endpoints and parameters.

Check out our client SDKs for a set of tools to make it easier for you to build with and integrate Panora into your applications.

✏️ Suggest an update