Sleekplan

https://www.sleekplan.com/docs
Admin
Sleekplan is a feedback and roadmap management platform that enables companies to collect user...
Tokens:11,095
Snippets:119
Trust Score:9.1
Update:5 months ago
Show doc for...
Tokens:
Raw
### HTML Structure for Widget Installation

Source: https://www.sleekplan.com/docs/install/widget.html

Example of where to place the Sleekplan widget JavaScript code within your HTML file's head section.

```html
<html>
    <head>
        ...
        <!-- Embed $sleek widget -->
        <script type="text/javascript">...</script>
    </head>
    <body>
        ...
    </body>
</html>
```

--------------------------------

### Install Node.js JWT Library

Source: https://www.sleekplan.com/docs/single-sign-on

Install the 'jsonwebtoken' package for Node.js to generate JWTs. This is a prerequisite for server-side token generation.

```bash
npm install --save jsonwebtoken

```

--------------------------------

### Install JWT Library for .NET

Source: https://www.sleekplan.com/docs/single-sign-on

Command to add the JWT library to a .NET project.

```shell
dotnet add package System.IdentityModel.Tokens.Jwt

```

--------------------------------

### Embed Widget with User Token

Source: https://www.sleekplan.com/docs/single-sign-on

Include the Sleekplan widget script along with the user token initialization. This is the recommended approach for initial setup.

```html
<!-- User Token -->
<script type="text/javascript">
window.SLEEK_USER = {
    token: 'XXXXXXX',
}
</script>

<!-- Sleekplan Widget Code -->
<script type="text/javascript">window.$sleek=[];window.SLEEK_PRODUCT_ID=XY;(function(){d=document;s=d.createElement("script");s.src="https://client.sleekplan.com/sdk/e.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();</script>
```

--------------------------------

### Install Ruby JWT Library

Source: https://www.sleekplan.com/docs/single-sign-on

Add the 'jwt' gem to your project's Gemfile to enable JWT generation in Ruby. Refer to the ruby-jwt GitHub repository for installation details.

```ruby
# see: https://github.com/jwt/ruby-jwt
gem 'jwt'


```

--------------------------------

### Install JWT Library for Java

Source: https://www.sleekplan.com/docs/single-sign-on

Instructions for adding the JWT library dependency for Java projects.

```shell
# see: https://mvnrepository.com/artifact/io.jsonwebtoken/jjwt/0.7.0
```

--------------------------------

### Install PHP JWT Library

Source: https://www.sleekplan.com/docs/single-sign-on

Install the firebase/php-jwt library using Composer for PHP-based JWT generation. This is required for server-side authentication.

```bash
composer require firebase/php-jwt

```

--------------------------------

### Install Python JWT Library

Source: https://www.sleekplan.com/docs/single-sign-on

Install the PyJWT library using pip for Python-based JWT generation. This is necessary for server-side token creation.

```bash
pip install PyJWT

```

--------------------------------

### Webhook Payload Example for Item Creation

Source: https://www.sleekplan.com/docs/webhooks

An example of a webhook payload for the `item.create` event. It details the newly created feedback item, including its title, description, status, and associated user information.

```json
{
    "product_id" : 5456534244,
    "action" : "item.create",
    "data" : {
        "feedback_id": "3",
        "product_id": "1",
        "title": "Show/search for similar ideas as you בו [...]",
        "description": "This can help us avoid users posting a [...]",
        "status": "open",
        "trend": "0",
        "type": "user-interface",
        "total_up": "9",
        "total_down": "0",
        "total_sum": "9",
        "total_comments": "0",
        "total_ratio": "9",
        "total_subscriber": "1",
        "scoring": "0.55",
        "effort": "1",
        "created": "2020-05-22 16:49:00",
        "updated": "2020-05-22 16:49:00",
        "user": {
            "user_id": "4",
            "admin_id": 0,
            "data_name": "lennishq",
            "data_mail": "",
            "data_img": "https://storage.sleekplan.com/..."
        }
    },
    "timestamp" : "1506985999999"
}
```

--------------------------------

### Generate SSO Token in Ruby

Source: https://www.sleekplan.com/docs/single-sign-on

