Register

Package Tracking Widgets

Post Track provides the ability to integrate a package tracking widget by tracking numbers for online stores and e-commerce sites. Widget integration requires basic knowledge of HTML and CSS. We have developed several types of widgets to help your users track purchases.

Parcel Tracking Button

This type of widget is a button, by clicking on which a window opens with detailed information about following the package. This widget is suitable for online stores that provide a tracking number for their customers. It will be convenient to place the “Parcel Tracking Button” next to the purchase information so that the user is always aware of the parcel status.

Work "Parcel Tracking Buttons" on the example of a list of purchased goods:

Product Example #01

AliExpressUS $4.81 - 10.02
LO791147152CN

Product Example #02

AliExpressUS $10.80
LX008947648CN

Product Example #03

Amazon$28.40
TYPH0041785111

To integrate the "package tracking button", you must complete 2 steps:

  1. Add the following JS code on the HTML page where the widget button will be placed:
    <script async src="https://posttrack.com/js/min/posttrackwidget.js"></script>
    
  2. Now you need to specify which page elements are the tracking number, for this, on the HTML element, specify attributes data-ptwidget-type="button" and data-ptwidget-track-number, which is the parcel tracking number. The widget converts this element into a package tracking button, for example:
    <span data-ptwidget-type="button" data-ptwidget-track-number="LO791147152CN">Track: LO791147152CN</span>

After completing these steps, the widget is ready to process package tracking requests on your site. If you have any questions or difficulties with the integration of the widget, please contact us through the contact form, and we will be happy to help you.

"Package Tracking Button" Settings

To configure the widget, you must initialize the attributes:

  • data-ptwidget-language (valid values: "en", "uk", "ru");
  • data-ptwidget-max-width (maximum widget width);
  • data-ptwidget-max-height widget maximum height);
  • data-ptwidget-z-index (absolute depth of the widget, in case of overlapping design elements);
  • data-ptwidget-button-barcode-icon (valid values: "yes", "no");
<span  data-ptwidget-type                  =   "button"
       data-ptwidget-track-number          =   "LO791147152CN"
       data-ptwidget-language              =   "ru"
       data-ptwidget-max-width             =   600
       data-ptwidget-max-height            =   600
       data-ptwidget-button-barcode-icon   =   "no">LO791147152CN</span>

"Package Tracking Button" Style

You can stylize buttons for your site design, for this you need to redefine the CSS styles for the button, for example:

  • Style: .tracking-number-01
  • Style: .tracking-number-02
  • Style: .tracking-number-03
  • Style: .tracking-number-04
  • Style: .tracking-number-05
<style>
   .tracking-number-01
   {
     background-color:   #000 !important;
     color:              #FFF !important;
     border-radius:      0px !important;
   }
   .tracking-number-01 svg
   {
     fill:               #FFF !important;
   }

   .tracking-number-02
   {
     background-color:   #CC0000 !important;
     color:              #FFF !important;
     border-radius:      10px !important;
   }
   .tracking-number-02 svg
   {
     fill:               #FFF !important;
   }

   .tracking-number-03
   {
     border:             2px solid #CCC !important;
     background-color:   #FFF !important;
     color:              #000 !important;
     border-radius:      20px !important;
     font-size:          20px !important;
     padding:            10px !important;
   }
   .tracking-number-03 svg
   {
     fill:               #000 !important;
   }

   .tracking-number-04
   {
     background-color:   #00CC00 !important;
     color:              #000 !important;
     border-radius:      0px !important;
     font-size:          10px !important;
     padding:            5px !important;
   }
   .tracking-number-04 svg
   {
     fill:               #000 !important;
   }

   .tracking-number-05
   {
     background-color:   #B3D4FC !important;
     color:              #000 !important;
     border-radius:      5px !important;
     font-size:          12px !important;
     padding:            10px !important;
     border-bottom:      2px solid #96B2D3 !important;
   }
   .tracking-number-05 svg
   {
     fill:               #000 !important;
   }
