Checklist
If you are building a longer demo (15+ steps) or demo-ing multiple solutions, we recommend splitting this into multiple Flows. In this case, a Checklist will be used to let viewers choose which Flow to engage with. Here are a few examples of demos that include Checklists.
Within your Product Demo, select + Create Checklist to get started. Most Checklists will incorporate 4-6 Tasks that start different Flows. When using a Checklist, we recommend keeping individual Flows to 5-9 steps each.
This tutorial demonstrates how to tie multiple Flows together with a Checklist.
A blank checklist will appear with the option to add a title and various Tasks. Tasks are the individual components of a Checklist, which appear when the Checklist is expanded. Similar to how Buttons behave in a Flow, Tasks in a Checklist can support a variety of Click Actions.
Click Action | Description |
|---|---|
Start a Flow (most common) | Link the task to a Flow in your demo. Select from any Flows within your demo. |
Navigate to URL | Takes the end user to an external link (e.g., a Knowledge Base or Sign-up page) |
Mark as Converted | For reporting purposes (i.e., not visible to the end user), this indicates that an end user has clicked a CTA. |
Within the Checklist Settings, click Edit Checklist to open a drop-down menu. Select Edit Checklist Launcher to edit the checklist launcher text and to add a remaining count.
From the Checklist editor, click Settings to view additional options.
Here, you can add a Backdrop, determine if you would like to automatically launch the checklist upon Flow Start or Flow Completion, as well as select to reset the checklist each time the demo is loaded.
Once a checklist has been created and associated with a demo, you can choose how you would want a user to engage with the checklist.
If you want a user to see the checklist immediately, you will use the Launch checklist on flow start option found in the Checklist Settings.
Add Open Checklist to any Beacon, Trigger, or Button in your flow to prompt a Checklist to open at a specific point in your demo, including after the last step. Open Checklist can be paired with any condition including a Timer Trigger.
Check out Carta's demo which pairs the Open checklist action with the "Get Started" button on the first step.
To edit your Checklist or Checklist Launcher background color and border, go to Themes > Select the Theme you'd like to edit > use the drop down in the top left corner to select Checklist (or Checklist Launcher) > Select Dialog. You can also edit the Font in your Checklist directly above Dialog.
You can further customize the checklist launcher under Checklist launcher in the righthand menu in Themes. From here, you can change the location of the checklist and edit the padding and border radius.
Make sure to Publish & Exit after making changes to your Checklist.
While viewers can manually expand a Checklist at any point, you can also add an action to any Beacon, Trigger or Button in your flow to prompt a Checklist to open automatically at a certain point, including after the last step. "Open Checklist" can be paired with any condition including "Timer".
When testing a Product Demo that contains a Checklist, you may notice that the Checklist tasks are already completed or include a strikethrough. This is due to your browser caching each step of the demo that is previously completed.
To restart your Checklist each time, visit your Checklist Settings > Reset checklist on flow start.