Use this Ruby code to generate a JWT token for user authentication with Sleekplan. Ensure the JWT library is installed.

```ruby
PrivateKey = 'PRIVATE_SSO_KEY'

def createSleekplanToken( localUser )
	UserData = {
		# Required: The mail address of the user. Required for the login.
		mail: localUser.mail,
		# Optional: Your internal user identification
		id: localUser.id,
		# Optional: Username 
		# (lowercase letters / no special characters or blank spaces)
		name: localUser.name,
		# Optional: URL to user's avatar image
		img: localUser.img,
		# Optional: The weighting of the user
		weight: 4,
		# Optional: Additional metadata as array
		meta: {
			comapnyName: localUser.cName,
			companyAdress: localUser.cAdress,
		}
	}

	# return JSON Web Token
	JWT.encode(UserData, PrivateKey, 'HS256')
end
```

--------------------------------

### Set User Token in Single-Page Apps

Source: https://www.sleekplan.com/docs/single-sign-on

Use the `setUser` method to pass a JSON Web Token after the Sleekplan SDK is installed. Refer to the SDK documentation for more details on the `setUser` method.

```javascript
$sleek.setUser ( {
    token: 'XXXXXXX',
} );
```

--------------------------------

### Configure Claude Desktop MCP Server

Source: https://www.sleekplan.com/docs/mcp

Add this JSON configuration to your `claude_desktop_config.json` file to connect Claude Desktop to the Sleekplan MCP server.

```json
{
  "mcpServers": {
    "sleekplan": {
      "url": "https://mcp.sleekplan.com/mcp"
    }
  }
}

```

--------------------------------

### Initialize Sleekplan SDK with Event Listener

Source: https://www.sleekplan.com/docs/single-sign-on

Wait for the `sleek:init` event before calling SDK methods to ensure the library is fully loaded. This prevents common initialization issues in SPAs.

```javascript
window.document.addEventListener('sleek:init', () => {
	$sleek.setUser ( {token: 'XXXXXXX'} );
}, false);
```

--------------------------------

### Connect to MCP Server with mcp-remote module

Source: https://www.sleekplan.com/docs/mcp

Use the `mcp-remote` module with npx for clients that do not support Streamable HTTP, ensuring backwards compatibility with the Sleekplan MCP server.

```bash
npx -y mcp-remote https://mcp.sleekplan.com/mcp

```

--------------------------------

### Add Sleekplan MCP Server via Claude CLI

Source: https://www.sleekplan.com/docs/mcp

Use the Claude CLI to add the Sleekplan MCP server. This command configures the server for use within Claude Code sessions.

```bash
claude mcp add sleekplan --transport streamable-http https://mcp.sleekplan.com/mcp

```

--------------------------------

### Iframe with Full Desktop View

Source: https://www.sleekplan.com/docs/install/iframe.html

Embed Sleekplan in a full desktop-ready view by setting the 'full' parameter to 'true'.

```html
<iframe src="https://embed-{PRODUCT_ID}.sleekplan.app/?full=true#/"></iframe>
```

--------------------------------

### Troubleshooting

Source: https://www.sleekplan.com/docs/javascript-sdk

Common issues and their solutions when integrating or using the Sleekplan JavaScript SDK.

```APIDOC
## Troubleshooting

### Common Errors and Solutions

* **Error: `$sleek already exist, make sure you do not load the $sleek SDK twice`**
  * **Cause:** The Sleekplan SDK script has been included more than once in your project.
  * **Solution:** Ensure the SDK script tag appears only once in your HTML.

* **The launcher button doesn’t show up**
  * **Possible Causes:**
    * The workspace is private, and the user is not authenticated.
    * The launcher button feature might be disabled in the product's settings.
  * **Solution:** Verify workspace privacy settings, user authentication status, and product settings.

* **Widget opens but doesn’t authenticate**
  * **Cause:** For Single Sign-On (SSO) or private boards, a valid `token` must be provided via `SLEEK_USER` or the `$sleek.sso` callback.
  * **Solution:** Ensure the authentication token is correctly configured.

* **No cookies/localStorage available**
  * **Cause:** Extremely restrictive environments might block both `localStorage` and cookies.
  * **Solution:** The SDK will fall back to an in-memory store, but session data will not persist across page reloads.

* **CSP/Ad blockers issues**
  * **Cause:** Content Security Policy (CSP) or ad/tracker blockers might be preventing the SDK from loading or communicating.
  * **Solution:** Add the SDK file URL and `https://api-client.sleekplan.com/` to your allowed list in your CSP configuration and ad/tracker blocker settings.
