# Order Status Page Components

## Tracking Information Components

The tracking information components that can be included on the <code class="expression">space.vars.Product\_OrderStatus</code> are described in the following sections.

### Header

The header is displayed at the top of the <code class="expression">space.vars.Product\_OrderStatus</code> and shows the order number and the number of deliveries grouped by their last status for each order when there is more than one delivery.

{% hint style="info" %}
The header is displayed when the tracking plugin is used with orders. It is not rendered for those queries with parcels.
{% endhint %}

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FHAjvNOaOfnhljXC61T9H%2FHeader.png?alt=media&#x26;token=2dd663d5-55e6-446e-a1b6-a17db56ff64b" alt="Header showing the order number and the parcels in the order with their status" width="318"><figcaption></figcaption></figure></div>

### Checkpoints

The order status of the delivery (with the latest status shown first) is displayed on the <code class="expression">space.vars.Product\_OrderStatus</code> to show at which stage the order is in the delivery process.

For international deliveries, the order status of parcels with the last mile carrier is displayed in the list of checkpoints, as well as the handover event between the original carrier and the last mile carrier if this information is available.

{% hint style="info" %}
If there are more than three checkpoints, a Show More button is available to display the remaining order status checkpoints.
{% endhint %}

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FoZgpOHp3rw6uyemWTUgp%2FCheckpoint.png?alt=media&#x26;token=ed41d4c8-6cab-4e67-a9df-713f8fb706d3" alt="A list of three order status updates, starting with the most recent from top to bottom: out for delivery, delivery date set, released from customs. These are followed by a &#x27;Show More&#x27; button that can be clicked to display previous order status checkpoints." width="375"><figcaption></figcaption></figure></div>

The data on the <code class="expression">space.vars.Product\_OrderStatus</code> is automatically refreshed to provide the latest delivery updates, with an alert displayed if new checkpoint information is available.

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FNQFjtAmO7IOJWkuKBqzV%2FCheckpointsNewUpdates.png?alt=media&#x26;token=5fee0373-7cf9-45f8-ad09-51cb2df07039" alt="New checkpoint alert" width="375"><figcaption></figcaption></figure></div>

### Live Tracking Link

A live tracking link can be displayed on the left-hand side of the <code class="expression">space.vars.Product\_OrderStatus</code> and shows a tracking map of the delivery and the number of the order on the delivery schedule.

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FRUCRcL5f3iKQr8bFGy3K%2Fimage.png?alt=media&#x26;token=44188932-4c46-4eb8-a909-04ebdad2e5e6" alt="Map with live delivery status that reads: &#x22;The driver&#x27;s on his way to you. You are the next stopover.&#x22;" width="306"><figcaption></figcaption></figure></div>

### Prediction

The estimated date and time of the delivery can be displayed on the <code class="expression">space.vars.Product\_OrderStatus</code> to inform customers when their order is likely to be delivered.

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FACxpGrIxc0Xt9u9YixDH%2FEstimatedDeliveryDate.png?alt=media&#x26;token=94a18450-2bb2-4f98-b0b7-41a2791c0923" alt="Estimated date and time of the delivery" width="375"><figcaption></figcaption></figure></div>

### Trending Late

The estimated probability of delay can be displayed on the <code class="expression">space.vars.Product\_OrderStatus</code> to inform customers about the likelihood of a delayed delivery for their order.

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FCQkIMFNnEdZoWaTIUqki%2FTLOSPComponent_Warning.png?alt=media&#x26;token=4ad9bb03-8829-414c-a176-06a25a5bf24d" alt="Trending late status" width="375"><figcaption></figcaption></figure></div>

<details>

<summary>Trending Late Statuses</summary>

The trending late status displayed on the left-hand side of the <code class="expression">space.vars.Product\_OrderStatus</code> is based on different tracking events. The possible statuses are described below.

* The tracking is predicted to be on time\
  ![Trending late status predicting timely delivery](https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FZcgaFdVcIRMKqas1MIOx%2FTLOSPComponent_OnTime.png?alt=media\&token=9df6c4e6-64fc-4107-b829-2ef0c9c90aec)
