Skip to main content

Checklist Settings

Display Mode​

Checklists can be displayed in two modes:

Floating (default)​

The checklist renders as a fixed overlay in a corner of the page. Users can expand and collapse it.

When using floating mode, you can configure:

  • Checklist position - Which corner of the page the checklist appears in: Bottom-right, Bottom-left, Top-right, or Top-left

  • Checklist start - How the checklist initially appears:

    • Start checklist minified - Shows a beacon button that users click to expand the checklist
    • Start checklist immediately - The checklist opens expanded right away
    • Start checklist manually - The checklist only appears when triggered via code

  • Beacon position (when using minified or manual start) - Bottom-right or Bottom-left

  • Hide beacon (when using manual start) - Hide the beacon entirely, so the checklist can only be started via the Client SDK: window.Produktly.startChecklist({checklistId: id})

Embedded​

The checklist renders inline inside a container element on your page. This is useful when you want the checklist to appear inside your app's UI (e.g. in an onboarding sidebar).

When using embedded mode, provide a Container CSS selector that identifies where the checklist should render. For example, #onboarding-sidebar.

Styling​

Select a pre-made theme or set custom colors:

  • Theme color - The primary accent color
  • Text color - Auto-calculated for contrast, but can be overridden
  • Completed color - The color used for completed checklist items (default: green)

Text Customization​

All checklist text can be customized and supports localization:

  • "Start Onboarding" button text
  • "Continue Onboarding" button text
  • "Checklist completed!" text
  • "Show checklist" button text
  • "Finish and hide checklist" button text
  • Beacon progress "completed" text
  • "Mark as completed?" text
  • Mark as completed confirmation text

Targeting​

Checklists support the full targeting rules engine.

Note: Targeting rules can't be used when the checklist is set to be started manually. In that case, start the checklist with the JavaScript SDK or change the checklist start setting.