JavaScript SDK overview

The $sleek object is the global entry point for programmatic control over the Sleekplan widget. It exists as soon as the install snippet has run, and every method below is callable on it. For identifying users see User setup, for load-time globals see Configuration, for reacting to widget activity see Events, and for survey and announcement prompts see Popups.

Call methods after the SDK has initialized. The safest hook is the sleek:init event, which fires once the widget settings have loaded: document.addEventListener('sleek:init', function () { /* $sleek is ready */ }). See Events.

Method reference

Method	Purpose
`open(view, callback)`	Open the widget, optionally on a specific view
`close(skipAnimation)`	Close the widget
`toggle(view)`	Open if closed, close if open
`showPopup(type, message, data)`	Open a popup without the full widget. See Popups
`showTiny(type)`	Open the compact changelog or feedback panel anchored to your trigger
`expandView(expanded)`	Switch the open widget between the standard and wide panel
`setTheme(mode)`	Set the color theme to `light`, `dark`, or `device`
`showButton()` / `hideButton()`	Show or hide the launcher button
`setUser(user)`	Identify the current user. See User setup
`resetUser()`	Sign the current user out
`addMetadata(meta)`	Attach custom data to the current user
`get(path)`	Read notification counts and the signed-in user
`on(event, callback)`	Subscribe to an SDK event. See Events
`rebind()`	Re-scan the page for `data-sleek-` and `data-badge-` elements
`loadTool(type, callback)`	Launch the screen capture tool and receive the result
`push_trigger(event, detail)`	Dispatch a `sleek:*` event yourself
`shutdown()`	Remove the widget from the page
`version()`	The SDK version string

$sleek.open(view, callback) opens the widget. Without arguments it opens the home screen. Pass a view string to jump straight to a screen, plus an optional callback that runs once the view has rendered and the panel is visible.

// 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');

Dots in the view string are path separators, so feedback.48121 resolves to the /feedback/48121 route inside the widget.

View	Screen
`home`	Home screen, whichever module you configured as the landing view
`feedback`	The feedback board
`feedback.add`	New feedback form
`feedback.{ID}`	A single feedback item
`feedback.edit.{ID}`	Edit form for a feedback item the user owns
`roadmap`	The roadmap
`changelog`	The changelog list
`changelog.{ID}`	A single changelog entry
`notifications`	The signed-in user’s notification list
`account`	The signed-in user’s account screen
`popup.{type}`	A popup view. Use `showPopup()` instead
`tiny.changelog` / `tiny.feedback`	A compact anchored panel. Use `showTiny()` instead

You can also pass an object with a page key, which is what the data-sleek-* HTML triggers use internally:

$sleek.open({ page: 'changelog' });

A query string on the view is passed through to the widget route untouched. That is how showPopup() hands a custom title and payload to a popup, and you can use the same form directly.

$sleek.open('popup.feedback?title=How%20is%20the%20new%20editor%3F');

Link straight to a feedback item

The SDK also reads the page URL on load. If the hash contains sp-item, it opens that feedback item automatically, which makes feedback items shareable from anywhere in your app.

https://yourapp.com/dashboard#sp-item=48121

$sleek.close() hides the widget and returns the launcher button. The widget stays on the page, so reopening it is instant. Pass true to skip the closing animation, which is useful when you are closing in response to something else appearing.

$sleek.close();

// Close immediately, no fade
$sleek.close(true);

$sleek.toggle(view) alternates between open() and close(). The optional view is used only when the widget is currently closed.

$sleek.toggle();
$sleek.toggle('changelog');

Show a compact panel

$sleek.showTiny(type) opens a small panel positioned next to your data-tiny-changelog trigger element instead of the full side panel. If no trigger element is on the page, the panel falls back to the widget’s configured position.

// Compact changelog, anchored to the [data-tiny-changelog] element
$sleek.showTiny('changelog');

string

default:"changelog"

changelog or feedback.

showTiny() returns false and does nothing while the full widget is already open. Close it first.

Expand the panel

$sleek.expandView(expanded) switches the open widget between the standard panel and a wider one. Below 730px viewport width the expanded panel becomes full screen.

// Widen the panel
$sleek.expandView(true);

// Back to the standard width
$sleek.expandView(false);

If the user has collapsed the panel themselves, that preference is remembered and expandView(true) respects it rather than overriding them.

Set the color theme

$sleek.setTheme(mode) changes the widget’s color theme for the current page load, overriding the theme configured in your workspace. Use it to keep the widget in step with a theme toggle in your own product.

$sleek.setTheme('dark');
$sleek.setTheme('light');

// Hand control back to the visitor's OS preference
$sleek.setTheme('device');

string

default:"device"

light, dark, or device. Any other value is treated as device.

It works both before and after the widget has been opened: called early, the theme is queued and applied when the widget mounts. The change is not persisted, so the workspace setting applies again on the next page load.

Show and hide the launcher button

$sleek.showButton();
$sleek.hideButton();

Use hideButton() when you drive the widget entirely from your own UI. To keep the launcher from ever being built, set enable_button: false in window.SLEEK_SETTINGS instead, which avoids a brief flash of the default button.

