How to Install and Use the Stream Tracking Widget

Posted by Joe Whitehurst on July 27, 2022

The Stream tracking widget allows your customers to search for and track their orders directly from your own website.

There are three simple steps you need to follow in order to install the tracking widget on your site, however you may need some assistance from your web development team.

Step 1: Contact Stream Support

Contact support@go2stream.com and provide them with the following pieces of information to allow us to activate your tracking widget:

  1. The domain that you will be placing the tracking widget on.
    For example if you wanted to add the tracking widget to www.go2stream.com/track-my-order we would need to know that the domain is ‘go2stream’.
  2. How long you would like your Tracking ID’s to stay valid for
    By default this is 12 months for security purposes
  3. What you would like your Tracking ID prefix to be
    This is defaulted to be the 3 character user prefix on your Stream account, however it can be changed to any alphanumeric string that’s 1-5 characters long (all caps with no spaces).
    For example: STR578AYT27G32C 

Step 2: Add the Stream Tracking Script

Add the following script anywhere within the page where you wish to use the tracking link

<script type="text/javascript" src="https://www.go2stream.net/stream/live/apis/StreamTracking/StreamTracking.js" defer></script>

 

Step 3: Add the Tracking Widget

Add the following div within the container which you wish the tracking widget to appear within on your page.

Please note, you can choose to use the default Tracking Widget div, or you can use the Tracking Widget with Customisation Options div (both below) if you would like the option to alter the appearance of the widget to match your website and branding. 

(If you want to make the appearance of the tracking widget match the branding of your site, please read ‘Customising the Tracking Widget’ below, before installing the div.)

Tracking Widget:

<div id="go2stream-tracking-widget-container"><div>

 

OR

Tracking Widget with Customisation Options:

<div 
id="go2stream-tracking-widget-container" 
data-colour_primary="white" // Background colour 
data-colour_secondary="#269789" // Button colour
data-colour_text_primary="black" // Text colour
data-colour_text_secondary="white" // Button text colour
data-colour_errors="red" // Error text colour
></div>

For example, if you want it to appear in a sidebar on your home page, you’ll need to go into the code for the homepage and insert the above div within the sidebar container in the code. 

Please ask for assistance from your web development team if you are unsure about how to do this. 


Important:
You can add the tracking widget to as many pages on your site as you like, however you will need to install both the script and the div on every page you wish it to appear on. You should also only add one instance of the tracking widget on any page. 


 

Customising the Tracking Widget 

Once the tracking widget is installed on your site it will be displayed with its default appearance. 

You can change the appearance by altering the data-colour labels/code within the div tag.

We have labelled the div elements accordingly so you can easily see which colour codes will affect which part of the tracking widget. 

For example:

If you want to change the background colour from black to white, you would simply replace the word ‘white’ with the word ‘black’ as seen below. 

From this:

data-color_primary="black" // Background colour

 

To this:

data-color_primary="white" // Background colour

 

Or this, if using a Hex colour code:

data-colour_primary="#000000" // Background colour

Additional formatting:

If you want to go one step further to alter the appearance of the tracking widget, you can do this using CSS. However we strongly recommend you speak to your web development team before doing this if you are unsure.


Important:
The colours can either be the predetermined colours such as ‘black’, ‘white’ or ‘red’ or you can enter a Hex code of your choosing to use your own brand colours. But remember, whichever you choose the word/code needs to be placed within speech marks like this “Colour Code Goes Here”.


Tracking ID’s

Tracking ID’s are automatically generated by Stream and include the prefix that you provided in the setup process. 

By default these are 16 characters long (3 character prefix, 12 character string, “C”)

For example: STR578AYT27G32C 

However, your prefix can be up to 5 letters long making a Tracking ID a maximum of 18 characters.  

Where can I find the Tracking ID’s?
The Tracking ID’s can be found on the order details page of any order, and can also be found on a customers tracking link. 

You can also provide the Tracking ID to your customers in the Emails and SMS messages that are sent from within Stream. 


Using the Tracking Widget (For Your Customers)

For your customers, using the tracking widget on your website is very self explanatory. 

They will need to enter the Tracking ID that they have been provided, along with the related delivery or collection postal code for their order.

This will then run a search within Stream to look for the order and once it is found, it will redirect to the live tracking URL for that order. 

If your customer enters any incorrect information into the tracking widget, they will have an error message returned asking them to try again. 

For security reasons, it won’t inform them which data entry (either Tracking ID or postcode) has been entered incorrectly. 


Important: When Providing Tracking ID’s for orders placed on either Amazon or Ebay

You must:

Enter your own company name/website, or the website where your customers can enter their Tracking ID to track an order, as the ‘carrier’ for the order. 

You must not:

Enter Stream or go2stream.com as the ‘carrier’ for your orders.

Didn't find what you're looking for?

Still can't find the answers you're looking for? Contact our support team