We have designed ready to use components for Gleap checklists. You can directly embed those components into your web-apps, which makes them super powerful and increases checklist usage for onboardings a lot.

​
Usage

Import the Gleap SDK in your app. This will register a custom web component. You can then add the following web component to your app, to display your desired checklist. 
<gleap-checklist checklistid="CHECKLIST_ID_GOES_HERE"></gleap-checklist>
Simply replace the CHECKLIST_ID_GOES_HERE with the ID of your checklist.

​
Available attributes

checklistId: This is the ID of your checklist info: Show / hide the info label progressbar: Show / hide the progress bar dark: Toggle dark mode floating: Enable floating mode sharedKey: Sync a checklist accross resources

​
Shared key

Use the sharedKey property to synchronize checklist progress across multiple resources.
When any user updates a checklist that has the same sharedKey, everyone else—no matter which widget, page, or device they’re on—will immediately see the updated status.
  • Collaboration made easy | Perfect for project dashboards, sprint boards, or any place where several people need to track a single source‑of‑truth checklist.
  • One key, one state | All instances that share the key stay in lock‑step; remove the key and each checklist becomes independent again.
  • Zero extra code | Just add the same sharedKey value wherever you want progress to be shared.
Pick a descriptive key (e.g., project-128374) so it’s clear what the checklist represents.

​
Floating checklist component

If you want to add the checklist to the navbar or sidebar, just enable the floating option by adding the floating attribute. 
<gleap-checklist
  floating="true"
  checklistid="CHECKLIST_ID_GOES_HERE"
></gleap-checklist>

​
Dark mode

You can toggle the dark mode by adding the dark="true" attribute. Dark mode

​
TypeScript (React, Vue, Angular)

To enable full TypeScript support for the <gleap-checklist> custom element, add the following declaration to your global.d.ts file: 
declare global {
  namespace JSX {
    interface IntrinsicElements {
      "gleap-checklist": React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLElement>,
        HTMLElement
      > & {
        floating?: string;
        dark?: string;
        info?: string;
        progressbar?: string;
        checklistid?: string;
        sharedKey?: string;
      };
    }
  }
}

export {};
This ensures proper type checking and IntelliSense when using the custom element in your JSX.

​
Custom CSS

The <gleap-checklist> component uses Shadow DOM to encapsulate its internal styles. To allow customization, it exposes specific elements via the part attribute. You can override these styles globally using the ::part() pseudo-element.

​
Example

gleap-checklist::part(info-title) {
  color: #9e87e8;
  font-size: 20px;
}

gleap-checklist::part(progress-bar-progress) {
  background-color: #9e87e8;
}
Replace colors and styles as needed to match your brand.

​
Available parts

Part nameDescription
contentWrapper of the entire checklist content
infoSection with title, description, sender
info-titleChecklist title
info-descriptionSubtitle/description text
senderSender container
sender-imageSender profile image
sender-nameSender name
progress-labelsLabels showing progress information
progress-label-primaryMain progress label
progress-label-secondarySecondary progress label
progress-barContainer for the progress bar
progress-bar-progressThe inner fill of the progress bar
tasksContainer for all tasks
taskWrapper for a single task
task-headerClickable task header
task-badgeTask number badge
task-header-titleTask title text
task-header-chevronChevron icon for expand/collapse
task-bodyExpandable container for task content
task-body-innerInner container inside task body
task-body-contentDescriptive text inside task body
task-actionContainer for action buttons
task-mark-doneContainer for the “Mark as done” action