Show CSAT, NPS, and feedback popups

A popup is the widget opened as a small anchored card instead of the full side panel. It lets you ask a question at the moment it is relevant, without sending the visitor into the feedback board. Call $sleek.showPopup() to trigger one.

$sleek.showPopup(type, message, data);

string

default:"feedback"

required

Which popup to show. See Popup types. Append an ID with a dot to target a specific record, for example survey.812 or update.4471.

string | false

Replaces the popup’s headline. Pass false (or omit it) to use the wording configured in your workspace.

object

Extra values for the popup, appended to its route as a query string. The recognized keys depend on the type.

showPopup() returns false and does nothing while the full widget is already open, so a popup can never cover a session the visitor is in the middle of. Call $sleek.close() first if you need it to appear regardless.

Type	What it asks
`satisfaction`	A CSAT rating, followed by an optional comment
`promoter`	An NPS score from 0 to 10, followed by an optional comment
`feedback`	A short form for submitting a new feedback item
`changelog`	Asks the visitor to subscribe to changelog updates by email
`update.{ID}`	One specific changelog entry, as an announcement
`survey.{ID}`	One of your multi-question surveys

Satisfaction (CSAT)

// Default wording from your workspace settings
$sleek.showPopup('satisfaction');

// With your own question
$sleek.showPopup(
  'satisfaction',
  'How satisfied are you with your experience today?'
);

// Group this rating under a key so you can segment the results
$sleek.showPopup(
  'satisfaction',
  'How was your checkout experience?',
  { data: 'checkout' }
);

string

A grouping key stored with the rating. Ratings without one are grouped under default. Use a stable, low-cardinality value such as checkout, onboarding, or support so each group has enough responses to read.

Promoter (NPS)

The NPS popup is wider than the others, since it renders the full 0 to 10 scale.

$sleek.showPopup('promoter');

$sleek.showPopup(
  'promoter',
  'How likely are you to recommend us to a colleague?'
);

Feedback

$sleek.showPopup('feedback');

$sleek.showPopup(
  'feedback',
  'Do you have ideas for improving this feature?'
);

Changelog subscription

The changelog popup asks the visitor whether they want new changelog entries by email, and subscribes them on the spot. It is the right prompt after someone has read a release note, not a way to display one.

$sleek.showPopup('changelog');

$sleek.showPopup(
  'changelog',
  'Want the release notes in your inbox?'
);

Announcement

update.{ID} renders one changelog entry as a card, with its image, type, title, and call to action. This is the form Sleekplan itself uses to announce a release to a visitor.

// Announce changelog entry 4471
$sleek.showPopup('update.4471');

// Stack up to three more entries under it
$sleek.showPopup('update.4471', false, { add: '4468,4462' });

string

A comma-separated list of additional changelog IDs to show beneath the main entry. At most three are rendered.

Survey

// Open survey 812
$sleek.showPopup('survey.812');

Automatic announcements

Separately from anything you trigger, the widget can open an announcement popup on its own when a changelog entry marked as an announcement is newer than what the visitor has seen. This is what makes release notes reach users who never open the widget, and it is configured per changelog entry in the dashboard, not from the SDK. Two things bound it: only entries from the last 30 days are eligible, and once one has been shown, no further announcement appears for a short cool-down period. To suppress automatic announcements on specific pages, set the session flag before the SDK loads:

// No announcement popup will open by itself on this page
window.SLEEK_SETTINGS = {
  session: { skip_announcements: true }
};

Login screens, checkout flows, and full-screen editors are the usual candidates. See Configuration for the full list of session flags, including skip_notifications for badge counts.

Trigger popups at the right moment

Popups work best tied to something the visitor just did rather than fired on page load.

After a key action is completed

function onExportComplete() {
  $sleek.showPopup(
    'satisfaction',
    'How was your export experience?',
    { data: 'export' }
  );
}

After a time-based delay

// Ask for feedback after a minute on the page
setTimeout(function () {
  $sleek.showPopup(
    'feedback',
    'Any thoughts on what you have seen so far?'
  );
}, 60000);

On the first visit after a release

if (currentUser.isFirstLoginAfterRelease) {
  $sleek.showPopup('update.4471');
}

Avoid calling showPopup() on every page load. Overuse trains users to dismiss prompts without reading them, which lowers both your response rate and the quality of what you get back.

React to the outcome

Every popup emits events you can listen for, so you can record the answer in your own system or stop asking the same person again.

$sleek.on('satisfaction_vote', function (event) {
  analytics.track('CSAT submitted', { vote: event.detail.vote });
});

$sleek.on('promoter_vote', function (event) {
  analytics.track('NPS submitted', { score: event.detail.vote });
});

See Events for the full list, including popup_init and popup_state_change.

Configuration

Suppress automatic announcements and badge counts per page.

Events

Listen for votes, comments, and popup state changes.

Reference

Authentication

Show CSAT, NPS, and feedback popups

Satisfaction (CSAT)

Promoter (NPS)

Feedback

Changelog subscription

Announcement

Survey

Automatic announcements

Trigger popups at the right moment

React to the outcome

Configuration

Events

​Popup types

​Satisfaction (CSAT)

​Promoter (NPS)

​Feedback

​Changelog subscription

​Announcement

​Survey

​Automatic announcements

​Trigger popups at the right moment

​React to the outcome

Configuration

Events

Popup types

Satisfaction (CSAT)

Promoter (NPS)

Feedback

Changelog subscription

Announcement

Survey

Automatic announcements

Trigger popups at the right moment

React to the outcome