Developer Docs

# $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.

# Widget controls

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

# Open the widget

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 the widget

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

# Toggle the widget

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

# Show popup box

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:

  1. Clear all user data and reset the user session
  2. Unbind all custom listener
  3. Remove the widget

← Single Sign-On →