> ## Documentation Index
> Fetch the complete documentation index at: https://docs.usenash.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embedding the Nash Live-Tracking Experience

Nash provides a fully-hosted, white-label live-tracking UI that you can surface inside **any** web or hybrid mobile application with nothing more than an `<iframe>`. The embed shows the courier’s position on a live map together with real-time status updates—no backend work required on your side.

## 1) Pick the correct base URL

| Environment        | Base URL                                |
| ------------------ | --------------------------------------- |
| **Production**     | `https://tracking.usenash.com/`         |
| **Sandbox / Test** | `https://tracking.sandbox.usenash.com/` |

## 2) Add the required path parameter

The last segment of the URL must be a **`packageId`** or a **`jobId`** (both work—use whichever you have on hand):

```text theme={null}
https://tracking.usenash.com/{packageId}
https://tracking.usenash.com/{jobId}
```

## 3) Optional: map-only mode

If you want to present *just* the live map without the details pane, add the **`components`** query parameter with value `map`:

```text theme={null}
https://tracking.usenash.com/{jobId}?components=map
```

### Complete example

```html theme={null}
<iframe
  title="Nash live tracking"
  src="https://tracking.usenash.com/8e7f3c59?components=map"
  style="
    width: 100%;
    height: 600px;
    border: none;
  "
  allowfullscreen
/>
```

> **Note**
> For production traffic we **strongly recommend** using the HTTPS endpoint (`https://tracking.usenash.com`) to ensure end-to-end encryption.

## 4) Reference

<Tabs>
  <Tab title="Production">
    <Info>
      URL: [https://tracking.usenash.com](https://tracking.usenash.com)
    </Info>

    | Parameter                    | Location | Required | Description                                      |
    | ---------------------------- | -------- | -------- | ------------------------------------------------ |
    | `/{packageId}` or `/{jobId}` | Path     | **Yes**  | Unique identifier you receive from the Nash API. |
    | `components`                 | Query    | No       | When set to `map`, hides the details panel.      |
  </Tab>

  <Tab title="Sandbox">
    <Info>
      URL: [https://tracking.sandbox.usenash.com/](https://tracking.sandbox.usenash.com/)
    </Info>

    | Parameter                    | Location | Required | Description                                     |
    | ---------------------------- | -------- | -------- | ----------------------------------------------- |
    | `/{packageId}` or `/{jobId}` | Path     | **Yes**  | Unique identifier from the Sandbox environment. |
    | `components`                 | Query    | No       | Same behavior as production.                    |
  </Tab>
</Tabs>

## 5) Need something richer?

The iframe approach covers the majority of use-cases, but Nash also supports **deeper, fully customizable embeddings**—for example:

* Pushing live status events directly into your own components
* Re-skinning the UI to match a bespoke design system
* Embedding only selective widgets (ETA chip, progress bar, etc.)

These advanced options require a short enablement step on our side. Reach out to your Nash solutions engineer or email [**support@usenash.com**](mailto:support@usenash.com) to learn more.

***

✨ Drop the iframe into your product and let Nash handle the live-tracking magic.