```

--------------------------------

### Advanced Configuration

Source: https://www.sleekplan.com/docs/javascript-sdk

Configure Sleekplan SDK behavior and settings using global JavaScript variables before the SDK script is loaded.

```APIDOC
## Advanced Configuration

### Global Variables
Optional global variables can be defined in your HTML before loading the Sleekplan SDK script to customize its behavior:

* `window.SLEEK_SETTINGS` (object): Allows merging or overriding widget settings client-side. It can also include a `session` object to be forwarded during session initialization.
* `window.SLEEK_DATA` (object): Used to extend product data received from the backend (rarely needed).
* `window.SLEEK_COOKIE_DOMAIN` (string): Specifies the exact cookie domain the SDK should use (e.g., `.example.com`).

### Storage Behavior
The SDK prioritizes storage mechanisms in the following order: `localStorage`, cookies, and finally an in-memory temporary store. Session configuration might be cached in `sessionStorage` for faster loading.

### Routing Helpers
* `open('popup.update.123')`: A helper function to display a specific update popup by its ID. Paths with dots are automatically translated to internal routes.

### Single Page Applications (SPAs)
The SDK automatically observes history changes and rebinds itself for most SPA scenarios. If you dynamically add triggers or badges after initial load, call `$sleek.rebind()` to ensure they are recognized.
```

--------------------------------

### Open Specific Widget Views

Source: https://www.sleekplan.com/docs/javascript-sdk

Use the `open` method with a path string to navigate directly to specific views or popups within the widget. Dots in the path are automatically translated to internal routes.

```javascript
$sleek.open('popup.update.123');
```

--------------------------------

### Generate SSO Token in Java

Source: https://www.sleekplan.com/docs/single-sign-on

This Java code demonstrates how to create a JWT token for Sleekplan SSO. It includes required and optional user data fields.

```java
import java.util.HashMap;

import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;

public class CreateSSOToken {
  private static final String PrivateKey = "PRIVATE_SSO_KEY";

  public static String createToken(User user) throws Exception {
    HashMap<String, Object> userData = new HashMap<String, Object>();

    // Required: The mail address of the user. Required for the login.
    userData.put("mail", user.email);
    // Optional: Your internal user identification
    userData.put("id", user.id);
    // Optional: Username 
		// (lowercase letters / no special characters or blank spaces)
    userData.put("weight", user.name);
    // Optional: URL to user's avatar image
    userData.put("img", user.avatarURL);
    // Optional: The weighting of the user
    userData.put("img", user.avatarURL);
    // Optional: Additional metadata as key/value pairs
    userData.put("meta", [META]);

    return Jwts.builder()
               .setClaims(userData)
               .signWith(SignatureAlgorithm.HS256, PrivateKey.getBytes("UTF-8"))
               .compact();
  }
}
```

--------------------------------

### Iframe with Kanban Roadmap Style

Source: https://www.sleekplan.com/docs/install/iframe.html

Customize the roadmap display to use the 'kanban' style by setting the 'roadmap_style' parameter.

```html
<iframe src="https://embed-{PRODUCT_ID}.sleekplan.app/?roadmap_style=kanban#/roadmap/"></iframe>
```

--------------------------------

### Basic Iframe Embedding

Source: https://www.sleekplan.com/docs/install/iframe.html

Use this basic iframe structure to embed Sleekplan. Replace {PRODUCT_ID} with your actual Sleekplan product ID.

```html
<iframe src="https://embed-{PRODUCT_ID}.sleekplan.app__/#/changelog/__"></iframe>
```

--------------------------------

### Fetch and Return SSO Token

Source: https://www.sleekplan.com/docs/single-sign-on

Implement the SSO callback function to fetch a user token from your server using `fetch` and then pass it to the widget via the callback. Ensure your server endpoint provides the token in a JSON response.

```javascript
$sleek.sso = function( callback ) {
	// load the current user token from your server side script
	fetch('https://yourserver.com/your_sso_script/')
		.then(response => response.json())
		.then((data) => {
            // get your userToken
			let userToken = data.ssoToken;
			// return the generated token to the widget
			callback( {token: userToken} );
		});
};
```

--------------------------------

### Initialize User Token on Page Load

Source: https://www.sleekplan.com/docs/single-sign-on

Set the user token globally when the page loads. Ensure this object is placed before the widget snippet.

```javascript
window.SLEEK_USER = {
    token: 'XXXXXXX',
}
```

--------------------------------

### Configure Sleekplan SDK with Global Variables

Source: https://www.sleekplan.com/docs/javascript-sdk

Override default widget settings or provide session information by defining global JavaScript variables before the SDK script loads. This allows for client-side customization and data forwarding.

```javascript
window.SLEEK_SETTINGS = {
  // ... widget settings
  session: {
    // ... session data
  }
};
```

```javascript
window.SLEEK_DATA = { /* ... extend product data */ };
```

```javascript
window.SLEEK_COOKIE_DOMAIN = '.example.com';
```

--------------------------------

### Generate SSO Token in C#

Source: https://www.sleekplan.com/docs/single-sign-on

This C# code generates a JWT token for Sleekplan SSO, including user claims and signing credentials.

```csharp
using System.IdentityModel.Tokens.Jwt;
using System.Security.Claims;
using System.Text;
using Microsoft.IdentityModel.Tokens;

