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.

​

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.

​

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

​

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

​

Available parts