For Online Sellers • Free

Free M&P Tracking Widget for Your Online Store

Shipping your orders with M&P? Put a small tracking box on your own website so customers can check their M&P delivery whenever they like.

Ready in a couple of minutes
Plain HTML, nothing tracked
Free for every store

1. Style

2. Button colour

Your brand colour

3. Copy the code

<!-- M&amp;P Tracking widget (free): https://mandptracking.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-kea580c .tmpw-icon{background:#ea580c;color:#0f172a}
.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-kea580c .tmpw-row input:focus{border-color:#ea580c;box-shadow:0 0 0 3px #ea580c33}
.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-kea580c .tmpw-row button,.tmpw-kea580c.tmpw-launch .tmpw-open{color:#0f172a;background:#ea580c}
.tmpw-row button:hover,.tmpw-open:hover{filter:brightness(.92)}
.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-kea580c">
  <form action="https://mandptracking.pk/widget-track" method="get" target="_blank">
    <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 M&amp;P 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">Track My Parcel</button>
    </div>
    <input type="hidden" name="utm_source" value="mandp-widget">
    <input type="hidden" name="utm_medium" value="widget">
  </form>
  <p class="tmpw-foot">Powered by <a href="https://mandptracking.pk/" target="_blank">M&amp;P Tracking</a></p>
</div>

Preview

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

Where to Paste the Code

Shopify

In your admin, go to Online Store → Themes and press Customize.
Add a Custom Liquid section to the page you want.
Paste the code, then Save.

WooCommerce and WordPress

Edit the page or post.
Add a Custom HTML block and paste the code.
Click Update to publish.

Wix

Go to Add Elements → Embed Code → Embed HTML.
Pick Code, paste the widget and click Update.

Blogger and others

Blogger: Layout → Add a Gadget → HTML/JavaScript.
Most other builders have a custom HTML block; paste it there.

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 M&P 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 M&P Tracking” line in place.

Where does the tracking result show?

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

Does it add scripts or cookies to my site?

No. The code is only HTML and CSS. Nothing loads from other sites and nothing is sent until a customer tracks a parcel.

Can it track parcels from other couriers?

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