Tracker Widget

Business Background

Reduce customer queries about their orders by showing them where the item is in your order process. With a few clicks and no code, you can inspire trust and transparency.

Titan Solution

Add the Titan Web tracking element to your project to track an order. The order process has steps (groups) and substeps in each step. As the process moves through all the steps in each group and ultimately through all the groups, the order tracking element gives users a visual representation of where their item is in the process.

How to Video

Video Coming Soon!

How to Guide

The following is an example of the order tracking process. You will create groups with items (substeps) in a group. As one item in the group is completed, the tracker shows the next item. When all the items in the group are completed, the tracker jumps to the next group’s first item, and so on, until the order is done.

Order tracking example
Order tracking example
  1. Click the expand (+) icon next to the settings icon in Titan Web. A list of elements will show.
  2. Select the Widget option from the list.
  3. Drag-and-drop the Tracker element to the canvas.
Widget
Widget
  1. Click the Tracker Gear icon to open the Button Group Settings screen.
  2. Under Content, click the Edit Mapping button to add mapping for the static values. The Configure Tracker Options screen opens.
Content
Content
  1. Type a title.
  2. Click the Add Item option to add items, or click the Delete icon to remove items.
  3. Type steps in the Item fields.
Configure Tracker Options
Configure Tracker Options
  1. Click the Group 2 option and add the title and items.
  2. Repeat the steps for Group 3.
  3. Alternatively, click the Delete icon to remove Group 3.
Configure Tracker Options
Configure Tracker Options
  1. Alternatively, click the + icon next to Groups to add a new group.
  2. Repeat the steps for the new group until you have all the groups and steps you need.
  3. Click the Apply button.
Configure Tracker Options
Configure Tracker Options

Add Accessibility

ARIA (Accessible Rich Internet Applications) accessibility refers to a set of specifications developed by the World Wide Web Consortium (W3C) to improve the accessibility of web content, especially dynamic content and user interface components. ARIA provides a way to make web applications and content more accessible to people with disabilities, particularly those who rely on assistive technologies such as screen readers.

Accessibility for all the labels is added automatically but you can change it.

Accessibility
Accessibility

Add Tracker Interactivity

  1. Add a button element to the canvas and click the On Click Action option.
On Click Action icon
On Click Action icon
  1. Click the + icon. The Add Node screen opens.
+ icon
+ icon
  1. Under Element Interactivity, scroll down and click the Tracker Interactivity option.
  2. Click the Next button. The Add Node/Tracker Interactivity screen opens.
Add Node screen
Add Node screen
  1. Use the Element drop-down list and select the tracker element.
  2. Use the radio buttons to select an option, for instance, Next Step.
  3. Click the Next button.
  4. Insert a tag if necessary and click the Insert button. The interactivity is added to the On Click Action screen.
Add Node/Tracker Interactivity screen
Add Node/Tracker Interactivity screen
  1. Click the Apply button.
Node added
Node added
  1. Save and Preview the project.
  2. Click the button. The tracker moves to the next step.
Example
Example
  1. Click the button until all the steps in the first group have been completed. The tracker moves to the next group.
Example
Example

Hidden Title

Need more help?