public class LocalUser {
    public string Mail { get; set; }
    public string Id { get; set; }
    public string Name { get; set; }
}

public static class SsoHelper {
    private const string PrivateKey = "PRIVATE_SSO_KEY";

    public static string CreateSsoToken(LocalUser localUser) {
        var claims = new List<Claim> {
            new Claim("mail", localUser.Mail),
            new Claim("id", localUser.Id ?? ""),
            new Claim("name", localUser.Name ?? ""),
            new Claim("weight", "4")
        };

        var key = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(PrivateKey));
        var creds = new SigningCredentials(key, SecurityAlgorithms.HmacSha256);

        var token = new JwtSecurityToken(
            claims: claims,
            signingCredentials: creds
        );

        return new JwtSecurityTokenHandler().WriteToken(token);
    }
}
```

--------------------------------

### Open the widget

Source: https://www.sleekplan.com/docs/javascript-sdk

Opens the Sleekplan widget. You can specify a view to open directly to a specific section or let it default to the home screen. A callback function can be provided to execute once the widget is loaded.

```APIDOC
## Open the widget

### Description
Opens the feedback widget. If no view is specified, it opens to the home screen. You can pass a specific view to create a feedback item instantly.

### Method Signature
`open(view, callback)`

### Parameters
*   **view** (_optional_, string): Specifies the view to open. Possible values include 'home', 'feedback.add', 'feedback.{ID}', 'changelog', 'notifications'.
*   **callback** (_optional_, function): A function to be executed once the widget is fully loaded.

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

--------------------------------

### Generate Python SSO Token

Source: https://www.sleekplan.com/docs/single-sign-on

Generate a JWT for Sleekplan SSO using Python. Replace 'PRIVATE_SSO_KEY' with your secret key and ensure the localUser object has the required attributes.

```python
import jwt

# your private SSO key
PrivateKey = 'PRIVATE_SSO_KEY'

def create_sleekplan_token( localUser ):
	user_data = {
		# Required: The mail address of the user. Required for the login.
		'mail': localUser.mail,
		# Optional: Your internal user identification
		'id': localUser.id,
		# Optional: Username 
		# (lowercase letters / no special characters or blank spaces)
		'name': localUser.name,
		# Optional: URL to user's avatar image
		'img': localUser.img,
		# Optional: The weighting of the user
		'weight': 4,
		# Optional: Additional metadata as array
		'meta': {
			'comapnyName': localUser.cName,
			'companyAdress': localUser.cAdress,
		}
	}

	# return JSON Web Token
	return jwt.encode(user_data, PrivateKey, algorithm='HS256')


```

--------------------------------

### Listen to Sleekplan Events via Window Object

