# Order Status Page

## 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&#x26;token=e5597081-eb42-49f2-974b-78a8b77fbbf8" alt="Order status page" width="563"><figcaption></figcaption></figure></div>
{% endstep %}
{% endstepper %}

## 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://app.gitbook.com/s/m5MUhYrMmT0cei4QdxGn/status-updates/configuration">Order Status Page Configuration</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="order-status-page/components">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://app.gitbook.com/s/m5MUhYrMmT0cei4QdxGn/status-updates/configuration#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://app.gitbook.com/s/m5MUhYrMmT0cei4QdxGn/status-updates/configuration).

</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.&#x20;

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.&#x20;

**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).&#x20;

For further information on using the onRendered function on the Order Status page, see our [setup guide](https://app.gitbook.com/s/m5MUhYrMmT0cei4QdxGn/status-updates/configuration#additional-options).&#x20;

</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://app.gitbook.com/s/m5MUhYrMmT0cei4QdxGn/status-updates/configuration).

</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.&#x20;

For further information on how parcelLab stores data, see our [data retention policy](https://docs.parcellab.com/docs/platform/security-compliance/data-retention-policy).&#x20;

</details>