Overview

Checklists are onboarding content containing organized guides. They are generally placed on dashboards to assist and support end-users. This article will show you how to create an onboarding checklist for your web application.

How to Create Checklists

Before starting to create checklists, make sure you've done the following:

• Log in to panel.userguiding.com and download the Chrome Extension of UserGuiding.
• Create the guides that you want to display inside a checklist.
• Be sure to set the same container for guides and the Checklist.
• Guides' triggering methods are set to the custom trigger, and their status is active.

Important: If the Guide you placed inside a checklist is inactive, it won't be visible in the live version of the Checklist until you activate the Guide too.

Creating an Onboarding Checklist

To create a new Checklist, navigate to the Checklist creation page under the Widgets on the left-hand menu.

Configuration

1. Name Your Checklist

Give your Checklist a clear and recognizable name so you can easily identify it later.

2. Set the Target Page

Specify where the Checklist should appear by selecting the target page(s). In this example, the Checklist is set to display across all pages of the playground dashboard.

3. Define the Audience (User Segment)

Choose the user segment that will see the Checklist. For instance, you can make it visible to all users or only a specific group.

4. Customize Appearance

• Open by Default: The Checklist will appear already opened when a user visits the target page.
• Hide as Completed: Once all checklist goals (usually guide completions) are achieved, the Checklist will automatically hide.
• Dismiss Option: You can allow users to dismiss the Checklist and customize the dismiss button text.

5. Trigger Settings

By default, Checklists are triggered automatically. If you prefer to make it available only through the Resource Center, select the "Trigger Only from Resource Centers" option.

6. Scheduling

You can set a start and end date/time for when the Checklist should appear. Note: Scheduling only works if the Checklist is set to Active status.

7. Advanced Settings

Select the container where the Checklist will be injected. This helps control where it displays in the page structure.

Editor

Content

In this section, you'll define how your Checklist appears to users and how they interact.

1. Title & Subtitle

• Checklist Title: Add a specific and meaningful title to help users understand the purpose of the Checklist.
• Checklist Subtitle: This optional field provides additional context or instructions beneath the title.

2. Progression Option

• Enable this to allow users to track their progress with a visible progress bar and check off items as they complete them.
• If disabled, no progress bar or checkboxes will be shown.

3. Dismiss Option Configuration

Allowing users to dismiss the Checklist gives them more control over their experience. If enabled, you can customize the text for each part of the dismissal confirmation modal:

• Allowing users to dismiss the Checklist gives them more control over their experience. If enabled, you can customize the text for each part of the dismissal confirmation modal.

4. Items in the Checklist

In this step, you'll define what content appears in the Checklist—either Guides or URLs.

• Open the dropdown menu to view the list of available Guides.
• Click on a Guide’s name to add it to the Checklist.
• Once added, you can preview how each item appears in the list.
  

• You can change the display name of a Guide within the Checklist. This won’t affect the original Guide title—only how it appears to users in the Checklist interface.
• To change the order of items, use the arrow icon on the left side of each Guide name to drag and drop them into your preferred sequence.

5. Completion Logic for Checklist Items

Since Checklists are designed to reflect progress, each item needs a condition to be considered "completed" (and show a checkmark).,

• By default, a Guide is marked as complete once the user finishes it, meaning the Guide's built-in goal has been achieved.
• To customize when a Guide is considered complete:
• • Click on “Guide is Completed”.
  • In the dropdown, switch to the “Goal is Reached” option.
  • Here, you can set a specific goal condition for completion.

Tip: You can use user or browser attributes to define goal conditions, such as when a user visits a certain page or performs an action. To learn how to send custom attributes to UserGuiding, check this article.

Style

The Style tab allows you to fully customize the look and feel of your Checklist so it aligns with your brand and user experience. You can preview all changes in real time.

1. Color & Typography

• Header Color: Set the background color of the Checklist header.
• Header Text Color: Choose a text color that ensures readability.
• Header Style: Customize font size, weight, or padding as needed.
• Checklist Height: Define the vertical size of the Checklist container.
• Checklist Width: Set how wide the Checklist appears on the screen.
• Select Font: Choose a custom font that matches your brand style.

2. Launcher Settings

• Launcher Type: Select whether the Checklist launcher appears as an image, text, or a combination of both.
• Launcher Image: Upload or select an image to represent your Checklist.
• Launcher Color: Pick a background color for the launcher.
• Size: Adjust the size of the launcher.
• Position: Control where the launcher appears on the page:

3. Completion Animation

Enhance the user experience by displaying a visual animation when all Checklist items are completed.

Checklist Activation

• Save your changes in the Editor before returning to the customization.
• Then activate the checklist status, save it, and publish it on your platform.
• Go to your web app, where you targeted the Checklist, and refresh the page. You'll find your live Checklist there.
• Trigger its first Guide and complete it.
• Notice how the checklist progress bar is filled up.