Trackstar Link

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.

​

Setting up 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

Angular

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

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.

​

Sending a Magic Link

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.

​

Magic Link Configuration

• 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.
• Connection ID (Optional): The ID of the connection that the Magic Link is for. Only pass this in when you want to update the credentials of an existing connection.
• 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.

​

Custom Branding

You can customize the appearance of the Trackstar Link within the Trackstar Dashboard. Here you can set the following:

• Custom Logo: The logo that will be displayed in the Trackstar Link modal.
• Custom Color: The color of the Trackstar Link button.