Embedding the Track widget – nShift

Keep your customers on your website by embedding the Track widget into your webpage. This is typically done by setting up a dedicated tracking page designed to accommodate the widget. You can then send a tracking link to your end customer who can access the tracking page directly.

Follow these steps to embed a Track widget:

Make sure you have set up a Track Public Profile. (Read more).
Add the domain of your website (where the Track widget will be embedded). This is done under Embed Settings on the configuration page of your public profile and it will whitelist your domain and allow the Track widget to be correctly loaded.

Load Track widget code:

<script src="https://www.nshiftportal.com/ui/.host/asset-redirects/track-embed-script" id="nshift-tracking-widget" ></script>

Note: make sure the id="nshift-tracking-widget" is included. This is used by the script internally.

Select which element of the page should be the container for the Track widget and give it a unique ID. Example:
```
<div id="nshift-tracking-widget-container"></div>
```
After the script is loaded and you would like to render the widget, you can use Javascript to initialize the Track widget. Use the renderTrackingApp method, this will be exposed on the window Object, under nShiftTrackingAPI:
```
window.nShiftTrackingAPI.renderTrackingApp({ 
      containerId: 'nshift-tracking-widget-container', 
      publicProfile: '<YOUR_TRACK_PUBLIC_PROFILE', 
      query: '<YOUR_SHIPMENT_ID' 
      })
```

nShift Help Center

Related articles