Listen to SDK events

The widget reports what it is doing by dispatching CustomEvents named sleek:{event} on document. $sleek.on() is a thin wrapper around addEventListener for those, so you can log an open, forward a submitted post to your own analytics, or react when a user signs in.

Register a listener

Call $sleek.on(event, callback). The callback receives the CustomEvent, and any payload is on event.detail.

$sleek.on('open', function () {
  console.log('The widget was opened');
});

$sleek.on('post_submitted', function (event) {
  console.log('New post', event.detail.post.feedback_id);
});

string

required

The event name without the sleek: prefix. See the reference below.

function

required

Receives the CustomEvent. Read the payload from event.detail, never from the first argument directly.

The callback’s first argument is the event object, not the payload. function (view) { … } gives you a CustomEvent, not a view name. Always read event.detail.

Listeners are never removed by the SDK, including by shutdown(). If you need to detach one, register it with document.addEventListener yourself and keep the reference for removeEventListener.

Listen before the SDK loads

$sleek.on() only exists once the SDK script has run. To catch the earliest events, including init, use the native API with the sleek: prefix. This works from anywhere on the page, before or after the snippet.

// Place this before the $sleek snippet
window.document.addEventListener('sleek:init', function () {
  $sleek.setUser({ mail: 'user@example.com', id: '42' });
}, false);

Event reference

Lifecycle

Event	`event.detail`	Fires when
`init`	—	Widget settings have loaded and `$sleek` is ready to use. The earliest safe hook
`build_button`	—	The launcher button has been added to the page
`loaded`	—	The widget iframe has been built and mounted by the SDK
`widget_init`	—	The widget app inside the iframe has finished starting up
`open`	—	The widget panel has finished opening
`close`	—	The widget panel has been closed

loaded and widget_init both mark the iframe being ready, reported from the two sides of it. The iframe is only built the first time the widget is opened, so neither fires on a page where the visitor never opens the widget.

Event	`event.detail`	Fires when
`navigation_before_enter`	`{ view, query }`	A new screen starts entering
`navigation_after_enter`	`{ view, query }`	The transition to the new screen has finished

$sleek.on('navigation_after_enter', function (event) {
  console.log('Now on view:', event.detail.view);
});

view is the widget’s route with the leading slash dropped, matching the view strings open() takes: feedback, feedback.48121, changelog, notifications, popup.satisfaction. The home screen reports an empty string. query is the route’s query parameters as an object.

Authentication

Event	`event.detail`	Fires when
`user_auth_required`	—	The visitor tried something that needs an account
`user_auth_start`	—	The sign-in flow has begun
`user_auth_confirm`	—	The visitor has to enter the code emailed to them
`user_auth_completed`	—	Sign-in succeeded
`user_auth_error`	—	Sign-in failed
`user_auth_set`	`{ token, user_data }`	The signed-in user’s session was set or refreshed

user_auth_set carries the visitor’s session token and profile. Do not log it or forward it to third parties.

Submissions

Event	`event.detail`	Fires when
`post_submitted`	`{ post }`	A new feedback item was created from the widget
`post_edited`	`{ post }`	An existing feedback item was edited
`post_deleted`	`{ post }`	A feedback item was deleted by its author
`satisfaction_vote`	`{ vote }`	A CSAT rating was submitted
`satisfaction_comment`	`{ comment }`	A follow-up comment was added to a CSAT rating
`promoter_vote`	`{ vote }`	An NPS score was submitted
`promoter_comment`	`{ comment }`	A follow-up comment was added to an NPS score

$sleek.on('post_submitted', function (event) {
  analytics.track('Feedback submitted', {
    feedback_id: event.detail.post.feedback_id
  });
});

Popups

Event	`event.detail`	Fires when
`popup_init`	—	A popup view has mounted
`popup_state_change`	`{ ouid, state, type, id }`	The visitor moved a popup forward, for example dismissed it or answered it

Capture tool

Event	`event.detail`	Fires when
`tools_result`	`{ type, data }`	The capture tool returned an image
`tools_close`	—	The capture tool was closed without a result

Use $sleek.loadTool() rather than these events directly; it handles both outcomes in one callback.

Examples

$sleek.on('open', function () {
  analytics.track('Sleekplan widget opened');
});

$sleek.on('close', function () {
  analytics.track('Sleekplan widget closed');
});

Sync your own UI with the signed-in user

$sleek.on('user_auth_completed', function () {
  // The SDK's view of the session is now up to date
  var user = $sleek.get('user');
  if (user.user_id) {
    showFeedbackHistoryLink(user.user_id);
  }
});

$sleek.on('user_auth_error', function () {
  showToast('We could not sign you in. Please try again.');
});

SDK overview

Every method on $sleek, including push_trigger() for dispatching your own events.

Webhooks

Server-side notifications for the same activity, delivered to your backend.

Reference

Authentication

Listen to SDK events

Register a listener

Listen before the SDK loads

Event reference

Lifecycle

Navigation

Authentication

Submissions

Popups

Capture tool

Examples

Track widget usage

Sync your own UI with the signed-in user

SDK overview

Webhooks

​Register a listener

​Listen before the SDK loads

​Event reference

​Lifecycle

​Navigation

​Authentication

​Submissions

​Popups

​Capture tool

​Examples

​Track widget usage

​Sync your own UI with the signed-in user

​Handle a failed sign-in

SDK overview

Webhooks

Register a listener

Listen before the SDK loads

Event reference

Lifecycle

Navigation

Authentication

Submissions

Popups

Capture tool

Examples

Track widget usage

Sync your own UI with the signed-in user

Handle a failed sign-in