> ## Documentation Index
> Fetch the complete documentation index at: https://sleekplan.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# JavaScript SDK overview

> Control the Sleekplan widget from your own code: open or close views, toggle the launcher button, add HTML triggers, and configure session behavior

The `$sleek` object is the global entry point for all programmatic control over the Sleekplan widget — opening views, hiding the launcher, and managing the session lifecycle from your own JavaScript. For identifying your users, see [User setup](/sdk/user-setup); for reacting to widget events, see [Events](/sdk/events); for popup-specific triggers, see [Popups](/sdk/popups).

## Widget controls

### Open the widget

`$sleek.open(view, callback)` opens the widget. Without arguments it opens the home screen. Pass a `view` string to jump directly to a specific screen, and an optional callback that fires once the view is rendered.

```javascript theme={"system"}
// Open the home screen
$sleek.open();

// Open the feedback submission form
$sleek.open('feedback.add');

// Open a specific feedback item by ID
$sleek.open('feedback.48121', function () {
  console.log('Feedback item 48121 is now open');
});

// Open the changelog
$sleek.open('changelog');

// Open the notifications list
$sleek.open('notifications');

// Show a specific update popup by ID
$sleek.open('popup.update.123');
```

Available view values:

| View                | Description                                                                |
| ------------------- | -------------------------------------------------------------------------- |
| `home`              | Default home screen with the feedback item list                            |
| `feedback.add`      | Opens the new feedback submission form                                     |
| `feedback.{ID}`     | Opens a specific feedback item — replace `{ID}` with the item's numeric ID |
| `changelog`         | Opens the changelog view                                                   |
| `notifications`     | Opens the notification list for the current user                           |
| `popup.update.{ID}` | Displays a specific update popup by ID                                     |

### Close the widget

`$sleek.close()` hides the widget if it is currently open. It does not remove the widget from the page.

```javascript theme={"system"}
$sleek.close();
```

### Toggle the widget

`$sleek.toggle(view)` alternates between `open()` and `close()`. Pass an optional `view` string to open to a specific screen when the widget is closed.

```javascript theme={"system"}
// Toggle the widget open/closed
$sleek.toggle();

// Toggle, opening to the changelog if the widget is closed
$sleek.toggle('changelog');
```

### Show and hide the launcher button

Use `$sleek.showButton()` and `$sleek.hideButton()` to control the default launcher button independently of the widget itself.

```javascript theme={"system"}
// Show the launcher button if it is hidden
$sleek.showButton();

// Hide the launcher button without closing the widget
$sleek.hideButton();
```

<Tip>
  Use `hideButton()` when you want to trigger the widget exclusively through your own UI elements, keeping the interface clean.
</Tip>

### Shut down the SDK

`$sleek.shutdown()` fully removes the SDK from the page. It performs three actions:

1. Clears all user data and resets the session
2. Unbinds all custom event listeners
3. Removes the widget from the DOM

```javascript theme={"system"}
$sleek.shutdown();
```

<Warning>
  `shutdown()` is irreversible for the current page load. To restore the widget, reload the page with the SDK script included.
</Warning>

## HTML attributes (no-code triggers)

### Widget triggers

Add these attributes to any clickable element — button, link, or otherwise — to open the widget when the element is clicked.

```html theme={"system"}
<!-- Opens the widget on the home screen -->
<button data-sleek>Give feedback</button>

<!-- Opens the widget with the feedback view -->
<button data-sleek-feedback>Submit feedback</button>

<!-- Opens the widget at the changelog -->
<button data-sleek-changelog>What's new</button>

<!-- Opens the widget at the roadmap -->
<button data-sleek-roadmap>View roadmap</button>

<!-- Shows a small "tiny" changelog popup near the element -->
<button data-tiny-changelog>Latest update</button>
```

### Badge counters

Attach these attributes to any element to have the SDK automatically populate it with the current notification count.

```html theme={"system"}
<!-- Total notifications (system + changelog updates) -->
<span data-badge></span>

<!-- System/feedback notification count only -->
<span data-badge-feedback></span>

<!-- Changelog update count only -->
<span data-badge-changelog></span>
```

The SDK writes the count as the `data-count` attribute value on the element; style and display it however you like in your CSS.

## SPA support and rebinding

The SDK observes browser history changes and rebinds HTML attribute triggers automatically for most single-page application (SPA) frameworks. If you dynamically insert new elements with `data-sleek-*` or `data-badge-*` attributes after the initial page load, call `$sleek.rebind()` to register them.

```javascript theme={"system"}
// After dynamically rendering new elements with data-sleek-* attributes:
$sleek.rebind();
```

## Advanced configuration

Set these globals **before** the SDK script tag to customize its behavior.

### `window.SLEEK_SETTINGS`

Merge or override widget settings client-side. Also accepts a `session` object forwarded during session initialization.

```javascript theme={"system"}
window.SLEEK_SETTINGS = {
  // Widget settings overrides
  session: {
    // Session initialization properties
  }
};
```

### `window.SLEEK_COOKIE_DOMAIN`

Force the cookie domain the SDK uses. This is useful when your app spans multiple subdomains and you want a single shared session.

```javascript theme={"system"}
// Share the session across all subdomains of example.com
window.SLEEK_COOKIE_DOMAIN = '.example.com';
```

### `window.SLEEK_DATA`

Extend product data that the SDK fetches from the backend. This is rarely needed and intended for advanced use cases only.

### Storage behavior

The SDK selects its storage mechanism in this order:

1. `localStorage` (preferred)
2. Cookies (fallback)
3. In-memory store (last resort — sessions do not persist across page reloads)

<Note>
  In highly restricted browser environments (strict content security policies, ad blockers), both `localStorage` and cookies may be unavailable. The SDK will still function within the session using its in-memory store, but user sessions will not persist between page reloads.
</Note>

<CardGroup cols={2}>
  <Card title="User setup" icon="user" href="/sdk/user-setup">
    Identify your users with `$sleek.setUser()` and manage session data.
  </Card>

  <Card title="Events" icon="bell" href="/sdk/events">
    Listen to widget lifecycle and authentication events with `$sleek.on()`.
  </Card>
</CardGroup>