Page events for checklist item completion in Usetiful provide flexibility to mark checklist items as complete and guide users through key actions. Checklists motivate users to take specific steps, supported by guides or links, ensuring items are completed only after the desired interaction.



Ways to Mark Checklist Items as Complete

You can choose how a checklist item (guide or link) is marked as complete. The available options are:

  1. Click Action

  2. Page Event

  3. On the Tour Event

  4. Immediately

  5. On Visiting URL

How to Configure Completion Settings

You can configure the completion criteria for each checklist item directly in the Usetiful dashboard. Here’s how:


  1. Open the checklist in the Usetiful dashboard.
  2. Select the desired checklist item from the left-hand menu.
  3. Scroll down to the Step Completion settings.


Step Completion Options


  1. Click (Default):

    • The item will be marked as complete with a green checkmark when the user clicks on it.
      Example: A user clicks on a "View Product Tutorial" link in the checklist, and it is marked as complete.

  2. Page Event:

    • This option allows you to set a specific page event to mark the item as complete. Learn more page events here.
    • Configure the page event using these fields:
      • Page Event: Select the user action required to complete the item (e.g., click).
      • Element: Specify the HTML selector for the element the user interacts with.
      • URL (Optional): Define a specific page where the action should occur, useful when the element exists on multiple pages.
        Example: A checklist item for "Add an Item to Cart" is marked as complete once the user clicks the "Add to Cart" button on the page.

  3. On the Tour Event:

    • Mark the item as complete when a tour step is displayed.
    • Choose between marking completion on the first step or the last step of the tour.
      Example: A checklist item for "Complete the Onboarding Tour" is marked as complete when the final step of the tour is shown.

  4. Immediately:

    • The checklist item is marked as complete by default without user interaction.
      Example: A checklist item for "Welcome Message" is automatically marked as complete when the checklist loads, as no action is needed.

  5. On Visiting URL:

    • The item is marked as complete when the user visits a URL that matches specific criteria.
    • Configure the URL condition:
      • Use the URL Contains field to specify a keyword or parameter. If you fill in the specific parameter you can use characters like “?”, “=” (e.g. ?success=5; ?product etc.).
      • This ensures that the item is marked as complete when the user visits the matching URL.
        Example: A checklist item for "Visit the Pricing Page" is marked as complete once the user navigates to https://example.com/pricing.


With these options, you can create dynamic and interactive checklists tailored to your app’s workflow.



If you have any questions, please feel free to submit a ticket or write to us at [email protected]