Skip to main content

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.

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; for reacting to widget events, see Events; for popup-specific triggers, see 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. 
// 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:
ViewDescription
homeDefault home screen with the feedback item list
feedback.addOpens the new feedback submission form
feedback.{ID}Opens a specific feedback item — replace {ID} with the item’s numeric ID
changelogOpens the changelog view
notificationsOpens 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. 
$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. 
// 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. 
// Show the launcher button if it is hidden
$sleek.showButton();

// Hide the launcher button without closing the widget
$sleek.hideButton();
Use hideButton() when you want to trigger the widget exclusively through your own UI elements, keeping the interface clean.

​
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
$sleek.shutdown();
shutdown() is irreversible for the current page load. To restore the widget, reload the page with the SDK script included.

​
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. 
<!-- 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. 
<!-- 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. 
// 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. 
window.SLEEK_SETTINGS = {
  // Widget settings overrides
  session: {
    // Session initialization properties
  }
};
Force the cookie domain the SDK uses. This is useful when your app spans multiple subdomains and you want a single shared session. 
// 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)
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.

User setup

Identify your users with $sleek.setUser() and manage session data.

Events

Listen to widget lifecycle and authentication events with $sleek.on().