Quick Start

​

1. Setup a Fabra Account

1. Login or create an account in Fabra.
2. Setup your organization.
3. (Optional) Invite team members

​

2. Setup a Destination

In Fabra’s Admin Panel, navigate to the Destinations tab on the side navigation bar, and click New Destination in the top right of the page.

​

3. Create an Object

In Fabra’s Admin Panel, navigate to the Objects tab on the side navigation bar, and click New Object in the top right of the page. Choose one of the Destinations you have configured from Step 1 and select the namespace and table where Fabra should load data into for this object.

Fabra will pull the existing fields/columns from your selected table, and you can then use those to define the fields you expect from your customers. If you want to omit a field, simply check the omit checkbox and Fabra will not prompt your customers for that field. Make sure to provide helpful display names and descriptions, since these will be what your customers see.

​

4. Add Fabra Connect to your frontend

Fabra Connect is a UI component that your users will interact with in order to setup their data source connections and start syncing data into your system. Getting setup is only two easy steps.

​

Create a Link Token

In your backend, set up a POST request to initialize a Connect session and get a link_token from Fabra's Create Link Token endpoint.

Make sure to include the end_customer_id, which identifies the customer in your own system. When Fabra performs a sync for this customer, it will include this ID in every row that it loads into your system.

You'll want to create an endpoint in your backend to perform this creation on demand. Here's an example of how that would look in a Node backend:

app.post("/link-token", async (req, res) => {
  const response = await fetch("https://api.fabra.io/link_token", {
    method: "POST",
    headers: {
      "X-API-KEY": process.env.FABRA_API_KEY,
    },
    body: JSON.stringify({end_customer_id: "abcd-1234-efgh-5678"})
  });

  const body = await response.json();
  res.send({ link_token: body.link_token });
});

​

Initialize Fabra Connect

• React
• Vue
• Angular

npm install --save @fabra/react-fabra-connect

import React from "react";
import { useFabraConnect } from "@fabra/react-fabra-connect";

const App = () => {
  const { open } = useFabraConnect(); // Can pass optional `customTheme` object here
  const linkToken = fetchLinkToken(); // Use the API you created in Step 1 here

  return (
    <button onClick={() => open(linkToken)}>
      Open Fabra Connect
    </button>
  );
};