Want to get your Checklist published quickly? Check out check this direct link to our Quickstart video which will have the basics to get you up and running. For more in-depth information check out the Checklist webinar or written content below. For troubleshooting help, check out our FAQ below.
In this article we'll cover the following:
| Creating Checklists
|| Styling Checklists
|| Adding Custom Fonts
|| Adding Checklist Items
| Checklist Targeting
|| Testing Checklists
|| Checklist Diagnostics
|| Checklist Analytics
In this training webinar, we'll cover how to conceptualize and plan for your Checklist, including mapping out your customer journey. We'll also include a short demo of the tool and how to build it. Lastly, we'll run through the analytics of your Checklist, how to measure success and iterate.
Head to the Checklists page to 'Create a New Checklist' or edit an existing one.
After you've given your list a good name:
- Modify the primary list colors
- Chose the position and text for the Beacon
- Add your user facing header and description text
The "Beacon" is the button users click to open the Checklist dialog. Unlike other Appcues flows, the Checklist Beacon is persistent, and stays in one place until the user completes the checklist or is no longer eligible.
You can customize the content of the list dialog, including the title and description. Keep it short, and consider preceding the Checklist with an Appcues flow like a modal or slideout if you think a deeper introduction would be valuable (see the FAQ below for more info).
The Main Heading is the title that appears in the Checklist window, as shown below.
Adding a Custom Font
With the font picker in the Checklist Editor, it is possible to add your very own custom font! All you have to do is scroll down to the bottom of the options list and choose "Custom..."
Once you have this custom option selected, you'll notice two additional fields pop up. These are where you can put the information for your custom font.
These new fields will be for adding in the CSS that the checklist will use to display your new font ("Custom Font CSS") and the URL where your custom font is hosted ("Custom Font URL").
Start by adding in the CSS that the checklist will use to display your font. In this field you'll simply add in the value that would normally come after the
font-family property in your web app's CSS. For example in this case, we're trying to add in the Homemade Apple font from Google Fonts for our sister website Napcues, where family members can posts notices to others telling them when to wake them up from their nap.
The CSS to use this font in our application would normally look like this:
font-family: 'Homemade Apple', cursive;
Don't be intimidated by this! The first part is just the portion of our CSS rule that tells the browser we want to change the
font-family we're using for the checklist and the part after the colon tells the browser what font families to actually use.
Note that for this example, we have our awesome "Homemade Apple" font and then "cursive" specified. The "cursive" is a back up font in case our Google Font doesn't load. You don't have to include a backup font, but it is usually a good way to make sure that all your users have a good experience.
If you are using Google Fonts, the site is super helpful and will tell you what to write for this CSS! Just add a font on the site, click on the little box that says "Family Selected" and it will give you a slide-out with lots of helpful information that looks a something like this:
Once you've figured out what CSS to use, you can type it into the "Custom Font CSS". Your editor should now look something like this:
When you add in the CSS rule you can leave the semicolon at the end or take it out. Either one will work.
Don't be afraid that your checklist still doesn't show your custom font. It still needs to know where to get your custom font from on the world wide web. This is the url that your font is hosted at. If you're not sure what this URL is, it will usually be in your web application somewhere as a <link> tag.
If you're using Google Fonts, this is another place where the aforementioned helpful slide-out has your back. You can look at the
href that is in the <link> tag and copy paste that URL into the "Custom Font URL" box.
At this point, your checklist should be showing your custom font!
If your font still isn't showing up the right way there are a couple of things to think about.
- Make sure that the URL is actually serving up your font
- The URL that you are putting in the "Custom Font URL" field actually needs to send your font over. It should be sending something that looks like code. If you paste the URL into your browser and you get something that looks like a regular website, chances are you don't have the right link to the place where the font itself is hosted.
- Make sure that your Custom Font CSS doesn't have the
font-familypart of the rule
- We take care of the
font-familypart for you! The checklist only needs the name of your font and a backup font if you're using one to display things the right way. You're not writing the full CSS rule, just giving us the part that goes after
- We take care of the
- You have a typo in the CSS or URL
- If things still aren't displaying, go back and make sure that you don't have a typo in the CSS or the URL that you gave us. Don't worry, it happens to the best of us!
Add Checklist Items
Select “Add Checklist Item” to add additional items to your list:
Give each Item a name users will identify with. We recommend that the first item be checked off (ex. Create Account) to build some momentum. Then set up what will happen when the Item is clicked:
Note: If you'd like a flow to show only when launched from the Checklist, set that flow to 'Show Manually'.
Go to a page: Add a URL that you'd like to redirect your users to.
Launch a Flow: select the Flow a user will see once they click the list item. If the flow needs to start on a specific page, enter the URL so Appcues will redirect users to that page before showing the flow. If the URL isn't important, just add the name of the flow to be shown.
Mark Completed When...
When the user matches: the best success criteria is the completion of an action, which can be tied to an Event. When that Event occurs the Item will be checked. You can also use the completion of a Flow, or a User Property as the success criteria.
To ensure the right users will qualify to see the Checklist you can add an existing Segment, or use normal flow targeting options. Then modify where they see the Checklist, with specific path targeting and environment/domain targeting, just like your flows.
"Which page should we show this content on?"
Here you can specify the path(s) that you want your checklist to show on. For testing, there's no need to change anything in this section. You can simply set it to the path(s) you'll want the checklist to show on for your end users.
"On which environments?"
Here you can specify the domain(s) where you would like your checklist to appear. You can either publish this to anywhere your Appcues embed script is installed or select specific domains.
If you would only like to test your checklist on your staging site or your production site, you can select the appropriate domains at this point.
"Who should see this content?" (for testing, this is the important one!)
Here is where you can set your checklist to only show to users on your team (i.e. no end-users). You can do this in a couple of different ways.
The simplest way to do this is to select the fourth option: "Show only to users on my team." This will look for your Appcues ID as a user property, so anyone on your team who is logged in to both Appcues and your site will be able to view this checklist when they reach the right page(s).
You can also target your checklist to your team by using the "Specific users" option. Here, you can specify specific user properties to target. For example, you could target to specific email addresses, as shown below:
Once all of your checklist targeting is set up, go ahead and publish the checklist. You can then sign in to your platform, navigate to a page where you expect the checklist to appear, and test it!
Because of the targeting you have set up, only the people you want to see the checklist will be able to see it. Once you test the checklist and it looks good, you can change the checklist targeting configurations so that they include your end users.
A few things to keep in mind
- You will be testing the checklist as it appears for the user credentials you used to sign in to your platform. If you have already completed one or more of the checklist items, they will already be marked as complete. To test it as a new user, you would need to create a new user account on your platform.
- If one of your checklist items is a flow and it is not working, make sure that the flow is published and live on your site. If you only want to test the flow (and don't want it to be live to your end-users), you can follow the flow testing steps.
The checklist diagnostics tool allows you to do two things:
- Check whether or not certain users are eligible for your checklist (i.e. to confirm your targeting is set up correctly)
- If a user is eligible, to see how their checklist appears to them at that moment in time. In other words, you can see an exact snapshot of what items the user has or has not completed so far at that point in time.
This tool, similar to the flow diagnostics tool, is a great way to check in on the set up of your checklist. Keep in mind that the checklist is a connector: It references many different flows, user criteria, segments, and behaviors. You're unlikely to get everything right on the first try, but if something doesn't work, don't worry!
Note: You can visit the checklist testing doc for more information on testing your checklist.
How to Use the Checklist Diagnostics Tool
1. Navigate to the "Diagnostics" page
2. Enter a User ID + any page where you expect your checklist to show up
The content diagnostics page contains flow diagnostics as well as checklist diagnostics. In order to get started, you'll need to enter a user ID. If you don't know a user ID to enter, you can find one by clicking "Details" in the "User Identified" row via the Appcues debugger.
3. See the diagnostics!
Once you enter the user ID and page, you will see the checklists for which the user is eligible and ineligible. For a detailed view, simply click on the checklist row. It will expand to show the criteria Appcues uses to evaluate whether or not a user is eligible or ineligible.
It will also show you the exact state of the checklist for that user at that moment in time -- it's an exact snapshot. This is a great way of checking in on the state of the checklist for different users.
The Appcues checklist is a connector of content -- don't worry if you don't get everything right on the setup on the first time. If you are running into issues with your checklist, follow this order of operations for debugging:
- Double-check your installation. Can you see other Appcues flows? Can you launch the Appcues debugger (by right-clicking the Chrome Extension and choosing 'Debug flows on this page')? Are the correct events & properties being sent by your app?
- Double-check the target segment. Are flows targeted to that segment appearing?
- Double-check your URL and page targeting. You can use the URL testing tool to ensure pages match as expected.
- Double-check each item's completion criteria.
Do you have feedback on testing checklists? Email us firstname.lastname@example.org and let us know - we'd love to hear from you and use your thoughts to build an experience that works perfectly for you and your team!
And as always, if you have any challenges with your checklist that you can't figure out, reach out to us at email@example.com and we'll help sort things out!
After you start collecting feedback from customers, you can build reports outside of Appcues using our CSV exports or an integration. Here is a summary of the event names you may find when you export your CSV
|Event Name||Event Description|
|checklist_shown||A user has seen the Checklist|
|checklist_completed||A user has fully completed the Checklist|
|checklist_skipped||A user has selected 'No thanks' to dismiss prior to completing all items on the list|
|checklist_dismissed||A user has selected 'No thanks' to dismiss after completing all items on the checklist|
|checklist_item_started||A user has clicked an item on the Checklist|
|checklist_item_completed||A user has met the success criteria to check an item off of the list|
Each of the above events will have default properties and additional properties related to the event that will be available via the CSV download
|Property Name||Property Description|
|timestamp||The time at which this event occurred|
|userId||The id for the user that completed the event|
|currentPageTitle||Title of the page the user was on when the event was completed|
|currentPageUrl||URL of the page the user was on when the event was completed|
|sessionPageviews||Number of pages the user visited in the session in which the event was completed|
Event Specific Properties
|Event Name||Event Properties|
|checklistId||Internal Id of the checklist (not a targetable option)|
|checklistName||The name of your checklist|
|itemId||Internal identifier of the relevant checklist item|
|itemIndex||List order of the relevant item (starting at 0)|
|itemLabel||Name of the relevantchecklist item (i.e. text of checklist item)|
The FAQ is organized in the following sections:
- Targeting - using Checklist for different segments, purposes
- Default Behavior - questions about the way Checklist functions
- Troubleshooting - fixing issues with your Checklist
If your question wasn't answered above, be sure to reach out to our team at firstname.lastname@example.org for assistance.
1. Can I use the Checklist for purposes other than onboarding?
Yes! By targeting a group (or segment) other than new signups, you can create checklists for other stages of the user's lifecycle. You may want to use a checklist to introduce the new parts of a new feature, or maybe as a "checkup" after six months of use. We also like the idea of a 'Power User' checklist for those who are active, but not yet utilizing all parts of the product.
You can use URL targeting to limit these types of checklists to certain parts of your product, such as a new feature. But be sure to think in the context of the customers overall experience - the #dontoverFLOW applies to Checklists as well =)
2. Do you support tracking status by group (for example, separate organizations or accounts)?
Not at this time. The checklist state is tracked for a given user ID, regardless of what group they have selected.
3. Can we personalize the Checklist for different users, segments, or roles?
Absolutely! You can create as many Checklists as you like, such as one for each role or user persona. We recommend personalizing the experience to be more relevant to the user's situation. Ensure each segment is mutually exclusive (if you have doubt, you can include "does not match [your other segment]" in one of them to ensure the user matches only one.
4. Can we A/B test different Checklist content or configurations?
Yes, but it is not completely supported currently. To test two different Checklists, you need to target each Checklist to a segment that contains a random selection of users split between them. To accomplish this, choose or send a profile property of a random number between 0-100; then choose greater than 50 or less than 50, for example.
1. Can an item in the list ever un-check?
No. Once the user meets the criteria once, that item will be checked off for as long as that checklist remains visible. This results in predictable behavior for your users.
2. Can I prevent the user from being able to dismiss the Checklist?
Not at this time. We believe that users should be in control of their onboarding and that every user is different and learns in different ways. We've designed the Checklist to be unobtrusive enough that users won't want to dismiss it completely, and we do confirm with them before letting them remove it. However, we recognize that this is appropriate for some cases, so we are looking into it. Please let us know if you require this functionality.
3. Can I bring back the Checklist after a user dismisses it?
-Please note that this forces a specific checklist to appear for the current user. This method ignores any targeting that is set on the checklist. The checklist that has been called will take precedence over any other checklists, even if it was previously dismissed.
4. Can I launch an Appcues flow before the Checklist?
Yes! In fact, we think it's a great experience to introduce your customers with a welcome experience, then lead to a Checklist directly following. To do this, create your welcome flow, then target the Checklist Segment you create using Flow criteria to users who have seen or completed the welcome flow.
5. Can we translate the Checklist for users speaking other languages?
You can create separate Checklists for each language, with content translated into each. There are a few strings which are not yet available to replace—we are working to make them customizable in the near future. Let us know if this is the functionality you require.
6. Does the checklist work at the same time as the rest of my Appcues flows?
Yes! All of the normal Appcues features still work with flows connected to Checklists, including showing flows automatically on page load. The Checklist might re-run a flow the user already saw automatically, but that's a good thing, as it gives users the ability to restart a flow they might have skipped or forgotten about.
7. Can I customize the Color of the Checklist background?
Not at this time. If this is important for your team please let us know at 'product @ appcues.me'.
8. When is the checklist going to auto-expand or not?
The checklist should follow the following behavior:
1. Expand if it's first ever view
2. Expand if it's the first view of the session (i.e. they've opened a new tab to the site)
3. Don't expand in all other cases
1. I'm seeing items unexpectedly checked, or not checked! What do I do?
Don't worry! Follow these steps to debug:
- First, understand that the item will be checked off if the user ever met the criteria after first seeing the checklist. Items can't un-check. So, if an item is checked even though it doesn't appear as though the user should match, remember that they may have matched in the past and that could have checked the item. This is normal.
- Check and double-check the item criteria. Make sure you've selected the correct operators (Any vs. All of the criteria must match, Equals vs Greater Than). Make sure you've picked the right properties or events, and check the example values of the property to ensure it's formatted the way you expect.
- Debugger: Use the Appcues debugger (right click the Chrome Extension icon and choose, "Debug flows on this page") to view the user and their properties. View the Checklist tab to confirm if the checklist is listed as ineligible. Double-check against the rules for completion.
- Check that the events and properties are being sent from your app correctly. Read up on sending properties & events in the docs. Remember, timing matters: we'll mark the item complete exactly when the event is sent or a property is changed.
If you'd like to send general feedback with suggestions for the product or features you'd like, please reach out to us at 'email@example.com'
Still curious how our Checklist feature works?
Check out the quickstart guide below. Enjoy!