Shut down the SDK

$sleek.shutdown() signs the current user out, then, one second later, removes the launcher, the widget iframe, and the capture tool iframe from the page and releases the singleton.

$sleek.shutdown();

shutdown() cannot be undone within the page load, and it does not remove event listeners you registered with on(). To bring the widget back, reload the page.

Read session state

$sleek.get(path) returns the notification counts and the signed-in user as the SDK currently knows them. Called without arguments it returns the whole object; pass a dot path to read one value.

$sleek.get();
// {
//   notifications: { system: 2, updates: 1 },
//   user: {
//     user_id: 91422,
//     data: {
//       full_name: 'Jane Smith',
//       username: 'janesmith',
//       email: 'jane@example.com',
//       img: 'https://...',
//       notify: 1,
//       notifications: { mention: true, subscribed: true, changelog: false },
//       segments: ['enterprise'],
//       user_id: 91422
//     }
//   }
// }

// Read a single value
$sleek.get('notifications.updates');   // 1
$sleek.get('user.data.email');         // 'jane@example.com'

user.user_id and user.data are both false while no user is signed in. Counts are 0 until the first session response arrives, so read them from a sleek:init handler rather than immediately after the snippet.

Capture a screenshot

$sleek.loadTool('capture', callback) opens Sleekplan’s full-screen capture tool over your page, hiding the widget while it runs. The callback receives the result once the user finishes or an empty object if they cancel. This is the same tool the widget’s own attachment button uses.

$sleek.loadTool('capture', function (result) {
  // The user cancelled: the callback runs with an empty object
  if (!result || !result.data) return;

  // result.type is 'image', result.data is a JPEG data URL
  document.querySelector('#preview').src = result.data;
});

string

image for a screen capture.

string

The capture as a JPEG data URL, ready to attach to a form or upload.

string

default:"capture"

capture is the only supported tool.

HTML attributes (no-code triggers)

Add these attributes to any clickable element to open the widget on click. The SDK binds the first matching element for each attribute, so use one trigger of each kind per page.

<!-- 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>

<!-- Opens the compact changelog panel next to this element -->
<button data-tiny-changelog>Latest update</button>

Badge counters

Attach these attributes to any element and the SDK keeps its unread count up to date.

<!-- Total notifications (system + changelog updates) -->
<span data-badge></span>

<!-- Feedback activity only -->
<span data-badge-feedback></span>

<!-- Changelog updates only -->
<span data-badge-changelog></span>

The SDK writes the number into the element’s data-count attribute and removes the attribute when the count is zero, so [data-count]::after is the hook to style. To suppress badge counts entirely on a page, use session.skip_notifications.

SPA support and rebinding

The SDK patches history.pushState and listens for popstate, so it rebinds the HTML triggers and refreshes badge counts on client-side navigation, and it re-runs the session ping whenever the URL changes. If you render trigger or badge elements after that point (inside a modal or a lazily mounted component, for example), call $sleek.rebind() once they are in the DOM.

$sleek.rebind();

Dispatch your own events

$sleek.push_trigger(name, detail) dispatches a sleek:{name} CustomEvent on document, with detail as its payload. It is the same mechanism the SDK uses internally, so anything listening through $sleek.on() receives it. Use it to route your own signals through one channel.

$sleek.push_trigger('checkout_completed', { plan: 'enterprise' });

$sleek.on('checkout_completed', function (event) {
  console.log(event.detail.plan); // 'enterprise'
});

Version

$sleek.version(); // '1.0'

Configuration

The window.SLEEK_* globals, session flags, and storage behavior.

User setup

Identify users with setUser() and attach metadata.

Events

Every event the SDK emits and the payload each one carries.

Popups

CSAT, NPS, feedback, and announcement prompts.

Reference

Authentication

JavaScript SDK overview

Method reference

Widget controls

Open the widget

Link straight to a feedback item

Close the widget

Toggle the widget

Show a compact panel

Expand the panel

Set the color theme

Show and hide the launcher button

Shut down the SDK

Read session state

Capture a screenshot

HTML attributes (no-code triggers)

Widget triggers

Badge counters

SPA support and rebinding

Dispatch your own events

Version

Configuration

User setup

Events

Popups

​Method reference

​Widget controls

​Open the widget

​Link straight to a feedback item

​Close the widget

​Toggle the widget

​Show a compact panel

​Expand the panel

​Set the color theme

​Show and hide the launcher button

​Shut down the SDK

​Read session state

​Capture a screenshot

​HTML attributes (no-code triggers)

​Widget triggers

​Badge counters

​SPA support and rebinding

​Dispatch your own events

​Version

Configuration

User setup

Events

Popups

Method reference

Widget controls

Open the widget

Link straight to a feedback item

Close the widget

Toggle the widget

Show a compact panel

Expand the panel

Set the color theme

Show and hide the launcher button

Shut down the SDK

Read session state

Capture a screenshot

HTML attributes (no-code triggers)

Widget triggers

Badge counters

SPA support and rebinding

Dispatch your own events

Version