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.