Customize a checklist experience

Who can use this feature?

A checklist is type of experience that uses an interactive widget. A checklist guides users through a set of steps that they should complete. Checklists are fully customizable. You can adjust everything from the content and design of the checklist, to the actions and rules around how each checklist item should be completed.

The checklist lifecycle

Every checklist follows the same lifecycle.

1. Launch

When a launch method occurs, the checklist launches and appears within your app for the user. You can deliver checklists to your users based on user segmentation, the URLs they visit, by sending them a link, or by calling an SDK function.

2. Track user interactions

Once the checklist has launched, a user can begin to interact with the checklist. They can click to toggle each checklist item complete (if you've enabled that setting), launch a tour that guides them through completing a checklist item, or click any links that you've included in your checklist. Users can also opt to hide or reopen the checklist at any time so that it doesn't block their view of the platform.

In addition to interacting directly with the checklist, Totango listens for the user to complete any goals that you've associated with checklist items. If the user completes a relevant goal, the associated checklist item will be marked complete automatically.

3. Show completion message

Once the user has completed all of the checklist items within a checklist, they are shown a completion message. This completion message can be customized to your liking so that you can congratulate the user on their progress and guide them towards what they should focus on next.

4. Close

After the completion message is shown, the checklist will close and disappear for good. 

Checklist components

  1. Checklist container: The main component of a checklist. It includes all of the content blocks and checklist items that a user interacts with. This is also the component that a user first sees when a checklist is initially launched.
  2. Open button: The component of a checklist that is shown when a user clicks to close the main Checklist Container. In this closed state, the Open Button appears and can be clicked by a user to open the checklist back up to its Checklist Container component. You can customize the color, text, font, and size of the Open Button so that it matches the branding on your website.
  3. Completion message: The component of a checklist that is shown once every item of the checklist has been completed. It typically includes a congratulatory message along with a call to action of what a user should do next now that they've completed the checklist.

The following block types can be added to a checklist container or completion message (where noted):

Block type Description

Checklist Item

A task for a user to complete in your application

Checklist item blocks can be added to your Checklist in order to build a list of tasks that users should complete. You can optionally connect an experience to the checklist to launch. You can either mark a checklist complete when the user reaches a goal (automatic) or allow the user to mark items complete themselves (manual).

Once all checklist items are completed, the checklist will show a completion message to the user and ultimately close.

Available only for checklist container components.

Content Block

A text block with rich-formatting capabilities

Content blocks can be used to fill your checklist with text, images, and even videos. You can fill up your block with content and format it however you please.

Available for checklist container and completion message components.

Spacer

A block used for adding vertical spacing between blocks

Spacer blocks can be used to add vertical spacing between two blocks so that your checklist feels less cramped. You can adjust the height of each spacer block and add as many spacers as you'd like throughout your checklist to achieve the perfect design.

Available for checklist container and completion message components.

Divider

A block used for adding a horizontal line between blocks

Divider blocks can be used to add clear separation between two blocks by dividing them with a horizontal line. This line can be styled to your liking by adjusting its thickness and color. Also, you can specify how much spacing the divider should have above and below it.

Available for checklist container and completion message components.

Progress

A progress bar that displays the percentage of checklist items completed

A progress block shows users the percentage of checklist items that they've completed within a checklist. The progress bar that appears can be customized in terms of its color and labels. Only one progress bar can be added to any given checklist.

Available only for checklist container components.

 

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request