Add a FedEx Tracking Box to your Web Site?

If you’re a shipping partner with Federal Express or have a tight integration of FedEx shipping with your online shopping solution (Shopify, for example) then that should be a simple matter of some plug-and-play code or a plug-in you can install. In fact, you might already have it, you’ve just never enabled the feature!

Assuming you do not, however, and that you manually ship products and then email customers their tracking number by hand, you’ve got a little bit of coding you’ll need to do. Fortunately, it’s pretty easy since FedEx has a well-designed site and it’s easy to understand how tracking works with just a bit of code analysis…

As always, to start head to the site and let’s understand what FedEx is doing when it tracks a package. To make this easier, you can copy and paste the tracking number 1111111111 which turns out to be an internal testing number. Neat, eh?

The search box on the page looks like this:

Enter that test tracking number and you’ll find that it really works in the system. In fact, here’s the deliver info:

Not only that, there’s a transit trail you can see too:

But, ummm, let’s get back on track, shall we?

What’s important on this page is the URL, the address of the tracking information page, given a tracking number. You can find that on the address bar of your Web browser. Here’s what you get for the 111 number:

Now we can unwind the URL and turn it into a Web form. But before we do that, realize you can replace the 1111 sequence with any tracking number and now you have a clickable link you can put in an email that lets people easily see the status of their product from your company. Let’s say your tracking number was 1234567899, that means this URL would be a one-click tracking link:

https://www.fedex.com/apps/fedextrack/index.html?tracknumbers=1234567899

Easily done, right? But let’s turn this into a form instead. In HTML there are two types of forms, “get” and “post”, the former being what produces URLs that have “?” followed by name=value pairs. Like what we have from FedEx!

So here’s our basic FedEx tracking form:

Yes, it’s that easy. The result when actually formatted is this mini form:

Try it with the 11111111111 tracking number, it works!

Now there’s more you can do to make the form fancy, including a graphical button or rounding the edges of the input box to match your site design, but that’s the basic. Want to have the tracking page open up a new window in the browser? Add target=”_blank” to the FORM tag.

Now go implement!