Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.gleap.io/llms.txt

Use this file to discover all available pages before exploring further.

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