Source: https://www.sleekplan.com/docs/javascript-sdk

For events that occur before the Sleekplan SDK is fully initialized, you can listen to custom events dispatched on the window object. This allows for early event handling.

```javascript
window.document.addEventListener('sleek:open', callback, false);
```

--------------------------------

### Open Widget with Specific View and Callback

Source: https://www.sleekplan.com/docs/javascript-sdk

Opens the feedback widget to a specific view (e.g., feedback item by ID) and executes a callback function once the widget is loaded.

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

--------------------------------

### Generate PHP SSO Token

Source: https://www.sleekplan.com/docs/single-sign-on

Generate a JWT for Sleekplan SSO using PHP. Replace 'PRIVATE_SSO_KEY' with your secret key and populate the $localUser array with user details.

```php
use \Firebase\JWT\JWT;

// your private SSO key
$key = 'PRIVATE_SSO_KEY';

function createSSOToken( $localUser ) {
	$userData = [
		// Required: The mail address of the user. Required for the login.
		'mail' 	=> $localUser['mail'],
		// Optional: Your internal user identification
		'id' 	=> $localUser['id'],
		// Optional: Username 
		// (lowercase letters / no special characters or blank spaces)
		'name' 	=> $localUser['name'],
		// Optional: URL to user's avatar image
		'img' 	=> $localUser['imgStr'],
		// Optional: The weighting of the user
		'weight' => 4,
		// Optional: Additional metadata as array
		'meta' 	=> [
			'comapnyName' 	=> $localUser['cName'],
			'companyAdress' => $localUser['cAdress'],
		],
	];

	// return JSON Web Token
	return JWT::encode($userData, $key, 'HS256');
}

```

--------------------------------

### Show feedback button

Source: https://www.sleekplan.com/docs/javascript-sdk

Makes the default feedback button visible if it has been previously hidden.

```APIDOC
## Show feedback button

### Description
Shows the default feedback button if it is currently hidden.

### Method Signature
`showButton()`

### Example
```javascript
$sleek.showButton();
```
```

--------------------------------

### Register Event Listener with Sleekplan SDK

Source: https://www.sleekplan.com/docs/javascript-sdk

Use the `on` method to register a callback function that will be executed when a specific event is triggered by the widget. This is useful for reacting to user interactions or widget state changes.

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

--------------------------------

### Generate Node.js SSO Token

Source: https://www.sleekplan.com/docs/single-sign-on

Generate a JWT for Sleekplan SSO using Node.js. Ensure you replace 'PRIVATE_SSO_KEY' with your actual secret key and provide the necessary user data.

```javascript
// load jwt library
const jwt = require('jsonwebtoken');
// your private SSO key
const key = 'PRIVATE_SSO_KEY';

function createSSOToken( localUser ) {
    const userData = {
		// Required: The mail address of the user. Required for the login.
		mail: localUser.mail,
		// Optional: Your internal user identification
		id: localUser.id,
		// Optional: Username 
		// (lowercase letters / no special characters or blank spaces)
		name: localUser.name,
		// Optional: URL to user's avatar image
		img: localUser.imgStr,
		// Optional: The weighting of the user
		weight: 4
		// Optional: Additional metadata as key/value pairs
		meta: {
			comapnyName: localUser.cName,
			companyAdress: localUser.cAdress
		}
    }

	// return JSON Web Token
    return jwt.sign(userData, key, { algorithm: 'HS256' });
}

```

--------------------------------

### Show Popup for User Feedback

Source: https://www.sleekplan.com/docs/javascript-sdk

Displays a popup to collect user feedback, satisfaction ratings, or prompt for changelog interaction. Custom messages and settings can be provided.

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

--------------------------------

### Event Listener

Source: https://www.sleekplan.com/docs/javascript-sdk

Register a callback function to be executed when a specific action or event occurs within the Sleekplan widget.

