# $sleek JavaScript SDK

$sleek lets you control the Sleekplan widget from your JavaScript code. This lets you listen to Sleekplan events, as well as open, close the widget, or do fancy stuff with the widget. If not already done, the first thing you need to do is to include the widget code sniped in your application.

To control the widget there are four methods open(view, callback), close(), showButton() and hideButton() you can call via the $sleek SDK.

open(view, callback) will show the feedback widget. If you don't specify a view, it will open to the home screen. You can pass a specific view, say to create a feedback item instantly.

Example

$sleek.open( 'feedback.48121', function () { 
    console.log('feedback with ID 48121 opened'); 
} );

Method parameters

view (optional, string):
callback (optional, function): will be executed once the widget is fully loaded.

View	Description
home	Is displayed by default. Loads the list of all new feedback items
feedback.add	Opens the feedback form
feedback.{ID}	Opens a specific feedback item, replace the `{ID}` with the actual ID of the feedback item
changelog	Opens the changelog
notifications	Opens the notification list for the current user

close() will hide the feedback widget if it is open. It will not remove the feedback widget reference.

The toggle(view) method toggles between close() and open().

# Show feedback button

showButton() will show the default feedback button if it is hidden.

# Hide feedback button

hideButton() will hide the default feedback button.

# Setup user

setUser( data ) will set user information for the current session. You can also set customized values for the user via this method.

Method parameters

data (required, object)
- mail (string): Email address of the user who is logged in.
- token (string): A JSON Web Token for Single sign-on (more).
- id (string|number): set a value for users for which you have an internal identification value, such as a user ID or a token.
- name (string): set a user name. Must be in lowercase letters and should not contain any special characters or blank spaces.
- img (string): provide an image URL to be uploaded for the user.
- weight (int {1-10}): weighting gives you the ability to make feedback and interaction of one user (e.g. high revenue users) more important than others. The weighting is also used to calculate the impact score.
- changelog_subscribed (bool): automatically subscribe a suer to the changelog

Example

$sleek.setUser ( {
    mail: 'user@mail.com', 
    id: '1398',
    name: 'username',
    img: 'https://mysaasapp.com/image/user/1398.jpg',
    weight: 4
} );

If you have selected "Registration requires email verification" or "Login requires email confirmation" in your preferences and only enter an email address, the user will be asked to confirm their email address. You can bypass this by passing the token via a single sign-on (SSO). Please follow the steps in the single sign-on (SSO) section.

# Reset user data / Logout user

resetUser() allows to clear all user data and reset the user session. You should call the $sleek.shutdown method to clear your users’ session anytime they logout of your application. Otherwise, the cookie we use to track who was most recently logged in on a given device or computer remains active. This method will effectively clear out any user data that you have been passing through the $sleek SDK.

# Add metadata

If you need to provide more metadata, you can use the addMetadata( meta ) method. You can use this method to pass an object with additional information to add or update metadata. There are no limitations for the object structure.

Method parameters

meta (required, object): TBD

Example

$sleek.addMetadata( {
    company_name: 'Company LLC',
    company_mrr: 5000,
    country: 'France',
    customer_since: '06-05-2019'
} );

showPopup( type, message, data, settings ) lets you ask your users to provide some feedback.

Method parameters

type (required, string): satisfaction, feedback or changelog
message (optional, string): Custom message to be displayed.
data (optional, object): Currently the only supported option is {data: "group name"} for CSAT popups
settings (optional, object): Custom settings.

Example

$sleek.showPopup( 
    'satisfaction', 
    'What was your experience so far?', 
    data, 
    settings 
)

# Rebind

rebind() lets you rebind the $sleek SDK to all custom data attributes. The rebind method is helpful to update all event listener to elements that are removed and added again.

# Listen to events

on( action, callback ) register a callback on an event.

Method parameters

action (required, string):
callback (optional, function): will be executed once an action is triggered.

Example

