Order Status Page Configuration
Configure a fully embedded Order Status page in your shop with all the relevant delivery status information and customizable content to promote your brand.
Quick Install
To insert the JavaScript snippet onto a page on your website or online shop:
Create an empty landing page (for example: at /track-and-trace).
Copy the following snippet and paste it somewhere in the <body /> (not the <head />) of your page where you want the order status to be displayed.
You will need to insert your parcelLab account ID in the plUserId field when copying the tracking snippet below.
This will automatically load our JavaScript snippet and default CSS. The plugin will be rendered in the defined DOM node.
<div id="parcellab-track-and-trace">
<img src="https://cdn.parcellab.com/img/loading-spinner-1.gif" alt="loading" />
</div>
<script>
function plTrackAndTraceStart() {
window.parcelLabTrackAndTrace.initialize({
plUserId: TYPE_YOUR_USER_ID_HERE,
lang: 'en', // default language if not specified for order
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);
}
</script>
<script async onload="plTrackAndTraceStart()"
src="https://cdn.parcellab.com/js/v5/main.min.js"></script>Additional Options
You can configure the plugin adding the options to the snippet above. The following code example includes all possible additions.
const options = {
/* onRendered, // optional function to be invoked once the plugin has rendered */
/* containerId, // optional ID string of the div element you want to use as root
container for rendering the plugin. Defaults to "parcellab-track-and-trace". */
/* customTranslations, // optional valid custom translation object */
/* all other options that are possible in the url can be passed here as well */
}
// these options should be passed to the plugin like this:
window.parcelLabTrackAndTrace.initialize(options);
onRendered Hook
You can use the onRendered option to alter the DOM programmatically after the plugin has rendered its content. This will overwrite any CSS styling that has been applied to the targeted elements.
function cb(pluginState) {
var checkpointsContainer = document.querySelector(".pl-checkpoints");
// It is important to always check that the element is already painted before attempting to modify it.
if (checkpointsContainer) {
checkpointsContainer.style.backgroundColor = "blue";
}
}
...
window.parcelLabTrackAndTrace.initialize( { onRendered: cb })Your onRendered function may also expect to receive an object with data about the Order Status page, such as:
Article list information (if available)
Checkpoints information
Which parcel is displayed as the active tracking (for multi-parcel orders)
Function to select the active tracking to be displayed, that can be called programmatically
Options applied to customize and configure the plugin during its initialization
Custom Translations
You can change the static plugin text parts with your own translations by adding the customTranslations attribute to your options, and then inserting your custom text. If you do not define a language in your customTranslations, the plugin will revert to the original text when rendering in this language.
Alternative: Hosted Version
The tracking website can be reached at either versand-status.de, paket-fuer-mich.de or delivery-status.com. The URL scheme is identical to the API endpoint as seen in the following example.
Using the Tracking Plugin
After the page has been prepared as described in the previous section, it is ready for use. The plugin supports tracking for single parcels, and consolidated tracking for whole orders.
Usage with Parcels
The plugin expects two parameters to be set in the URL: the courier and trackingNo. If these are set and valid, it will render an action box on the left-hand side of the page displaying the currently most relevant information and a complete history on the right-hand side of the page.
https://myshop.com/tracking-and-trace?courier=dhl-germany&trackingNo=00PL16120004
A list of possible carrier codes can be found in our documentation, although is not required as the URL to this page will be automatically generated by parcelLab.
Carrier InterfacesFor optimal data quality, parcelLab interfaces with the specific APIs at each carrier.Usage with Orders
The more advanced use of the plugin is for orders. This will render all parcels of an order, generate an overview, and list all individual parcels.
https://myshop.com/tracking-and-trace?plUserId=1612197&orderNo=00PL004
We recommend setting the plUserId directly in the options rather than through the URL (see below on how to do that).
plUserId
Your user ID in the parcelLab system.
1612197
client
The parcelLab-internal shop ID associated with a specific shop.
parcelfashion-US
Testing
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.
Typical Use Cases
You can define options by passing an object as the second argument when creating a new parcelLab object. The use cases below list some of the possible options.
<script>
function plTrackAndTraceStart() {
window.parcelLabTrackAndTrace.initialize({
rerouteButton: 'left',
containerId: 'pl-trace' // <~ delivery status will be displayed to DOM elem. with the id="pl-trace"
});
...
}
</script>
...All options below can also be set through the URL.
.../track-and-trace?...&rerouteButton=leftDefine the Language
The tracking plugin uses the browser/system language by default.
You can change the default language to display on the Order Status page using the lang option in one of the following ways:
In the URL query parameters via
&lang=enIn the JavaScript object when loading via
lang: 'en'
Delivery Options
Delivery or reroute options give the recipient the choice to change how, where, and when they want to receive their parcel. This information can be provided via a link to the carrier's website by including the rerouteButton option. This link is displayed on the left-hand side of the Order Status page by default whenever delivery options are available.
You can change the default position of the reroute link to display on the right-hand side of the Order Status page using the rerouteButton option in one of the following ways:
In the URL query parameters via
&rerouteButton=rightIn the JavaScript object when loading via
rerouteButton: 'right'
Carrier Information
The Order Status page can display tracking information for inter-country deliveries based on the origin carrier or the destination carrier. By default, the Order Status page displays the name of the destination carrier and the delivery status updates from the destination carrier.
However, before the parcel is handed over, you can choose to display information from the origin carrier. This can provide your customers with further information about the parcel in transit before it has arrived in the destination country.
You can display the origin carrier on the Order Status page using the use_origin_courier option in one of the following ways:
In the URL query parameters via
&use_origin_courier=trueIn the JavaScript object when loading via
use_origin_courier: true
Order Search Form
A search form can be used on the Order Status page if the tracking was not found, or no tracking number/order number was given.
The show_searchForm and show_zipCodeInput options can be set directly in the options when initializing the plugin to keep the URL clean.
<script>
function plTrackAndTraceStart() {
window.parcelLabTrackAndTrace.initialize({
plUserId: 1612197,
show_searchForm: true,
show_zipCodeInput: true
});
...
}
</script>
...Authentication for Displaying Personal Information
You can prompt customers for authentication to display personally identifiable information on the Order Status page (that is: their name and delivery address). This can be done by using the forceZip option to display a form that prompts customers for authentication using their zip code before personal information is displayed.
You can enable zip code authentication using the forceZip option in one of the following ways:
In the URL query parameters via
&forceZip=trueIn the JavaScript object when loading via
forceZip: true
If the URL for an order already contains a security hash that is generated by our system (for example: &s=1234567) or you have included an order search form on the Order Status page requiring zip code input, no further authentication will be prompted.
Campaign Banners
You can use the Campaign Manager module in the App to add and update campaigns that display banners on your Order Status page for a set period of time. This is especially useful for event-based marketing (for example: Black Friday and seasonal offers), feedback surveys, and information notices.
You can include campaign banners on the right-hand side of the Order Status page. You can also choose to add four other campaign banners at the top or bottom left/right-hand side of the page.
In order to activate a campaign, you need to do the following:
Create a new campaign in the Campaign Manager module in the App and publish it to the Order Status page.
Configured campaign banners will display on the Order Status page by default (that is: are active via use_campaign_banners: true in the JavaScript object).
You can deactivate campaign banners on the Order Status page using the use_campaign_banners option in one of the following ways:
In the URL query parameters via
&use_campaign_banners=falseIn the JavaScript object via
use_campaign_banners: false
Article Lists
You can include a list of the purchased products in a package on the right-hand side of the Order Status page.
The display of an article list requires the following:
The
show_articleListparameter needs to be added to the URL queryA security hash or zip code in the URL query to retrieve the data
Styling
You can change the styles to suit your brand's needs by setting the customStyles.
The styles that can be set are described in the following table.
borderColor
The border color for the boxes.
#eee
borderRadius
The border radius for the boxes and buttons.
4px
buttonColor
The text color for buttons.
#333
buttonBackground
The background color for buttons.
#e6e6e6
iconColor
The color for the status icons.
#000
icon_theme
Enables holiday-themed status icons.
xmas or easter
liveMapBackground
The background color of the live tracking map footer.
0051BA
liveMapColor
The text color in the live tracking map footer.
ffffff
tabIconColor
The color of tab icons for multi parcel deliveries.
000
tabActiveIconColor
The color of the active tab icon for multi parcel deliveries.
000
When setting customStyles via the URL query, the following validation applies:
Any
#must be removed from hex color codesAll content must be URI encoded (for example:
www.versand-status.de/?trackingNo=...&borderRadius=0px&buttonColor=FFF)
When setting custom styles in the JavaScript object, hex color codes can be used with or without #, as in the following examples:
window.parcelLabTrackAndTrace.initialize({ buttonBackground: '000' });
window.parcelLabTrackAndTrace.initialize({ buttonBackground: '#000' });
If you want to use the plugin in a non-customer facing website (for example: an internal page for customer support), it is recommended to hide the action box.
<style> div#pl-action-box-container { display: none; } </style>Disable Voting Component
The voting component on the Order Status page is enabled by default. You can choose to disable a part of or the whole component using options that can be set in the URL or in the JavaScript object. These objects are described in the following table.
disableVoting
If set to true, disables the thumbs up/down voting feature on the Order Status page.
pwrdBy_parcelLab
If set to false, disables the parcelLab branding that is displayed in the thumbs up/down voting feature on the Order Status page.
Information Display
You can display additional information on your Order Status page using options that can be set in the URL or in the JavaScript object. These objects are described in the following table.
openinghrs_warn
Displays additional information for orders with the "ready for pickup" delivery status.
URI encoded text
show_note
Displays a message at the top of the Order Status page.
URI encoded text
splitOrderWarning
Displays a warning for split order shipment.
URI encoded text
The openinghrs_warn option is available for orders with the "ready for pickup" delivery status. You can use this option to inform your customers about store or pickup location opening hours or any changes to operating hours.
You can use the show_note option to display a message at the top of the Order Status page. The note includes a close button that can be used to hide the displayed message.
The splitOrderWarning option must be used in conjunction with the option showArticleList=true. This can be used to warn customers that an order may consist of multiple deliveries. You can set your own message or display the default message by setting the value of the splitOrderWarning option as true.
SMS Opt-In
You can display an SMS opt-in field for customers to enter a phone number to receive delivery updates via SMS. You can activate the SMS opt-in component by adding the &smsOptin=true query to the URL or the snippet configuration.
The country is pre-set in the number input field based on the destination country of the delivery. If this information is unavailable, the country selector displays the first option in the list of countries.
In order for this feature to work, you also have to use the parcelLab SMS feature. For further information on integrating with parcelLab to send order status updates via SMS, see our parcelLab SMS documentation.
parcelLab SMSUse the parcelLab SMS feature to proactively update your customers on their order status via text messages.Trending Late Status
You can display a trending late status on your Order Status page to increase transparency around potential delivery delays to customers.
You can activate the display of trending late statuses on the Order Status page using the show_trendingLate option in one of the following ways:
In the URL query parameters via
show_trendingLate=trueIn the JavaScript object via
show_trendingLate: true
Programmatic Access
The selection of the tracking(s) to be displayed is typically performed through the URL but can also be done in code if required for the shop.
The options that can be used are described in the following table.
courier
The parcelLab carrier code.
dhl-germany
trackingNo
The tracking number.
0034000000001
trackingId
A unique tracking identifier assigned by parcelLab when your order data is received.
63a4cfe63dd87a685c8df7d4
plUserId
Your parcelLab user ID.
1612197
orderNo
The associated orderNo of the trackings.
ORD-123
selectedTrackingNo
When opening the page with userId/orderNo, select a specific tracking to be highlighted using the associated tracking number.
0034000000001
selectedTrackingId
When opening the page with userId/orderNo, select a specific tracking to be highlighted using the associated tracking ID.
63a4cfe63dd87a685c8df7d4
The selectedTrackingId option can be used to display trackings on the Order Status page in cases where trackings have yet to be assigned a tracking number.
Using with UI Frameworks
When you need to use the plugin with a UI Framework (for example: React, Vue, Next, and Nuxt), consider the NPM package. It exports a React and Vue component, which you can simply integrate in your existing app. For further information, see the usage examples in the NPM Readme.
Alternative Configuration
You can use the following alternative configuration for your Order Status page:
Include the CSS and JavaScript manually
<link href="https://cdn.parcellab.com/css/v5/main.min.css" rel="stylesheet">
<script src="https://cdn.parcellab.com/js/v5/main.min.js" charset="utf-8"></script>Install with shop systems
Last updated
Was this helpful?