```APIDOC
## on( action, callback )

### Description
Registers a callback function to listen for specific events triggered by the Sleekplan SDK.

### Method Parameters
* **action** (string, _required_): The name of the event to listen for.
* **callback** (function, _optional_): The function to execute when the specified event is triggered.

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

### Listening to Events Before Initialization
For events that occur before the SDK is fully initialized, you can use the `window.document.addEventListener` method with a prefixed event name.

### Example (Pre-initialization)
```javascript
window.document.addEventListener('sleek:open', callback, false);
```

### Supported Events
| Event Name              | Return Value   | Description                                      |
|-------------------------|----------------|--------------------------------------------------|
| `init`                  | -              | Triggered after SDK initialization.              |
| `open`                  | -              | Triggered after the widget is opened.            |
| `close`                 | -              | Triggered after the widget is closed.            |
| `navigation_before_enter` | `current_view` | Triggered before a new screen is entered.        |
| `navigation_after_enter`  | `current_view` | Triggered after screen animation is completed.   |
| `widget_init`           | -              | Triggered after the widget is loaded the first time. |
| `user_auth_required`    | -              | Triggered if user interaction requires authentication. |
| `user_auth_start`       | -              | Triggered after the authentication process starts. |
| `user_auth_confirm`     | -              | Triggered when a user needs to confirm their email. |
| `user_auth_completed`   | -              | Triggered after the authentication process completes. |
| `user_auth_error`       | -              | Triggered on any authentication issue.           |
```

--------------------------------

### Set User Information for Current Session

Source: https://www.sleekplan.com/docs/javascript-sdk

Sets user details such as email, ID, name, image, and weight for the current session. This can also be used for single sign-on via a token.

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

--------------------------------

### Show popup box

Source: https://www.sleekplan.com/docs/javascript-sdk

Displays a popup to users to request feedback, satisfaction ratings, or to show changelog information. Custom messages, data, and settings can be provided.

```APIDOC
## Show popup box

### Description
Asks users for feedback, satisfaction, or to show changelog information via a popup.

### Method Signature
`showPopup(type, message, data, settings)`

### Parameters
*   **type** (_required_, string): The type of popup. Accepts 'satisfaction', 'feedback', or 'changelog'.
*   **message** (_optional_, string): A custom message to display in the popup.
*   **data** (_optional_, object): Currently supports `{data: "group name"}` for CSAT popups.
*   **settings** (_optional_, object): Custom settings for the popup.

### Example
```javascript
$sleek.showPopup(
    'satisfaction',
    'What was your experience so far?',
    data,
    settings
);
```
```

--------------------------------

### Set user information

Source: https://www.sleekplan.com/docs/javascript-sdk

Sets user information for the current session, allowing for customization with details like email, name, and custom attributes. This is crucial for personalized feedback and SSO.

```APIDOC
## Set user information

### Description
Sets user information for the current session. This method allows you to pass custom values for the user.

### Method Signature
`setUser(data)`

### Parameters
*   **data** (_required_, object): An object containing user information.
    *   **mail** (string): Email address of the user.
    *   **token** (string): A JSON Web Token for Single sign-on (SSO).
    *   **id** (string|number): Internal identification value for the user.
    *   **name** (string): User's name (lowercase, no special characters or spaces).
    *   **img** (string): URL of the user's image.
    *   **weight** (int {1-10}): Weighting for user feedback importance and impact score calculation.
    *   **changelog_subscribed** (bool): Automatically subscribe the user to the changelog.

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

--------------------------------

### Asynchronous SSO Token Retrieval

Source: https://www.sleekplan.com/docs/single-sign-on

Assign a function to the `$sleek.sso` property to handle authentication for unauthenticated users. The function must accept a callback that returns the user token.

```javascript
$sleek.sso = function( callback ) {...};
```

--------------------------------

### MCP Server Address

Source: https://www.sleekplan.com/docs/mcp

The base URL for the Sleekplan MCP server. This is used for initial configuration in various clients.

```plaintext
https://mcp.sleekplan.com/mcp

```

--------------------------------

### HTML Attributes (No-Code Triggers)

Source: https://www.sleekplan.com/docs/javascript-sdk

Utilize data attributes on HTML elements to trigger Sleekplan widget actions without writing custom JavaScript.

```APIDOC
## HTML Attributes

### Widget Triggers
Add these attributes to HTML elements to control the Sleekplan widget's behavior:

