> For the complete documentation index, see [llms.txt](https://docs.parcellab.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.parcellab.com/docs/engage/order-status-page.md).

# Order Status Page

Create your own order status page with seamlessly integrated order, delivery, and payment status details so customers can track the delivery status of their package while engaging with your brand.

## Overview

The Order Status page can be integrated in your website so your customers can track their orders and find the latest status of a delivery as well as enjoy a branded experience.

It is supported in over 25 languages and can be configured to include promotional banners or purchased products and custom styles added to fit your brand. You can also fully track the page and include your own recommendation engine without additional effort.

## Setting Up an Order Status Page

A branded order status page can be set up in your online shop to give customers real-time delivery updates and a seamless tracking experience.

{% stepper %}
{% step %}

#### Add the order status page snippet

Setting up an order status page for your online shop is straightforward. Create an empty landing page on your website or online shop and copy and paste the JavaScript snippet below in the `<body/>` of your page.

{% hint style="warning" %}
You will need to insert your parcelLab account ID in the `plUserId` field when copying the tracking snippet below.
{% endhint %}

The tracking plugin is then used to retrieve and display order tracking information, including the checkpoints of a tracking on your order status page.

{% hint style="info" %}
The plugin uses well recognized third-party tools (for example: Web Accessibility Evaluation Tools (WAVE) and axe DevTools), which are based on the WCAG 2.1 Level AA standard to ensure accessibility standards are met.
{% endhint %}

<pre class="language-html" data-title="parcellab-track-and-trace-snippet.html"><code class="lang-html">&#x3C;div id="parcellab-track-and-trace">
&#x3C;img src="https://cdn.parcellab.com/img/loading-spinner-1.gif" alt="loading" />
&#x3C;/div>

&#x3C;script>
  function plTrackAndTraceStart() {
        window.parcelLabTrackAndTrace.initialize({
<strong>          plUserId: TYPE_YOUR_USER_ID_HERE,
</strong><strong>          lang: 'en', // default language if not specified for order
</strong>          show_searchForm: true,
          show_zipCodeInput: true,
          show_articleList: true,
          use_campaign_banners: true
        });
        var linkTag = document.createElement('link');
        linkTag.rel = 'stylesheet';
        linkTag.href = 'https://cdn.parcellab.com/css/v5/main.min.css';
        document.getElementsByTagName('head')[0].appendChild(linkTag);
  }
&#x3C;/script>
&#x3C;script async onload="plTrackAndTraceStart()"
src="https://cdn.parcellab.com/js/v5/main.min.js">&#x3C;/script>
</code></pre>

{% endstep %}

{% step %}

#### Test the implementation

Validate the order status page with a test URL to ensure the setup has gone smoothly.

You can test the implementation and display of the order status by using our sample parcels. Append the following queries to the URL of the page where you installed our plugin.

| Display            | Query                                          | Sample                                                                                                       |
| ------------------ | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| Calendar sheet     | `?courier=dhl-germany&trackingNo=00PL16120004` | [Link](https://delivery-status.com/v5.html?u=1612197\&courier=dhl-germany\&trackingNo=00PL16120004)          |
| Pickup map         | `?courier=dhl-germany&trackingNo=00PL16120006` | [Link](https://delivery-status.com/v5.html?u=1612197\&courier=dhl-germany\&trackingNo=00PL16120006)          |
| Icon               | `?courier=dhl-germany&trackingNo=00PL16120008` | [Link](https://delivery-status.com/v5.html?u=1612197\&courier=dhl-germany\&trackingNo=00PL16120008\&lang=en) |
| Consolidated order | `?plUserId=1612197&orderNo=00PL004`            | [Link](https://delivery-status.com/v5.html?u=1612197\&orderNo=00PL004\&lang=en)                              |
| {% endstep %}      |                                                |                                                                                                              |

{% step %}

#### Adjust design and page components

Once you've installed the order status page for your website, you can configure additional options to fit your brand, such as custom styling or translations.

Components on the order status page can also be configured to adapt to various use cases, including defining the language and displaying a list of purchased products or promotional banners.

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2F1kuGAzv7C35omIc40Ce1%2FOSPage.png?alt=media&amp;token=e5597081-eb42-49f2-974b-78a8b77fbbf8" alt="Order status page" width="563"><figcaption></figcaption></figure></div>
{% endstep %}
{% endstepper %}

## Use Your Own Domain

To use an address such as `https://order-status.brand.com`, host a page on that subdomain and install the Order Status Page snippet:

1. Create the page with your website or hosting provider. Configure its DNS records and HTTPS certificate with that provider.
2. Add the snippet with your parcelLab account ID.
3. Set the shop's branded tracking URL to the page URL, including the tracking query parameters used by your integration. Check any locale-specific URL overrides.
4. Open a tracking link for a test order and confirm that the page loads over HTTPS and displays the correct order.

Saving the default branded tracking URL in the shop configuration checks its URL/template format; locale-specific URL overrides are not checked. Neither verifies DNS ownership or provisions a website or certificate. If parcelLab will host the page for you, ask your parcelLab representative for the DNS target and verification steps for that setup.

### Email CNAME Targets

The `api.outbound.parcellab.email` and `cdn.outbound.parcellab.email` target families belong to optional email white-label settings:

| Record                                                                    | Purpose                                |
| ------------------------------------------------------------------------- | -------------------------------------- |
| `parcel-api.<email-domain>` → `<domain-key>.api.outbound.parcellab.email` | Branded email click and open tracking. |
| `parcel-cdn.<email-domain>` → `<domain-key>.cdn.outbound.parcellab.email` | Branded static assets.                 |

Use the exact records supplied for your email domain. These targets do not host an Order Status Page at `order-status.brand.com`. Email-domain DNS verification is a separate process; adding a domain record alone does not mean verification is complete. See the [White Label Policy](/docs/platform/security-compliance/white-label-policy.md) for email authentication.

## Learn More

View the following topics for further details on integrating an order status page:

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><i class="fa-box-circle-check">:box-circle-check:</i> <strong>Add an Order Status Page</strong></td><td>Discover the right setup to create a fully embedded Order Status page in your online shop.</td><td><a href="https://github.com/parcelLab/gitbook-documentation/tree/main/developers/status-updates/configuration/README.md">https://github.com/parcelLab/gitbook-documentation/tree/main/developers/status-updates/configuration/README.md</a></td></tr><tr><td><i class="fa-box-open-full">:box-open-full:</i> <strong>View Page Components</strong></td><td>Learn about the different components and details that are displayed on the Order Status page.</td><td><a href="/docs/engage/order-status-page/components.md">Order Status Page Components</a></td></tr></tbody></table>

## FAQs

To help you get started with setting up your order status page, see our FAQs below.

{% hint style="info" %}
If you have any further questions relating to setup of your order status page, please contact your parcelLab representative.
{% endhint %}

<details>

<summary>How do I add an order status page to my online store?</summary>

You can copy the JavaScript snippet below and paste it on an empty landing page (in the \<body /> *not* the \<head />) to integrate a shop frontend (or any webpage) with parcelLab. The tracking plugin is then used to retrieve and display order tracking information, including the checkpoints of a tracking on your Order Status page.

{% hint style="warning" %}
You will need to insert your parcelLab account ID in the `plUserId` field when copying the tracking snippet below.
{% endhint %}

For further information on configuring the Order Status page, see our [setup guide](https://github.com/parcelLab/gitbook-documentation/tree/main/developers/status-updates/configuration/README.md#tracking-website).

<pre class="language-html" data-title="parcellab-order-status-page-snippet.html" data-overflow="wrap"><code class="lang-html">&#x3C;div id="parcellab-track-and-trace">
&#x3C;img src="https://cdn.parcellab.com/img/loading-spinner-1.gif" alt="loading" />
&#x3C;/div>

&#x3C;script>
  function plTrackAndTraceStart() {
        window.parcelLabTrackAndTrace.initialize({
<strong>          plUserId: TYPE_YOUR_USER_ID_HERE
</strong><strong>          lang: 'en', // default language if not specified for order
</strong>          show_searchForm: true,
          show_zipCodeInput: true,
          show_articleList: true,
          use_campaign_banners: true
        });
        var linkTag = document.createElement('link');
        linkTag.rel = 'stylesheet';
        linkTag.href = 'https://cdn.parcellab.com/css/v5/main.min.css';
        document.getElementsByTagName('head')[0].appendChild(linkTag);
  }
&#x3C;/script>
&#x3C;script async onload="plTrackAndTraceStart()"
src="https://cdn.parcellab.com/js/v5/main.min.js">&#x3C;/script>
</code></pre>

</details>

<details>

<summary>Do I need to display a cookie banner to customers on our Order Status page?</summary>

No, this is because we do not collect data (we simply display it) or set cookies, therefore it is not necessary to trigger a cookie consent popup for our Order Status page plugin. However, you should ensure that parcelLab is listed as a subprocessor in your data processing agreement (DPA).

For further information on configuring the Order Status page, see our [setup guide](https://github.com/parcelLab/gitbook-documentation/tree/main/developers/status-updates/configuration/README.md).

</details>

<details>

<summary>Can I display a different experience on the Order Status page depending on the status?</summary>

Yes, you can change the display of the Order Status page by status but it needs to be customized using the onRendered function.

For example: For one parcel on the Order Status page you can update the content based on the status:

* “Shipped” - display blog content
* “In Transit” - display a signup to the loyalty scheme
* “Delivered” - display a promotional code for the next order

You can also change the display per item/tracking in a split order as the onRendered function will re-render the screen each time.

**Tip:** We can also build simple scenarios with the link behind the tracking button of our emails (for example: to show a first banner on “Dispatch Confirmation” and a second one when the Order Status page is reached via the “Delivered” email).

For further information on using the onRendered function on the Order Status page, see our [setup guide](https://github.com/parcelLab/gitbook-documentation/tree/main/developers/status-updates/configuration/README.md#additional-options).

</details>

<details>

<summary>Is the Order Status page certified against accessibility standards?</summary>

Yes, the Order Status page plugin uses third-party tools, such as Web Accessibility Evaluation Tools (WAVE), to ensure accessibility standards in-line with the WCAG 2.1 Level AA standard are met.

For further information on configuring the Order Status page, see our [setup guide](https://github.com/parcelLab/gitbook-documentation/tree/main/developers/status-updates/configuration/README.md).

</details>

<details>

<summary>How long is the data available on the Order Status page after an order has been delivered?</summary>

Customer-related information of orders and trackings is available for 90 days after delivery on the Order Status page as per our data retention policy.

For further information on how parcelLab stores data, see our [data retention policy](/docs/platform/security-compliance/data-retention-policy.md).

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.parcellab.com/docs/engage/order-status-page.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.