Trackstar provides a component to allow your customers to easily and securely connect to any WMS. This component can be embedded into your application, or sent as a “Magic Link” to your customers.

Trackstar Link

There are two ways to set up Trackstar Link:

  1. Embedding the component: You can embed the Trackstar Link component into your application. This is the recommended way to use Trackstar Link, as it provides a seamless experience for your customers.

  2. Sending a Magic Link: You can send a Magic Link to your customers. This is useful if you don’t have a web application, or if you want to provide a quick way for your customers to connect to a WMS.

We have published an NPM package to make it easy to embed the Trackstar Link component into your application.

  yarn add @trackstar/react-trackstar-link

Once you have installed the package, you can use the TrackstarLink component in your application.

import { TrackstarConnectButton } from '@trackstar/react-trackstar-link';

function App() {

  const someCustomerId = "12345";
  return (
    <TrackstarConnectButton
      getLinkToken={async () => {
        // See step 2.1 in How To Guides -> Getting Started
        const response = await fetch('https://my-company.backend.com/get-link-token',
          {
            method: 'POST',
          }
        );
        const { linkToken } = await response.json();
        return linkToken;
      }}
      onSuccess={async (authCode) =>
        // See step 2.2 in How To Guides -> Getting Started
        await fetch('https://my-company.backend.com/store-token',
          {
            method: 'POST',
            body: JSON.stringify({
              customer_id: someCustomerId,
              auth_code: authCode,
            }),
          }
        )
      }
      onClose={() => console.log('closed')}
      onLoad={() => console.log('loaded')}
    >
      Connect your WMS
    </TrackstarConnectButton>
  );
}

Multiple Trackstar Buttons

Instead of using a single TrackstarConnectButton that opens a modal with a list of integrations, you can use multiple TrackstarConnectButton components to connect to specific integrations directly.

  1. Set the integrationAllowList prop to an array of a single integration ID. This will bypass the integration selection screen.
  2. Set the buttonId prop to a unique ID. This is required if you have multiple Trackstar Connect buttons on the same page.

For example, the following code will create three buttons that connect to Shiphero, Shipbob, and Deposco respectively:

import { TrackstarConnectButton } from '@trackstar/react-trackstar-link';

function App() {

  const someCustomerId
  const integrations = ['shiphero', 'shipbob', 'deposco'];

  return (
    <div>
      {integrations.map((integration) => (
        <TrackstarConnectButton
          //...otherProps
          integrationAllowList={[integration]}
          buttonId={integration}
        >
          Connect to {integration}
        </TrackstarConnectButton>
      ))}
    </div>
  );
}

Available Props

getLinkToken
function
required

A function that returns a link token. See Getting a Link Token for more information.

onSuccess
function
required

A function that is called when the customer successfully connects to a WMS. See Storing Tokens for more information.

onClose
function

A function that is called when the component is closed.

onLoad
function

A function that is called when the component is loaded.

sandbox
boolean

Set to true to include a “Sandbox” WMS in the list of integrations.

integrationsWithEndpoints
array

Only show the integrations in the list that have the given endpoints supported. e.g. integrationsWithEndpoints={['get_returns', 'create_return']} will only show the integrations that have the endpoints get_returns and create_return.

integrationAllowList
array

Only show the integrations in the list that are in the allow list. e.g. integrationAllowList={['wms1', 'wms2']} will only show the integrations that are in the allow list. If only one integration is in the allow list, the integration selection screen will be bypassed.

integrationBlockList
array

Do not show the integrations in the list that are in the block list. e.g. integrationBlockList={['wms1', 'wms2']} will not show the integrations that are in the block list.

logo
string

The URL of a custom logo to display in link modal.

buttonId
string

The ID of the button. This is required if you have multiple Trackstar Connect buttons on the same page.

style
object

Custom CSS styles to apply to the button.

Note: integrationAllowList, and integrationBlockList are mutually exclusive. If both props are given values, all integrations will be displayed. Integration IDs that can be used in these props can be found in the Integrations section.

About the APIIntegrations