For Online Sellers • Free

Free TCS Tracking Widget for Your Online Store

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

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

1. Style

2. Button colour

Your brand colour

3. Copy the code

<!-- TCS Tracking widget (free): https://tcs-tracking.com/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-kd71920 .tmpw-icon{background:#d71920;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-kd71920 .tmpw-row input:focus{border-color:#d71920;box-shadow:0 0 0 3px #d7192033}
.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-kd71920 .tmpw-row button,.tmpw-kd71920.tmpw-launch .tmpw-open{color:#ffffff;background:#d71920}
.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-kd71920">
  <form action="https://tcs-tracking.com/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 TCS 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="tcs-widget">
    <input type="hidden" name="utm_medium" value="widget">
  </form>
  <p class="tmpw-foot">Powered by <a href="https://tcs-tracking.com/" target="_blank">TCS Tracking</a></p>
</div>

Preview

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

How to Add It to Your Store

Shopify

Go to Online Store → Themes and click Customize.
Open the page for the box, click Add section and pick Custom Liquid.
Paste the code and click Save.

WooCommerce and WordPress

Edit the page where the box should go.
Add a Custom HTML block.
Paste the code and click Update.

Wix

Click Add Elements → Embed Code → Embed HTML.
Choose Code, paste it and click Update.

Blogger and others

In Blogger: Layout → Add a Gadget → HTML/JavaScript, then paste.
Any builder that accepts your own HTML works the same way.

Is the TCS tracking widget free?

Yes, completely. There is no sign-up and no limit. We only ask you to keep the small “Powered by TCS Tracking” line.

What do customers see when they press the button?

TCS Tracking opens in a new tab with the latest status and history for their TCS tracking number. Your store page stays open behind it.

Will the widget slow down my store?

No. It is plain HTML and CSS with no script, no cookies and no iframe, and it sends nothing until someone presses the button.

I also ship with other couriers. What should I use?

This widget is for TCS tracking numbers. If you use several couriers, the free Track My Parcel widget finds the courier from any number.

Can I change the colours or text?

Pick a box or a popup button and your colour before copying. You can also edit the wording in the code; please keep the “Powered by TCS Tracking” link.