Task list building block

A task list presents a sequence of guides as steps so visitors can complete tasks and track their progress. Task lists are useful for onboarding, tutorials, and other guided experiences that involve multiple steps.

For more information about all building blocks, see Guide building blocks overview. 

Prerequisites

To add a building block to a guide, you must have permission to create or edit guides.

Add a task list 

1. Go to Guides.
2. Open the guide you want to edit.
3. Select Edit in my app to open the Visual Design Studio.
4. Select View steps, then choose the step you want to edit.

5. Hover over the step you'd like to edit and select Edit step. If the step is blank, select Click to Add Content.

• To add a building block above or below an existing block, hover over the location where you want to add the block and select the Add Row plus (+) icon that appears. 
• To add a text, button, or image building block to the left or right of an existing building block, hover over the building block and select the Add Column plus (+) icon that appears. You can edit the width of building block columns.

6. From the Add Building Block menu, scroll down to the Advanced section and select Task List.

Edit a task list

Each item in a task list is a guide. When you add a task list to your guide, you can select the title to edit it or the content box to open the Edit Task List window. You can:

• Edit the title of the task list. 
• Add guides as task list items and organize them into a logical order to facilitate structured learning or task completion. 
• Add fallback text to display when a task list is empty. 
• Customize the appearance of the task list to match the design of your application. 

Note: If you're adding a guide that requires the user to start on a different page, you'll need to complete additional steps to redirect the user to a new page before the guide starts. 

Edit the title

Select the Task List text to edit it. This opens the Edit Text Block window, which gives you the same options for editing a text building block in your guide. For more information, see Text building block.

Add and organize tasks

Select the empty task list block and then select the edit icon. This opens the Edit Task List window, which consists of two tabs: Content and Styling.

Tasks are added from the Content tab of the Edit Task List window. To add your first task:

1. Select + Add guide
2. Use the dropdown menu to select the guide you'd like to add.
3. Use the Display text field to change the text users will see for the guide within the task list. 

To add more tasks, select + Add guide and then select another guide from the Guide dropdown menu.

You can reorder task list items by selecting the three dots in the top-left corner of a task card and dragging it up or down the list of tasks.

Add fallback text

Fallback text is the message displayed in place of the task list when no tasks are available or visible to the visitor. You can add text in place of the task list for a few different scenarios:

• When a visitor completes all the items in the list.
• When there are no items added to the list.
• When the visitor is ineligible to view any items in the list.

To do this, expand the Fallback text section, then enter the text that you want the visitor to see.

Customize the appearance

To edit the styling of the task list, open the Styling tab of the Edit Task List window. From here, you can edit:

• The progress icon
• The progress bar
• The text style
• The subtitle text

Edit the progress icon

The progress icons act as bullet points to the left of each task list item. You can choose the empty and filled progress icon colors, which are set with hexadecimal, RGB numbers, visual color selector, or color slider.

Edit the progress bar

The progress bar displays below the task list in the guide step. You can choose the progress bar's background and fill colors, which are set with a hexadecimal, RGB values, visual color selector, or color slider.

You can also change the wording of the label outside of the < and > symbols. For example, you might want to change the label from 50% of Task List Items Complete to something more specific, like 50% of onboarding tasks complete. To revert the label text back to the default, select Reset Label.

Warning: Don’t change the text inside the < and > symbols.

Edit the text style

You can change the style of the default and hover text for task list items.

Default text

• Family. Allows you to choose a default text font for the list item.
• Weight. Allows you to set the baseline boldness of the default text for the list item.
• Size. Allows you to choose the font size of the default text for the list item.
• Color. Allows you to choose a different color for the default text for the list item, set with a hexadecimal, RGB values, visual color selector, or color slider.
• Text Decoration. Allows you to add or remove underlining for the default text for the list item and the subtitle text below it.
• Space Between. Allows you to edit the space between the items in your task list.
• Letter spacing. Allows you to edit the spacing between letters of the default text for the list item.

Hover text

• Weight. Allows you to set the baseline boldness of the hover text for the list item.
• Color. Allows you to choose a different color for the hover text for the list item, set with a hexadecimal, RGB numbers, visual color selector, or color slider.
• Text Decoration. Allows you to add or remove underlining for the hover text for the list item and the subtitle text below it.

Edit the subtitle text

Subtitles are shown under each step in the task list. You can change the subtitle wording outside of the < and > symbols. For example, you might want to change the “step” to “task”: Completed task 1 of 2. To revert the subtitle text back to the default, select Reset Subtitle.

Warning: Don’t change the text inside the < and > symbols.