Skip to main content

Triggering a Popup Using the Sleekplan JavaScript SDK

This article explains how to programmatically trigger a Sleekplan popup using the JavaScript SDK.

Updated this week

Sometimes the built-in display rules aren't enough, and you need more precise control over when a popup shows up. Here are a few common scenarios where triggering a popup via code makes a lot of sense:

πŸ‘‰You want to show a satisfaction survey after a user completes a specific action, such as submitting a form, finishing a purchase, or closing a support ticket.

πŸ‘‰You need to delay the popup until a user has reached a certain point in your app's flow, rather than showing it on page load.

πŸ‘‰You want to A/B test different popup messages for different user segments by triggering them conditionally based on user data.

How to Trigger a Popup

To show a popup, use the $sleek.showPopup() method. Make sure the Sleekplan SDK is already loaded on your page before calling it.

Here's the basic syntax:

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

Parameters

πŸ“‹ type (string, required) : The type of popup you want to display. This tells Sleekplan which kind of survey or message to render. Supported : satisfaction, feedback or changelog.

$sleek.showPopup("satisfaction", ...);

πŸ“‹message (string, optional) : The question or text you want to display inside the popup.

$sleek.showPopup("satisfaction", "How likely are you to recommend us?", ...);

πŸ“‹data (object, optional) : An optional object that lets you pass additional data to the popup. Currently the only supported option is {data: "group name"} for CSAT popups so you can group and tag them for later insights :

$sleek.showPopup("satisfaction", "How was your experience?", { data: "support" }, ...);

πŸ“‹settings (object, optional): An optional object for additional configuration settings. If you don't need any custom settings, you can omit this parameter or pass an empty object {}.

Full Example

Here's a complete example that triggers a satisfaction after waiting for the SDK initialization :

<script>

window.document.addEventListener('sleek:init', () => {

window.$sleek.showPopup(

'satisfaction',

'How have you been?' );

}, false);

</script>

Did this answer your question?