For Online Sellers • Free

Free TRAX Tracking Widget for Your Online Store

Add a free TRAX tracking box to your online store. Buyers type the tracking number from their order and see where their TRAX parcel is, without messaging you.

Copy, paste, done in 2 minutes
No cookies, nothing tracked
Free, no account needed

1. Style

2. Button colour

Your brand colour

3. Copy the code

<!-- TRAX Tracking widget (free): https://traxtracking.pk/tracking-widget -->
<style>
.tmpw{max-width:560px;margin:24px auto;padding:20px;border:1px solid #e2e8f0;border-radius:16px;background:#ffffff;box-shadow:0 6px 24px rgba(15,23,42,.08)}
.tmpw,.tmpw-pop{color:#0f172a;font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;box-sizing:border-box;text-align:left}
.tmpw *,.tmpw-pop *{box-sizing:border-box}
.tmpw form,.tmpw-pop form{margin:0}
.tmpw-head{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.tmpw-icon{flex:0 0 40px;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.tmpw-k0b8f55 .tmpw-icon{background:#0b8f55;color:#ffffff}
.tmpw-title{margin:0;font-size:17px;font-weight:700;line-height:1.3;color:#0f172a}
.tmpw-sub{margin:2px 0 0;font-size:13px;line-height:1.4;color:#64748b}
.tmpw-row{display:flex;flex-wrap:wrap;gap:8px}
.tmpw-row input{flex:1 1 220px;min-width:0;margin:0;padding:12px 14px;font-size:15px;line-height:1.4;color:#0f172a;background:#ffffff;border:1px solid #cbd5e1;border-radius:12px}
.tmpw-row input:focus{outline:none}
.tmpw-k0b8f55 .tmpw-row input:focus{border-color:#0b8f55;box-shadow:0 0 0 3px #0b8f5533}
.tmpw-row button,.tmpw-open{flex:0 0 auto;margin:0;padding:12px 22px;font-size:15px;font-weight:700;line-height:1.4;white-space:nowrap;border:0;border-radius:12px;cursor:pointer}
.tmpw-k0b8f55 .tmpw-row button,.tmpw-k0b8f55.tmpw-launch .tmpw-open{color:#ffffff;background:#0b8f55}
.tmpw-row button:hover,.tmpw-open:hover{filter:brightness(.92)}
.tmpw-go{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.tmpw-spin{display:none;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:tmpw-rot .7s linear infinite}
.tmpw-busy{pointer-events:none;opacity:.85}
.tmpw-busy .tmpw-spin{display:inline-block}
@keyframes tmpw-rot{to{transform:rotate(360deg)}}
.tmpw-foot{margin:14px 0 0;font-size:12px;line-height:1.4;color:#64748b;text-align:center}
.tmpw-foot a{color:#334155;text-decoration:underline}
@media (max-width:440px){.tmpw{padding:16px}.tmpw-row button{flex:1 1 100%}}
</style>
<div class="tmpw tmpw-k0b8f55">
  <form action="https://traxtracking.pk/widget-track" method="get" target="_blank" onsubmit="var b=this.querySelector('.tmpw-go');if(b){b.classList.add('tmpw-busy');b.setAttribute('aria-busy','true');setTimeout(function(){b.classList.remove('tmpw-busy');b.removeAttribute('aria-busy')},4000)}">
    <div class="tmpw-head">
      <div class="tmpw-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 8l-9-5-9 5 9 5 9-5z"/><path d="M3 8v8l9 5 9-5V8"/><path d="M12 13v8"/></svg></div>
      <div>
        <p class="tmpw-title">Track your order</p>
        <p class="tmpw-sub">Enter your TRAX tracking number to see where your parcel is.</p>
      </div>
    </div>
    <div class="tmpw-row">
      <input name="cn" type="text" required minlength="5" maxlength="40" autocomplete="off" autocapitalize="characters" autocorrect="off" spellcheck="false" enterkeyhint="go" aria-label="Tracking number" placeholder="Enter tracking number">
      <button type="submit" class="tmpw-go"><span class="tmpw-spin" aria-hidden="true"></span><span>Track My Parcel</span></button>
    </div>
    <input type="hidden" name="utm_source" value="trax-widget">
    <input type="hidden" name="utm_medium" value="widget">
  </form>
  <p class="tmpw-foot">Powered by <a href="https://traxtracking.pk/" target="_blank">TRAX Tracking</a></p>
</div>

Preview

This is how it looks on your store. Try it with a real tracking number.

Adding the Widget to Your Website

Shopify

Open Online Store → Themes → Customize.
Choose a page, then Add section → Custom Liquid.
Paste the widget code and save.

WooCommerce and WordPress

Open the page in the editor.
Insert a Custom HTML block where you want the widget.
Paste the code, then update the page.

Wix

Use Add Elements → Embed Code → Embed HTML.
Select Code, paste and press Update.

Blogger and others

Blogger: add an HTML/JavaScript gadget from Layout and paste the code.
Other site builders: use their custom HTML or embed option.

Can it track parcels from other couriers?

This one is made for TRAX. For a single box that works with many Pakistani couriers, use the Track My Parcel widget instead.

Can I make it match my store?

Yes. Choose the style and button colour above, or adjust the text in the code yourself. Keep the “Powered by TRAX Tracking” line as it is.

Does the widget cost anything?

No. It is free for every store, with no account needed. Please leave the “Powered by TRAX Tracking” line in place.

Where does the tracking result show?

On TRAX Tracking, in a new tab, so shoppers can come straight back to your store when they are done.

Does it add cookies or trackers to my site?

No. The code is HTML and CSS plus one short line that shows a loading icon. Nothing loads from other sites and nothing is sent until a customer tracks a parcel.