Use our widget to allow people to track packages on your website
You can see an example of how the widget works below.
1. Insert the following code between the <head> and </head> tags on the page of your website
<style>
.courierspk-widget {
min-width: 312px;
min-height: 210px;
width: -moz-available;
width: -webkit-fill-available;
}
</style>2. Next, place the following code in the part of the page where you want to see the widget.
<div class="courierspk-widget-wrap">
<iframe class="courierspk-widget" src="http://couriers.net.pk/track-button/?type=tracking/pk/replace_courier_id_here" frameborder="no" seamless></iframe>
</div>Note: don’t forget to replace courier_id. You can find list of Courier IDs here
3. That’s it, now visitors of your shop or website can track their packages.
Widget customization
The widget can specify the styles of your choice to match the design of your site. Styles must be passed as query params to the widget’s link, which is specified in the src attribute.
You can customize the widget with the following styles:
| Parameter | Default Value | Description |
|---|---|---|
| primary | #3cd878 | Primary Color |
| primary_dark | #14a54c | Primary Dark Color |
| primary_light | #d3ffe4 | Primary Light Color |
| primary_contrast | #ff0000 | Primary Contrast Color |
| default | None | Default Tracking ID |
| placeholder | Enter Track ID | Input Box Placeholder Text |
| button_text | Track | Button Text |
Example:
Courier IDs
| Courier Name | Courier ID |
|---|---|
| TCS | tcs |
| Leopard Courier | leopard |
| Call Courier | call_courier |
| Pakistan Post | pak_post |
| Sonic TRAX | trax |
| M&P Courier | muller_phipps |
| Daraz DEX | daraz_dex |
| Daewoo Fastex | fastex |
| Active Courier | active_courier |
| With Rider | with_rider |
| Blue Ex | blue_ex |
| Swyft Logistics | swyft |
| Post Ex | post_ex |
| Penta Express | penta_express |