JavaScript SDK: Checklist UI component

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.

From SDK v19.0.0, a checklist without a dark attribute follows the widget's color scheme when Adapt to dark / light mode is turned on. See Dark mode.

TypeScript (React, Vue, Angular)

Since SDK version 16.0 the gleap package ships JSX type definitions for <gleap-checklist>, so no manual declaration is needed. If you added a global.d.ts declaration for it earlier, you can remove it.

The shipped types require @types/react 18.2.6 or newer (17.0.51+ / 16.14.41+ on older React lines). If your project shows errors like Type '"span"' is not assignable to type 'ElementType' after installing, run npm i -D @types/react@latest.

The shipped types accept any attribute. If you want autocomplete for the checklist attributes, you can narrow them in your own global.d.ts:

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 {};

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