Use Parcel Tracker’s widget to allow people to track packages on your website

Use our industry leading technology free of charge across your sites.
How to add widget to your site

To embed this widget in your site, use an HTML snippet and follow the steps below.

1
Insert the Widget Script and Stylesheet
  • Add the following <link> and <script> tags inside the <head> of your HTML document:
<link href="https://track.parceltracker.co.uk/cdn/tracking-widget/bundle.min.css" rel="stylesheet"/>
‍
<script src="https://track.parceltracker.co.uk/cdn/tracking-widget/bundle.min.js" type="module"></script>
Copy
Copied!
  • These load the ParcelTracker widget styles and JavaScript.
2
Add a Container for the Widget
  • Insert a div element into your HTML where you want the widget to appear:
html
Copy
Copied!
<div id="some-element-id"></div>
  • You can change "some-element-id" to any ID you prefer, just make sure to reference it correctly in the next step.
3
Initialize the Widget
  • Once the script is loaded, initialize the widget using the following JavaScript:
html
Copy
Copied!
<script>
 window.ParcelTracker.renderTrackingWidget({
   target: "#some-element-id",  // Replace with your container ID
   options: {
     renderCaptcha: true        // Optional: true by default
   }
 });
</script>
  • This renders the widget in the target container and handles Captcha setup automatically.
4
Manual Captcha Setup for Strict CSP (Optional):
  • Set renderCaptcha to false if your Content-Security-Policy doesn’t allow unsafe JavaScript evaluation. If you do so, you will need to handle Captcha manually.
  • Add this to the <head>:
html
Copy
Copied!
<script defer src="https://www.google.com/recaptcha/api.js?render=6Ldx9LgpAAAAAKe3aPpfBKCg9II9UvkGDI4fw3hG"></script>
<style>
 .grecaptcha-badge {
   visibility: hidden !important;
   display: none !important;
 }
</style>
  • Add this to the <body>:
html
Copy
Copied!
<div class="g-recaptcha"
    data-sitekey="6Ldx9LgpAAAAAKe3aPpfBKCg9II9UvkGDI4fw3hG"
    style="display: none;"
    data-size="invisible"></div>
  • Then initialize the widget with:
html
Copy
Copied!
window.ParcelTracker.renderTrackingWidget({
 target: "#some-element-id",
 options: {
   renderCaptcha: false
 }
});