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
Vanilla JS 
See example below
Once you have installed the package, you can use the TrackstarLink component in your application. If you are using vanilla Javascript, you can still use the Trackstar Link component by loading the script in your HTML file: 
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.
​
integrationType
string
The type of integration to show in the list. Can be “wms” or “cart”. (default: “wms”)
​
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.
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. Click on the associated row, then press the “Copy” button 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.
  • 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.
Trackstar Branding