Tracker Widget

Business Background

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

Titan Solution

Add the Titan Web tracker 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 tracker 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.

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.

4. Click the Tracker Gear icon to open the Button Group Settings screen.
5. Under Content, click the Edit Mapping button to add mapping for the static values. The Configure Tracker Options screen opens.

6. Type a title.
7. Click the Add Item option to add items, or click the Delete icon to remove items.
8. Type steps in the Item fields.

9. Click the Group 2 option and add the title and items.
10. Repeat the steps for Group 3.
11. Alternatively, click the Delete icon to remove Group 3.

12. Alternatively, click the + icon next to Groups to add a new group.
13. Repeat the steps for the new group until you have all the groups and steps you need.
14. Click the Apply button.

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.

Add Tracker Interactivity

1. Add a button element to the canvas and click the On Click Action option.

2. Click the + icon. The Add Node screen opens.

3. Under Element Interactivity, scroll down and click the Tracker Interactivity option.
4. Click the Next button. The Add Node/Tracker Interactivity screen opens.

5. Use the Element drop-down list and select the tracker element.
6. Use the radio buttons to select an option, for instance, Next Step.
7. Click the Next button.
8. Insert a tag if necessary and click the Insert button. The interactivity is added to the On Click Action screen.

9. Click the Apply button.

10. Save and Preview the project.
11. Click the button. The tracker moves to the next step.

12. Click the button until all the steps in the first group have been completed. The tracker moves to the next group.