How To Set Up Customer’s Tap To Track (Tracking Widget)

You can let your customers track the status of their delivery / collection via a tracking widget.

This tracking widget can be embedded into your website.

You can refer to the screenshot below to see what the tracking widget will look like.

HOW TO GET STARTED

In your admin dashboard :

  1. Click on the Settings menu to reveal a drop-down menu.
  1. Click on the Job option and a Job settings form with eight tabs (Tracking Widget, FieldsSorting, PODReschedule, Status, Options and Reasons) will be shown.

3. Under the Tracking Widget tab, you will find your personal Tracking Widget code which is available for you to copy and paste into your website. Alternatively, you can send your customers the direct link (below the code) to your tracking widget without installing it on your website.

ONE TIME SETTINGS FOR YOUR TRACKING WIDGET

You may choose to use delivery order no. (D.O. No.) as your tracking number or a custom tracking no. (Tracking No.) by selecting from the Tracking Field drop-down box. If you select Tracking No., you have to enter a separate tracking no. in the Add delivery or Add Collection form or via a “Tracking No.” column in your CSV or Excel import file.

Tip: Use the order no. or the invoice no. for your tracking no. so that you don’t have to send your customers another tracking no. – you can inform them to use their order no. or invoice no. as the tracking no. in their order confirmation email or on your website.

Contact No. This contact no. is the customer service contact no. for delivery/collection inquiries.

Support email This email address is the customer support email address for delivery/collection inquiries.

To change the name of the customer service contact, go to Settings > Organization > General tab > Organization Name field.

Job to be completed by When you select the number of days required to complete the job, our system will auto-calculate the job completed by date and display it to the customer. The number of days required is usually reflective of your SLA to your vendors or customers. If all your jobs are completed within the same day, simply select on start date (same day). If this field is entered, your customers will be able to see the expected date of delivery or collection assigned. This will help in reducing your customer service support.

Start date is the day that the job is imported into the system. To change this start date, go to Update Delivery or Update Collection form and change the date under the field start date.

Non-working days  You can specify the non-working days if any, in order to allow our system to accurately calculate the expected date of delivery from the start date. You can specify which days of the week that your business is not in operation, e.g. on weekends (Sat and Sun). This field of non-working days only applies to standard days of the week where no deliveries or collections will be done.

OPTIONS
Switch Description
Requires email or phone no. Requires customer to provide email or phone no. as verification to retrieve tracking details.
Display job time Job time is the time that the job needs to be completed by.
Hide Deliver To / Collect From Hide the recipient’s or sender’s name.
Hide last updated time Hide the timing when the job was updated.
Display photos Display or hide the photo proofs.
Display signature Display or hide the signature.
Display vehicle’s current location Allow the customers to view the vehicle’s current location. Vehicle’s current location will not be shown if the vehicle has been stationary for more than 15 mins / not connected to Detrack / GPS not available.
Hide receiver name Display or hide the name captured via the Driver App.
Hide delivery / collection address Display or hide the recipient’s or sender’s address. (Disabling this will hide the display of address in the map.)
Display partial address Partial address will be displayed on the tracking widget for privacy protection.
Allow customer to download POD Allow the customer to download the POD pdf upon job completion.
Allow customer to download failed POD Allow the customer to download the POD pdf upon job failure. (Require the “Allow customer to download POD” switch to be enabled.)
Display organization logo Display or hide the logo.
Hide legend Hide the legend that contains the various status information of the job.
Display live ETA Choose to auto-calculate and re-adjust the imported ETA time for the subsequent jobs should the driver complete the POD earlier or later than the imported ETA for the previous job. To use this feature, ensure that the fields, “ETA” and “Live ETA” in Settings > Job > Fields have been enabled and the ETA has either been imported in or entered into the system.
Display partial receiver name Enabling this option will display only the first and last characters of the name for privacy protection. (For example: “John Doe” will be displayed as “JXXX XXe”.)
Allow customer to track historical jobs If this is not enabled, customers can only track the jobs for the current day. Tracking of past historical data is only applicable to completed or failed jobs.
Allow customer to track future jobs If this is not enabled, customers can only track the jobs for the current day.
LEGENDS

The Delivery and Collection Status Legend can be customized to suit your workflow. However, please note that only the legend can be customized, the naming of the status type cannot be changed.

Below are the conditions/actions by the Admin to trigger the respective status on your tracking widget:

Detrack Dashboard System Status (Internal) Assign To Delivery Date Tracking Widget Status (External- Customer Facing)
In Transit Assigned / Unassigned Today / Future Info received
In Progress Unassigned Today / Future Info received
In Progress Assigned Future Scheduled
In Progress Assigned Today Out for delivery

Once you have configured the above settings, click Save and you are done.

You can now click on the demo tracking widget image button to test out your tracking widget. Have fun!

Our Tracking Widget is a combination of HTML (to display the button) and JavaScript (to open the window) code and can be inserted into any website. You may require the assistance of your webmaster to place our Tracking Widget button on your website as you will need to edit HTML codes. Alternatively, you can always send your customers the direct Tracking Widget link.

Tip: you can change the image of the Tracking Widget button to your own by changing the src property of the HTML input button to point to your image file.
EXAMPLE HTML CODES FOR TRACKING WIDGET
Example 1 - Perform a search and open in a separate tab
<form action="https://app.detrack.com/tracking/{YourTrackingWidgetKey}" target="_blank">
  <input name="q" type="text" value="" placeholder="Enter your D.O. No." />
  <input name="e" type="text" value="" placeholder="Enter your Email or Phone Number." />
  <input type="submit" value="Submit" />
</form>
Example Tracking Widget


Example 2 - Embedding in website
<object data="https://app.detrack.com/tracking/{YourTrackingWidgetKey}" style="width: 500px; height: 300px"> </object>

We will be happy to assist you should you need further help with the tracking widget, just drop us a note at info@detrack.com.

Click here for the Dashboard Version 1 of this tutorial.

LEARN MORE