</style>
<span data-ptwidget-button-barcode-icon="yes" data-ptwidget-track-number="LO791147152CN" data-ptwidget-type="button" class="tracking-number-01">Style: .tracking-number-01</span>
<span data-ptwidget-button-barcode-icon="yes" data-ptwidget-track-number="LO791147152CN" data-ptwidget-type="button" class="tracking-number-02">Style: .tracking-number-02</span>
<span data-ptwidget-button-barcode-icon="yes" data-ptwidget-track-number="LO791147152CN" data-ptwidget-type="button" class="tracking-number-03">Style: .tracking-number-03</span>
<span data-ptwidget-button-barcode-icon="yes" data-ptwidget-track-number="LO791147152CN" data-ptwidget-type="button" class="tracking-number-04">Style: .tracking-number-04</span>
<span data-ptwidget-button-barcode-icon="yes" data-ptwidget-track-number="LO791147152CN" data-ptwidget-type="button" class="tracking-number-05">Style: .tracking-number-05</span>

Parcel Search by Tracking Number

This widget allows users to search for package information by manually entering the tracking number. Search parcels by tracking number is suitable for sections of sites: help or frequently asked questions when users of your site have questions about the location of the parcel.

Example of the "Parcel Search by Tracking Number":

 

To integrate the "parcel search by tracking number", you must complete 2 steps:

  1. Add the following JS code on the HTML page where the widget will be placed (add once for all widgets):
    <script async src="https://posttrack.com/js/min/posttrackwidget.js"></script>
    
  2. Now you need to specify which page elements are a widget. To do this, specify the data-ptwidget-type="search" attribute on the HTML element. Inside the HTML element, there should be two tags: <input> - the field for entering the tracking number and <button> - the button. An optional attribute is data-ptwidget-result-container-id linking to the element where the result should be displayed. If this attribute is not set, the result will be displayed in a pop-up window, as in the widget "package tracking button"
<div data-ptwidget-type                  =   "search"
     data-ptwidget-result-container-id   =   "search-result">
    <input   class="search-input" type="text" placeholder="Tracking Number">
    <button  class="search-btn">TRACK</button>
</div>
<div id="search-result"></div>

Settings for the "parcel search by tracking number" widget

The list of valid attributes for the package search widget:

  • data-ptwidget-language (valid values: "en", "uk", "ru");
  • data-ptwidget-max-width (maximum widget width);
  • data-ptwidget-max-height (widget maximum height);
  • data-ptwidget-z-index (absolute depth of the widget, in case of overlapping design elements);
  • data-ptwidget-button-barcode-icon (Valid Values: "yes", "no");
  • data-ptwidget-result-container-id (The id of the HTML element where the results should be displayed. If this parameter is not specified, the result will be displayed in a separate window as in the widget tracking button. The data-ptwidget-max-width and data-ptwidget-max-height attributes are not taken into account if the data-ptwidget-result-container-id attribute is set);

Style settings for "parcel search by tracking number"

You can change widget styles using CSS styles, below is an example of styles for a parcel search widget:

<style>
   .search-input
   {
       padding:            10px !important;
   }
   .search-btn
   {
       background-color:   #CC0000 !important;
       color:              #FFF !important;
       font-size:          14px !important;
       padding:            5px !important;
       padding-right:      10px !important;
       box-sizing:         border-box;
   }
   .search-btn svg
   {
       fill:#FFF !important;
       width:              20px !important;
       height:             20px !important;
   }
</style>

How to add a Track Order Status page on Shopify

Easy ways to add a Track Order Status page on Shopify for 5 minutes (w/o knowledge of HTML & JS):

  1. log in to Shopify;
  2. Select your Online Store;
  3. Select Pages;
  4. Press Add Page button;
  5. Press Show HTML in the content area;
  6. Visit https://posttrack.com/en/pages/widgets;​
  7. Find "Parcel Search by Tracking Number";
  8. Copy JS & HTML and paste them into the content area of your order page;
  9. Save page;
  10. Done!

Video instructions on how to add an order page to Shopify.

Examples of widget  integration:

In case of questions about work or integration of our widgets, you can contact us through the contact form.