Styling embedded checklists

Getting Started

Embedding a checklist on "Interact List" is quite simple. Once you save your checklist, click the "Share" button. This will reveal a popover that provides you with two options.

blog checklist asset

Click the "Generate Snippet" button to display the customization options.

blog checklist asset

Customizing the embedded checklist

Depending on where your checklist is being hosted, you might want to check/uncheck some of these options.

You can show/hide the Title, as well as the Description. You can show/hide the progress bar. If your checklist is on a protected part of your website, you can hide the social sharing options. You can also hide the Interact List branding (currently available but soon you will require a pro plan).


There has been a demand for styling checklists, so new features have been released 🎉. Embedded checklists can make use the following styling options:

  1. Text Color (Checklist text color)

  2. Background Color (Background color of the Checklist page)

  3. Accent Color (Checkbox, Progress Bar, Link hover etc)

  4. Font Family (All Google web fonts are supported, use the exact font family name)

  5. Font Size (Must include the unit ie: 15px, 1rem etc)

  6. Remove Padding (removes max-width and horizontal padding, and allows the embedded checklist to take up full width).

Using the embed code snippet

Once you have selected your relevant options, add the code snippet to your clipboard by clicking the "Copy to clipboard" button. The snippet is now ready for you to paste into your website editor.

Responsive checklist size

The code snippet has been setup to automatically fill the container height and width. If you want your embedded checklist to fit to a specific height or width, adjust the parent container/div accordingly and the checklist will automatically adapt.

I hope this guide has helped

Contact support if you require further assistance