* `data-sleek`: Opens the widget to the home screen.
* `data-sleek-feedback`: Opens the widget with feedback options enabled.
* `data-sleek-changelog`: Opens the widget displaying the changelog.
* `data-sleek-roadmap`: Opens the widget displaying the roadmap.
* `data-tiny-changelog`: Displays a small changelog popup near the element.

### Badge Counters
Attach these attributes to elements to display notification counts:

* `data-badge`: Shows the total count of system and update notifications.
* `data-badge-feedback`: Shows the count of system notifications.
* `data-badge-changelog`: Shows the count of changelog updates.

The SDK manages the text content of badge counters using the `data-count` attribute.
```

--------------------------------

### Embed Sleekplan Widget JavaScript

Source: https://www.sleekplan.com/docs/install/widget.html

This is the primary JavaScript snippet to load the Sleekplan widget. Insert it into the <head> section of your HTML, or before the closing </body> tag.

```javascript
<script type="text/javascript">window.$sleek=[];window.SLEEK_PRODUCT_ID=XY;(function(){d=document;s=d.createElement("script");s.src="https://client.sleekplan.com/sdk/e.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();</script>
```

--------------------------------

### Open Widget with HTML Attributes

Source: https://www.sleekplan.com/docs/javascript-sdk

Utilize HTML `data-sleek` attributes on elements to trigger specific actions within the Sleekplan widget without writing custom JavaScript. This is useful for creating simple navigation or feedback triggers.

```html
<a href="#" data-sleek>Open Widget</a>
```

```html
<a href="#" data-sleek-feedback>Open Feedback</a>
```

```html
<a href="#" data-sleek-changelog>Open Changelog</a>
```

```html
<a href="#" data-sleek-roadmap>Open Roadmap</a>
```

```html
<a href="#" data-tiny-changelog>Show Tiny Changelog</a>
```

--------------------------------

### Generate Ruby SSO Token

Source: https://www.sleekplan.com/docs/single-sign-on

This section is incomplete in the source. It indicates the need to require the 'jwt' library for generating SSO tokens in Ruby, but the function implementation is missing.

```ruby
require 'jwt'


```

--------------------------------

### Rebind Sleekplan SDK Triggers After DOM Updates

Source: https://www.sleekplan.com/docs/javascript-sdk

If you dynamically add new triggers or badges to the DOM after the SDK has loaded, call the `rebind` method to ensure these new elements are recognized and functional.

```javascript
$sleek.rebind();
```

--------------------------------

### Toggle the widget

Source: https://www.sleekplan.com/docs/javascript-sdk

Toggles the visibility of the Sleekplan widget, switching between open and closed states. Optionally, a specific view can be provided.

```APIDOC
## Toggle the widget

### Description
Toggles between closing and opening the widget. You can optionally specify a view to open.

### Method Signature
`toggle(view)`

### Parameters
*   **view** (_optional_, string): The view to open if toggling to the open state.

### Example
```javascript
$sleek.toggle('feedback.add');
```
```

--------------------------------

### Shutdown SDK

Source: https://www.sleekplan.com/docs/javascript-sdk

Removes the Sleekplan SDK from the page, clearing user data, unbinding listeners, and removing the widget.

```APIDOC
## shutdown()

### Description
Cleans up and removes the Sleekplan SDK instance from the current session. This method performs the following actions:
1. Clears all user data and resets the user session.
2. Unbinds all custom event listeners that were registered.
3. Removes the Sleekplan widget from the DOM.

### Method
`shutdown()`
```

--------------------------------

### Shutdown Sleekplan SDK

Source: https://www.sleekplan.com/docs/javascript-sdk

Call the `shutdown` method to completely remove the Sleekplan SDK from the page. This action clears user data, unbinds listeners, and removes the widget.

```javascript
$sleek.shutdown();
```

--------------------------------

### Add Custom Metadata

Source: https://www.sleekplan.com/docs/javascript-sdk

Adds or updates metadata for the current session. The meta object can have any structure.

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

--------------------------------

### Webhook Payload General Format

Source: https://www.sleekplan.com/docs/webhooks

This is the general JSON structure for a webhook POST body. It includes the product ID, the action that triggered the webhook, the event data, and a timestamp.

```json
{
    "product_id": 5456534244,
    "action"    : action_key, // The action key (e.g. item.create, comment.update, vote.create)
    "data"      : data, // The webkook payload
    "timestamp" : timestamp // UNIX timestamp of the event

}
```

--------------------------------

### Add metadata

Source: https://www.sleekplan.com/docs/javascript-sdk

Adds or updates metadata associated with the current session. This method accepts an object with any structure, allowing for flexible addition of contextual information.

```APIDOC
## Add metadata

### Description
Adds or updates metadata for the current session. This method accepts an object with additional information.

### Method Signature
`addMetadata(meta)`

### Parameters
*   **meta** (_required_, object): An object containing metadata to add or update.

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

--------------------------------

### Custom Buttons to Trigger Widget

Source: https://www.sleekplan.com/docs/install/widget.html

Use these HTML attributes on buttons to trigger specific Sleekplan widget actions like opening feedback, changelog, or roadmap. Ensure the default button is disabled in widget settings.

```html
<!-- This button triggers the widget to open -->
<button data-sleek>
    Feedback
</button>

<!-- This button also triggers the widget to open -->
<button data-sleek-feedback>
    Feedback
</button>

<!-- Another button to open the changelog -->
<button data-sleek-changelog>
    Changelog
</button>

<!-- Another button to open the roadmap -->
<button data-sleek-roadmap>
    Roadmap
</button>
```

--------------------------------

### Rebind SDK

Source: https://www.sleekplan.com/docs/javascript-sdk

Rebinds the $sleek SDK to all custom data attributes. This is useful for updating event listeners on elements that have been dynamically added or removed from the DOM.

```APIDOC
## Rebind

### Description
Rebinds the $sleek SDK to all custom data attributes. This method is useful for updating event listeners on elements that are dynamically added or removed.

### Method Signature
`rebind()`

### Example
```javascript
$sleek.rebind();
```
```

--------------------------------

### Custom Button with Notification Badge

Source: https://www.sleekplan.com/docs/install/widget.html

Add a notification badge to your custom buttons using the `data-badge` attribute to display unread counters for general notifications, feedback, or changelog updates.

```html
<!-- Custom changelog button with unread counter -->
<button data-sleek-changelog data-badge-changelog>
    Changelog
</button>
```

--------------------------------

### Iframe with Hidden UI Elements

Source: https://www.sleekplan.com/docs/install/iframe.html

Hide specific UI elements like filter, navigation, or footer by providing them as an array to the 'hide_elements' parameter.

```html
<iframe src="https://embed-{PRODUCT_ID}.sleekplan.app/?hide_elements[]=filter&hide_elements[]=navigation&hide_elements[]=footer#/feedback/"></iframe>
```

--------------------------------

### Close the widget

Source: https://www.sleekplan.com/docs/javascript-sdk

Hides the Sleekplan widget if it is currently open. This action does not remove the widget's reference from the page.

```APIDOC
## Close the widget

### Description
Hides the feedback widget if it is open. This method does not remove the widget reference.

### Method Signature
`close()`

### Example
```javascript
$sleek.close();
```
```

--------------------------------

### Display Notification Badges with HTML Attributes

Source: https://www.sleekplan.com/docs/javascript-sdk

Attach `data-badge` attributes to elements to display notification counts for different categories. The SDK automatically updates the badge text using the `data-count` attribute.

```html
<span data-badge></span>
```

```html
<span data-badge-feedback></span>
```

```html
<span data-badge-changelog></span>
```

--------------------------------

### Hide feedback button

Source: https://www.sleekplan.com/docs/javascript-sdk

Hides the default feedback button from the user interface.

```APIDOC
## Hide feedback button

### Description
Hides the default feedback button.

### Method Signature
`hideButton()`

### Example
```javascript
$sleek.hideButton();
```
```

--------------------------------

### Reset user data / Logout user

Source: https://www.sleekplan.com/docs/javascript-sdk

Clears all user data and resets the user session. This should be called when a user logs out of your application to ensure session cookies are cleared.

```APIDOC
## Reset user data / Logout user

### Description
Clears all user data and resets the user session. This method should be called when a user logs out of your application to clear their session.

### Method Signature
`resetUser()`

### Example
```javascript
$sleek.resetUser();
```
```
Tokens:
Raw