* The tracking might be delayed\
  ![Trending late status predicting a probability for delay](https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FCQkIMFNnEdZoWaTIUqki%2FTLOSPComponent_Warning.png?alt=media\&token=4ad9bb03-8829-414c-a176-06a25a5bf24d)
* The tracking is predicted to be delayed\
  ![Trending late status predicting a high probability for delay](https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FJL2FcCPxJOwAgweJ1nff%2FTLOSPComponent_Delayed.png?alt=media\&token=c5af3e71-0c62-4db7-b2f5-5caa95e0d08c)

</details>

### Next Action

The next action that is required for the delivery (for example: the delivery date has been set) can be displayed on the <code class="expression">space.vars.Product\_OrderStatus</code>.

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FbTRd3WrjKZtQdbaPy452%2FNextActionStatusDeliveryDateSet.png?alt=media&#x26;token=5bee78ab-1876-48ac-871d-b2ffd1645c41" alt="A truck icon with text below it that specifies the set delivery date." width="375"><figcaption></figcaption></figure></div>

<details>

<summary>Next Action Status Examples</summary>

The next action status and associated information displayed on the left-hand side of the <code class="expression">space.vars.Product\_OrderStatus</code> is based on different tracking events. Some examples of these are described in the following sections.

**Scheduled**

The following information is displayed on the <code class="expression">space.vars.Product\_OrderStatus</code> when an item is scheduled for delivery:

* Calendar with estimated delivery date
* Predicted delivery timeframe
* Prediction caption
* Delivery address

<img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FsEBExnW0FcN28TdibPzU%2FNextActionStatusScheduled.png?alt=media&#x26;token=70da91d4-d69d-4247-bb0d-b998619b4fa1" alt="Scheduled status with calendar showing the estimated delivery date, predicted timeframe, prediction caption and delivery address" data-size="original">

**Out for Delivery**

The following information is displayed on the <code class="expression">space.vars.Product\_OrderStatus</code> when an item is out for delivery:

* Out for delivery status
* Delivery address

![Out for delivery status with delivery address](https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FlWMIXgp18ngS7Rziloiw%2FNextActionStatusOutForDelivery.png?alt=media\&token=64edc3f1-f797-4e65-859d-5f14851f9b0f)

**Failed Attempt**

The failed delivery attempt status is displayed on the <code class="expression">space.vars.Product\_OrderStatus</code> when a failed attempt to deliver the item was made.

![Failed delivery attempt status](https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2Fv3HMxAY0nmkDnEz9xZ98%2FNextActionStatusFailedDeliveryAttempt.png?alt=media\&token=eafb1aa3-b292-45f3-abfc-6772fd1337e5)

**Delay**

The following information is displayed on the <code class="expression">space.vars.Product\_OrderStatus</code> when an item is delayed:

* Delayed status
* Delivery address

**Note:** This information is also displayed when an item is delayed due to it being damaged or delayed because the specified address could not be found.

![Delayed delivery status with delivery address](https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FwFUB2AYzoMUtU90IVtOB%2FNextActionStatusDelayed.png?alt=media\&token=7f2f42c3-04ee-47ca-ba1e-9d337a1635dc)

**Delivered**

The following information is displayed on the <code class="expression">space.vars.Product\_OrderStatus</code> when an item is ready for collection:

* Delivered status
* Courier performance voting question
* Communication voting question

![Delivered status with courier performance voting question and communication voting question](https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2Fn90GSpb2upCbJT61oHx7%2FNextActionStatusDelivered.png?alt=media\&token=726f81c0-a295-4588-adef-0a5342c5d768)

**Ready for Collection**

The following information is displayed on the <code class="expression">space.vars.Product\_OrderStatus</code> when an item is ready for collection:

* Google Maps showing pickup point
* Pickup location address details with link to map
* Pickup location opening hours

![Ready for collection status with Google Maps showing pickup point, pickup location address details with link to map and pickup location opening hours](https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FH3lYRqnm5bMI0XBwm0HU%2FNextActionStatusReadyForCollection.png?alt=media\&token=b5641490-a947-450a-9065-4cfe07e9ab00)

</details>

### Return Status

