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.

  • Embedding the component

  • Sending a Magic Link

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>
  );
}

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
object

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
object

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.

integrationBlockList
object

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.

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.