--- title: "JavaScript SDK: Checklist UI component" description: "Embed onboarding checklist components in your application with the Gleap JavaScript SDK. Follow the integration code examples." url: https://docs.gleap.ai/en/articles/432-javascript-sdk-checklist-ui-component collection: "UI components" updated: 2026-11-01 language: en --- # JavaScript SDK: Checklist UI component Embed onboarding checklist components in your application with the Gleap JavaScript SDK. Follow the integration code examples. 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. ```html ``` 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. > **Tip:** 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. ```html ``` ### 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](https://gleap-developer-docs.gleap.help/en/articles/416-javascript-sdk-dark-mode). ![Example checklist rendered in dark mode.](https://staticfiles.gleap.io/p613b5dd730aed737108f87ab/9dnX27hfR576PKGen2tB5lCv3VwnzHYadKbUHvkHsz8ZbMlBvXv4Q8P3n3hqjeIi9YeROfbIgcG.png) ## TypeScript (React, Vue, Angular) Since SDK version 16.0 the `gleap` package ships JSX type definitions for ``, 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`. > **Tip:** The shipped types accept any attribute. If you want autocomplete for the checklist attributes, you can narrow them in your own `global.d.ts`: ```ts declare global { namespace JSX { interface IntrinsicElements { "gleap-checklist": React.DetailedHTMLProps< React.HTMLAttributes, HTMLElement > & { floating?: string; dark?: string; info?: string; progressbar?: string; checklistid?: string; sharedKey?: string; }; } } } export {}; ``` ## Custom CSS The `` 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 ```css gleap-checklist::part(info-title) { color: #9e87e8; font-size: 20px; } gleap-checklist::part(progress-bar-progress) { background-color: #9e87e8; } ``` > **Tip:** Replace colors and styles as needed to match your brand. ### Available parts

Part name

Description

content

Wrapper of the entire checklist content

info

Section with title, description, sender

info-title

Checklist title

info-description

Subtitle/description text

sender

Sender container

sender-image

Sender profile image

sender-name

Sender name

progress-labels

Labels showing progress information

progress-label-primary

Main progress label

progress-label-secondary

Secondary progress label

progress-bar

Container for the progress bar

progress-bar-progress

The inner fill of the progress bar

tasks

Container for all tasks

task

Wrapper for a single task

task-header

Clickable task header

task-badge

Task number badge

task-header-title

Task title text

task-header-chevron

Chevron icon for expand/collapse

task-body

Expandable container for task content

task-body-inner

Inner container inside task body

task-body-content

Descriptive text inside task body

task-action

Container for action buttons

task-mark-done

Container for the "Mark as done" action

## Related - [JavaScript SDK: AI Agent UI component](https://docs.gleap.ai/en/articles/433-javascript-sdk-ai-agent-ui-component.md) - [JavaScript SDK setup](https://docs.gleap.ai/en/articles/393-javascript-sdk-setup.md) - [JavaScript SDK: Code snippet](https://docs.gleap.ai/en/articles/394-javascript-sdk-code-snippet.md) - [JavaScript SDK: User identity](https://docs.gleap.ai/en/articles/395-javascript-sdk-user-identity.md) - [JavaScript SDK: Callbacks](https://docs.gleap.ai/en/articles/396-javascript-sdk-callbacks.md)