$sleek.on( 'open', function(){ 
    console.log('Widget is opened') } 
)

In case you need to listen to events before the $sleek SDK is initialized, you can also listen to window sleek:eventname (e.g. window.document.addEventListener('sleek:open', callback, false);)

Events

Event	Return	Description
init	-	triggered after SDK initialization
open	-	after the widget is opened
close	-	after the widget is closed
navigation_before_enter	current_view	before a new screen is entered
navigation_after_enter	current_view	after screen animation is completed
widget_init	-	triggered after the widget is loaded the first time
user_auth_required	-	triggered if a userinteracton requieres authentication
user_auth_start	-	after authentication proccess started
user_auth_confirm	-	triggered whenever a user needs to confirm their email address
user_auth_completed	-	after authentication proccess completed
user_auth_error	-	triggered on each authentication issue

# Shutdown

shutdown() lets you remove the $sleek SDK. The shutdown method combines multiple actions:

Clear all user data and reset the user session
Unbind all custom listener
Remove the widget

# HTML attributes (no-code triggers)

data-sleek → Opens the widget (home).
data-sleek-feedback → Opens the widget (home – feedback enabled).
data-sleek-changelog → Opens the widget at the changelog.
data-sleek-roadmap → Opens the widget at the roadmap.
data-tiny-changelog → Shows a small “tiny” changelog popup near the trigger.

Badge counters you can attach to your own elements:

data-badge → Total notifications (system + updates).
data-badge-feedback → System notifications count.
data-badge-changelog → Changelog updates count.

The SDK manages the badge counter text via a data-count attribute.

# Advanced configuration

Optional globals before the SDK script:

window.SLEEK_SETTINGS (object)
- Merge/override widget settings client-side. Also supports a session object that will be forwarded with session initialization.
window.SLEEK_DATA (object)
- Extend product data coming from the backend (rarely needed).
window.SLEEK_COOKIE_DOMAIN (string)
- Force the cookie domain used by the SDK (e.g., .example.com).

Storage behavior:

The SDK prefers localStorage when available, falls back to cookies, and finally to an in-memory temp store.
Session config may be cached in sessionStorage (safe mode) to speed up loads.

Routing helpers:

open('popup.update.123') shows an update popup by ID.
Dots in paths are translated to internal routes automatically.

SPAs:

The SDK observes history changes and rebinds automatically for most cases.
If you dynamically add triggers/badges, call $sleek.rebind() after DOM updates.

# Troubleshooting

Error: $sleek already exist, make sure you do not load the $sleek SDK twice
- You’ve included the SDK script more than once.
The launcher button doesn’t show up
- Check if the workspace is private and the user isn’t authenticated.
- The product may have the launcher button disabled in settings.
Widget opens but doesn’t authenticate
- For SSO/private boards, ensure you provide a valid token via SLEEK_USER or the $sleek.sso callback.
No cookies/localStorage
- Extremely restrictive environments may block both. The SDK falls back to an in-memory store, but sessions won’t persist across reloads.
CSP/Ad blockers
- Allow the SDK file and https://api-client.sleekplan.com/ in your Content Security Policy and ad/tracker blockers.

← Iframe Single Sign-On →

# $sleek JavaScript SDK

# Widget controls

# Open the widget

# Close the widget

# Toggle the widget

# Show feedback button

# Hide feedback button

# Setup user

# Reset user data / Logout user

# Add metadata

# Rebind

# Listen to events

# Shutdown

# HTML attributes (no-code triggers)

# Advanced configuration

# Troubleshooting

# $sleek JavaScript SDK

# Widget controls

# Open the widget

# Close the widget

# Toggle the widget

# Show feedback button

# Hide feedback button

# Setup user

# Reset user data / Logout user

# Add metadata

# Show popup box

# Rebind

# Listen to events

# Shutdown

# HTML attributes (no-code triggers)

# Advanced configuration

# Troubleshooting