Skip to main content
All CollectionsCustomer NotificationsLive Tracking Widget
How To Set Up Customer's Tap To Track (Tracking Widget - New Version)
How To Set Up Customer's Tap To Track (Tracking Widget - New Version)
Charles avatar
Written by Charles
Updated over 2 months ago

The tracking widget can be used to let your customers track the status of their delivery / collection via the D.O. No. or Tracking No..

This tracking widget can be embedded into your website for your customers to track their

Settings

In your admin dashboard, navigate to Settings > Tracking Widget.

General

Tracking Widget Key

Unique ID for the tracking widget.

Widget Button Color Selection

For changing the background color of the Widget Demo Button.

Tracking Instructions

For provision of miscellaneous Tracking Information in the tracking widget.

Widget Delivery Date Label

For changing the Date label for delivery jobs in the tracking widget.

Widget Collection Date Label

For changing the Date label for collection jobs in the tracking widget.

Widget Demo Button

Click to view the tracking widget.

Tracking Widget Link

URL of the tracking widget.

Copy and paste the following HTML to your website

HTML code snippet that can be placed in the website for users to track their delivery/collection.

Customer Service Configurations

Contact No.

The customer service contact no. for delivery/collection inquiries.

Support email

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.

Tracking Configurations

Tracking Field

Reference of the job.

Either D.O. No. or Tracking No.

Widget Search Result

Latest Job - Retrieve the newest (single) job corresponding to the provided D.O. No. or Tracking No.

All Jobs - Retrieve all the relevant jobs corresponding to the provided D.O. No. or Tracking No.

Job To Be Completed By

Only applicable when the Widget Date Display is set to Calculated.

Non Working Days

Selected days will be factored into the Date display if the Widget Date Display is set to Calculated.

Widget Date Display

Date - Takes reference from the Date of the job for display.

Calculated - Takes reference from the Start Date of the job, and adds the value selection for Job To Be Completed for display.

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.

Start date is by default when 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.

Widget Milestone

Display a log of the events that were being applied to the job.

Note: The information in this milestone is a record of the past events.

It is NOT indicative of the current status of the job.

For current status of the job, refer to the Information section.

Rating Labels Configurations

Goods / Service Rating Label

For changing the Goods / Service Rating label in the tracking widget.

Driver Rating Label

For changing the Driver Rating label in the tracking widget.

Options

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.

Takes reference from the Job Time of the job.

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 on the map.

Vehicle’s current location will be hidden 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.

(Requires the Allow customer to download POD option to be enabled.)

Display organization logo

Display or hide your logo.

Takes reference from Settings > Organization > Logo and Users > Groups > 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, enable ETA and Live ETA under Settings > Job > Fields, provide the ETA for the job.

Display partial receiver name

Enabling this option will display only 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.

Note: Tracking of past historical data is only applicable to Completed or Failed jobs.

Incomplete jobs (e.g. info received and in progress) are not trackable via the tracking widget.

Allow customer to track future jobs

If this is not enabled, customers can only track the jobs for the current day.

Legends

The description of the Delivery and Collection Status Legend can be customized to suit your workflow. However, the naming of the status 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

Social Media

For provision of social media contacts in the tracking widget.

Testing

To test out the tracking widget, click on the demo tracking widget image button.

The 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.

Note:

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" />Track Your Delivery
</form>

Example 2 - Embedding in website

<object data="https://app.detrack.com/tracking/{YourTrackingWidgetKey}"> </object>

Note:

{YourTrackingWidgetKey} can be retrieved from General > Tracking Widget Key.

Did this answer your question?