The return status of the package is displayed for returns on the <code class="expression">space.vars.Product\_OrderStatus</code>.

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FYOQkRvXVzn1cq4n1C8zG%2FReturned.png?alt=media&#x26;token=8df8d507-177a-4438-951d-708e28b68f37" alt="A truck icon with an arrow representing returns and text below it stating that the parcel will be returned to sender." width="375"><figcaption></figcaption></figure></div>

This component includes the following return types:

* `returned`
* `returned-AddressIssue`
* `returned-CustomerRefusal`
* `returned-DeliveryPayment`
* `returned-NotCollected`

### Return Tracking

The following information is displayed on the <code class="expression">space.vars.Product\_OrderStatus</code> when a return is submitted for a package in an order:

* Link to a return status page to allow customers to track return shipments of an order
* Link to download a return label if the customer provides their zip code
* Link for customers to register additional returns if you use the <code class="expression">space.vars.Product\_ReturnsPortal</code>

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FXzgVzZm60peKtMIqVZ0w%2FReturnTrackingRPLinkBorder.png?alt=media&#x26;token=57496224-5175-47a1-b59e-889a65f16b3b" alt="" width="347"><figcaption></figcaption></figure></div>

### Reroute Link

A link to the order rerouting page on the courier’s website can be displayed on the <code class="expression">space.vars.Product\_OrderStatus</code> to allow customers to reschedule their delivery (if available).

This is displayed as a small label with a link and short description on the left-hand side of the page under the address box by default.

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FIfCpw8Me29vbbG1To8S3%2FRerouteLinkSmall.png?alt=media&#x26;token=4c238cdf-2ed6-4344-ba34-7ac1e455a883" alt="Calendar icon with text below that reads &#x22;Rearrange delivery. If Available.&#x22;" width="375"><figcaption></figcaption></figure></div>

A large label with a link can be configured if required that displays on the right-hand side of the page under the checkpoints list.

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FLFDHVHv4CTdHrMcPDOzb%2FRereouteLinkLarge.png?alt=media&#x26;token=f254760b-a145-4e08-9eb4-ab56d21aa625" alt="Calendar icon with text below that reads &#x22;You are not at home? Select your delivery day and location.&#x22;"><figcaption></figcaption></figure></div>

### Further Information

A link to the order details/tracking page on the carrier’s website can be displayed on the <code class="expression">space.vars.Product\_OrderStatus</code>.

This link will update to the last mile carrier’s tracking page from the original carrier when this is available for cross-border deliveries.

