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

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

React

  yarn add @trackstar/react-trackstar-link

Angular

  yarn add @trackstar/angular-trackstar-link

Once you have installed the package, you can use the TrackstarLink component in your application. Here is an example of how to use the component in a React 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, integrationName) =>
        // 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,
              integration_name: integrationName,
            }),
          }
        )
      }
      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.

Within the Trackstar Dashboard, you can send a Magic Link to your customers. Simply press the “Generate Magic Link” button to open the Magic Link modal. From here, you can configure the Magic Link, generate a url, and send it to your customer.

Once the customer successfully connects a WMS, the connection can be found in the Connections page of the Trackstar Dashboard. Press the Key icon of the associated row to retrieve the permanent access token for the connection.

  • Link Duration: The duration that the Magic Link is valid for. After this time, the Magic Link will expire and the customer will need to request a new one.
  • Customer ID (Optional): The ID of the customer that the Magic Link is for. This is useful for associating the connection with a customer in your system.
  • Endpoinst List (Optional): Only show integrations that have the selected endpoints supported.
  • Integration Allow List (Optional): Only show the integrations that are in the allow list.
  • Integration Block List (Optional): Do not show the integrations that are in the block list.