Interact List
/ blog 
/ embed-checklist 

Styling embedded checklists 🖌️

Getting Started

Embedding a checklist on "Interact List" is a breeze. 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 the platform hosting your checklist, you may want to adjust 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).

⭐ UPDATE

In response to the growing demand for styling checklists, 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. Save/Resume progress (Keep track of User checklist progress and allow them to continue from where they stopped previously).

  7. 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

By default, the checklist snippet includes a small script that automatically calculates and sets the checklist to the full required height. This will save you a considerable amount of time by preventing you from having to adjust container sizes.

If you don't want your embedded checklist to be full height (you want to manage your own height and include a scroll bar) just copy the iframe code.

I hope this guide has helped.

Contact support if you require further assistance.