{% hint style="info" %}
The carrier website of the original carrier and last mile carrier can also be accessed from the tracking details in the <code class="expression">space.vars.Product\_App</code>. For further information, see [how to find and access data for tracked parcels](https://docs.parcellab.com/docs/customer-service#trackings-how-to-find-a-tracking).
{% endhint %}

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FzskdgmNFbUEDXjoCrNf3%2FFurtherInfoLink.png?alt=media&#x26;token=3e2286a0-988c-47dc-959a-0954f6078e1a" alt="Button to the carrier&#x27;s tracking page. Text reads: Find further information about this order at FedEx." width="375"><figcaption></figcaption></figure></div>

### Marketplace Support

The status of the tracking for orders received from a marketplace vendor or dropshipment is displayed on the <code class="expression">space.vars.Product\_OrderStatus</code>. The status shows the name of the marketplace store handling the tracking and the checkpoint details displays the tracking number and carrier information (including a link to the carrier tracking page) as well if this data is available.

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2F8OrTFDz7wR6dpoeZBxxX%2FMarketplaceSupportDetails.png?alt=media&#x26;token=9304a89f-9030-44a5-928d-325edade9e4c" alt="Marketplace tracking with tracking number and carrier details available" width="563"><figcaption></figcaption></figure></div>

If the tracking number and carrier information are not available, a standard message is displayed in the checkpoint details instead to confirm it is a marketplace tracking and status updates can be received from the carrier if available.

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FgHxj0RmXYdnKkPchnbto%2FMarketplaceSupportNoDetails.png?alt=media&#x26;token=b673fe5d-99ce-4fc4-8c2e-e8e42307967f" alt="Marketplace tracking with carrier status message" width="563"><figcaption></figcaption></figure></div>

## Delivery Information Components

The delivery information components that can be included on the <code class="expression">space.vars.Product\_OrderStatus</code> are described in the following sections.

### Delivery Address

The customer’s delivery address, depending on the delivery status (that is: it may not be displayed if a rearrange delivery link is required) can be displayed on the <code class="expression">space.vars.Product\_OrderStatus</code>.

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FXUIJA0SuKeA6NqVc1FGN%2FDeliveryAddress.png?alt=media&#x26;token=f41abef5-b2ca-424c-8160-5f10a625559c" alt="Customer delivery address details" width="375"><figcaption></figcaption></figure></div>

{% hint style="info" %}
A zip code input box can also display here instead of the delivery address so the customer can enter and find the delivery address details.
{% endhint %}

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FMpBlnnHkiJVrtBfmwp9X%2FZipCode.png?alt=media&#x26;token=eb088f2e-8f91-4eb0-8f8e-95370f2006c5" alt="Zip code input box" width="375"><figcaption></figcaption></figure></div>

### Pickup Location and Map

The location of the pickup point on Google Maps and corresponding address (shown below the map) can be displayed on the <code class="expression">space.vars.Product\_OrderStatus</code>.

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FfCLRmGVGglaG7OrlsWt9%2FPickUpLocationMap.png?alt=media&#x26;token=9cef25a4-ae67-46d5-b797-1fe9c8288bf9" alt="Pickup location and map" width="324"><figcaption></figcaption></figure></div>

### Opening Hours

The opening hours of the pickup location, including the time remaining that the location will be open can be displayed on the <code class="expression">space.vars.Product\_OrderStatus</code>.

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2F2EqxKtfwUPccAIlWY1ZM%2FOpeningHours.png?alt=media&#x26;token=a3222453-3ee7-4d8c-a0f6-2624abe10e38" alt="Opening hours of the pickup location, including the time remaining that the location will be open" width="318"><figcaption></figcaption></figure></div>

### Voting Questions

Voting questions for customers to provide feedback regarding the carrier and received communication when the package has been delivered can be displayed on the <code class="expression">space.vars.Product\_OrderStatus</code>.

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FybI62e0JqpP66fSoS7Jh%2FVote.png?alt=media&#x26;token=9ac1ea44-bb54-48e5-b06f-8e0cd7d177f4" alt="Sample voting questions with clickable thumbs up and thumbs down buttons." width="375"><figcaption></figcaption></figure></div>

## General Components

The general components that can be included on the <code class="expression">space.vars.Product\_OrderStatus</code> are described in the following section.

### Alert

An alert in a red text box is displayed on the <code class="expression">space.vars.Product\_OrderStatus</code> for the following error types:

* Search error — when the order information (that is: order number or postal code) entered in the search form is incorrect.

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FsnJEqpyheHozK78HOcQm%2FAlertSearchError.png?alt=media&#x26;token=26166271-352d-4d4e-ba40-fdfc6beeaacc" alt="Error notification: Unfortunately, no information was found for this delivery."><figcaption></figcaption></figure></div>

* Delivery error — when no tracking information could be found for the order number.

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FwJ31Jcb73QC8PO7LuDg0%2FAlertDeliveryError.png?alt=media&#x26;token=e47e22db-09b2-4e64-865d-376939db5c28" alt="Error notification: We have not yet received tracking data for your order"><figcaption></figcaption></figure></div>

* Zip code attempts error - when three incorrect zip code attempts are made in a 30-minute period.

<figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FxG0NWAxjZF4UFjHR0w9e%2FAlertAttemptsError.png?alt=media&#x26;token=1e6fab49-f021-4944-b562-83a57d3041ff" alt="Error notification: Too many incorrect attempts. Please try again in 30 minutes."><figcaption></figcaption></figure>

### Article Lists

An article list showing the list of products in a package can be displayed on the right-hand side of the <code class="expression">space.vars.Product\_OrderStatus</code> to keep customers informed about the purchased items in their order.

{% hint style="info" %}
If there are more than four items in the article list, a Show More button is available to display the remaining items.
{% endhint %}

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FGnaJt0zVNtQRa8oxyWdE%2FArticleList.png?alt=media&#x26;token=310df025-84df-4e5b-aaef-bf2b4491527f" alt="List of purchased items in a parcel, including product images, names and quantity." width="375"><figcaption></figcaption></figure></div>

### Banners

A configured banner (for example: link to a store discount sale) can be displayed on the right-hand side of the <code class="expression">space.vars.Product\_OrderStatus</code>.

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FvgKXlocDuHjhjmYGRzXA%2FBanner.png?alt=media&#x26;token=f3cd3e16-0be2-4045-ae5e-7390023e905f" alt="Sample promotional banner" width="375"><figcaption></figcaption></figure></div>

Instagram banners can also display here if you request this feature.

{% hint style="info" %}
For more information on the scope and requirements of this feature, please contact your parcelLab representative.
{% endhint %}

![Instagram banner](https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FxH54n7f9K2GVbRCNkMrc%2Fimage.png?alt=media\&token=ffb76a00-cb65-4e04-8bd9-7f61790b0ef2)

### Show More

A Show More button is displayed beneath the checkpoints and article list on the <code class="expression">space.vars.Product\_OrderStatus</code> if there are more than three checkpoints or four article list items respectively. Clicking the button displays the remaining checkpoints/items.

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FJUC8Ho4zxAyuUQgHSPHj%2FShowMoreButton.png?alt=media&#x26;token=923d1ed3-4cc1-41ae-9f3a-92042dba31f6" alt="Show more option displayed beneath the checkpoints and article list" width="375"><figcaption></figcaption></figure></div>

### Tabs

A tab is displayed on the <code class="expression">space.vars.Product\_OrderStatus</code> for each delivery if there is more than one delivery in an order. Each tab displays an icon related to the last status of the delivery, the delivery number, and the carrier status.

{% hint style="info" %}
The tabs are displayed when the tracking plugin is used with orders.
{% endhint %}

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FzouR8CcwgdyCZqqSKcBa%2FTabs.png?alt=media&#x26;token=e474a78b-2ec0-46e4-be6d-b385b6528944" alt="Tabs for each delivery in an order"><figcaption></figcaption></figure></div>

### Delivery Status Icons

An icon can be displayed in several places on the <code class="expression">space.vars.Product\_OrderStatus</code> to add a visual description to the delivery status.

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FPK059OZU3MNiBhQ7iRCC%2Fimage.png?alt=media&#x26;token=ebb88a86-7ace-4818-bc0a-b28ed1891e9c" alt="Delivery status icon" width="102"><figcaption></figcaption></figure></div>

{% hint style="info" %}
The icon state can also display three icons above the checkpoint component to indicate the delivery status.
{% endhint %}

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FryDILH5QeyPdtPvmeahf%2FIconsState.png?alt=media&#x26;token=c4b3f561-9059-4fe6-9de1-2a0c21e815a7" alt="Row of three delivery status icons. A circled tick icon on the right side representing the &#x27;Delivered&#x27; status is highlighted." width="563"><figcaption></figcaption></figure></div>

{% hint style="success" %}
Go to <https://icon.parcellab.com/> where the icons supported by parcelLab are hosted. This service allows you to insert icons dynamically with different colors, sizes, and formats by selecting an icon and using the `id` to call the icon service.
{% endhint %}

### Note

A note information box can be displayed at the top of the <code class="expression">space.vars.Product\_OrderStatus</code> to provide a customer notice.

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FAyd2QcuDlx4pyllJXbR8%2FNote.png?alt=media&#x26;token=97b5b1c0-66e5-4cfd-933b-e9eb112b7570" alt="Note reads: Please be aware you may experience additional delays in shipping lead times due to postal strikes."><figcaption></figcaption></figure></div>

### Order Search Form

A search form can be used on the <code class="expression">space.vars.Product\_OrderStatus</code> if the tracking was not found, or no tracking number/order number was given. By default, the search form requires an order number and email address for authentication.

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FWPwmVfTPQwnP99uej1ZU%2FSearchFormEmail.png?alt=media&#x26;token=a0798f35-a570-4871-bf3c-92b8909cc33f" alt="Order search form with order number and email address input fields" width="563"><figcaption></figcaption></figure></div>

You can also configure the search form to allow authentication via either email address or zip code by setting `search_authMode` to `email_or_zip`. This is useful for retailers whose customers may not have email addresses associated with every order.

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FxeUmb9NyziQbO0bDTCub%2FSearchFormEmailZipCode.png?alt=media&#x26;token=24f9a4f5-2b3d-409a-8062-2715eb879993" alt="Order search form with order number, email address and zip code input fields" width="563"><figcaption></figcaption></figure></div>

{% hint style="info" %}
For details on configuring search form authentication modes, see our [Order Status page setup documentation](https://app.gitbook.com/s/m5MUhYrMmT0cei4QdxGn/status-updates/configuration).
{% endhint %}

### SMS Opt-In Field

A field for opting in to receive delivery updates via SMS can be displayed on the <code class="expression">space.vars.Product\_OrderStatus</code>.

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FfazqKqXsyNSqivJSFnFh%2FSMSOptInComponent.png?alt=media&#x26;token=9be41cf9-223a-4160-a9f5-2dca3432263a" alt="SMS opt-in field to select a country and enter a phone number to opt in to receive SMS delivery updates" width="375"><figcaption></figcaption></figure></div>

If a customer has already opted in to receive SMS notifications, a note will display confirming that they have already opted in.

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FdXjoJ2cKbAX6aozXEkDw%2FSMS%20Opted%20In%20Parkers.png?alt=media&#x26;token=f20b485c-4542-402b-80e2-68c880dd1617" alt="SMS opted-in message" width="375"><figcaption></figcaption></figure></div>

### Loading Icon

A loading icon is displayed on the full screen to indicate when the information is waiting to load on the <code class="expression">space.vars.Product\_OrderStatus</code> (that is: when there is an active API request waiting to be resolved for a few seconds).

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2Fq5l8PXvhSR36OKi7Hkhp%2Fimage.png?alt=media&#x26;token=c8d41c71-0c75-47f1-94df-0b0c6d2b0ae0" alt="Loading icon" width="84"><figcaption></figcaption></figure></div>

## Map Components

The map components that can be included on the <code class="expression">space.vars.Product\_OrderStatus</code> are described in the following section.

### Live Tracking Map

A live tracking map displays the latest location of the truck and the delivery address in a Google Maps image on the <code class="expression">space.vars.Product\_OrderStatus</code>.

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2Fbu0Yf5ATEeRvAUaf0PLb%2Fimage.png?alt=media&#x26;token=094c38e0-acbc-4e88-a4e5-405591073cde" alt="Live tracking map displaying the latest location of the truck and the delivery address in a Google Maps image" width="257"><figcaption></figcaption></figure></div>

{% hint style="info" %}
If there is no truck position data, the delivery destination only is shown on the map.
{% endhint %}

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FhoNLRJQ27Rckz9TxsXId%2Fimage.png?alt=media&#x26;token=7774301b-f441-46e9-8395-7689fe1ab98d" alt="Delivery destination only is shown on the map" width="264"><figcaption></figcaption></figure></div>

### Map Footer

A map footer displays the approximate delivery time and how many stops the truck has before arriving at the destination.

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FLPEtpwhNs153xWUNLDeX%2Fimage.png?alt=media&#x26;token=4b42161c-c328-48e8-ab85-ff4afa961c30" alt="Map footer displaying the approximate delivery time and how many stops the truck has before arriving at the destination" width="249"><figcaption></figcaption></figure></div>

{% hint style="info" %}
If there is no truck position data, a short information message is displayed.
{% endhint %}

<div align="left"><figure><img src="https://1156682959-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LPf1Lv1YUuLYva6LrXQ%2Fuploads%2FQE7Wsk4zD90KQc2vdH3Y%2Fimage.png?alt=media&#x26;token=a05d4d6c-3ede-4456-92fc-9b80473ad889" alt="Information message that reads &#x22;The driver&#x27;s on his way to you&#x22;" width="253"><figcaption></figcaption></figure></div>


---

# Agent Instructions: Querying This Documentation

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

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

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

The question should be specific, self-contained, and written in natural language.
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.
