Skip to main content

Documentation Index

Fetch the complete documentation index at: https://sleekplan.com/docs/llms.txt

Use this file to discover all available pages before exploring further.

The JavaScript widget is the recommended way to embed Sleekplan in your product. Installation takes fewer than five minutes and requires only basic access to your site’s HTML.
1

Find your snippet

Log in to Sleekplan and go to Settings → Widget. Your personal code snippet is shown there and looks like this:
<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>
The SLEEK_PRODUCT_ID value is unique to your product — leave it as-is when you paste the code.
2

Add it to your HTML

Place the snippet immediately before the closing </head> tag:
<html>
  <head>
    <!-- your existing head content -->

    <!-- Sleekplan widget -->
    <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>
  </head>
  <body>
    <!-- your page content -->
  </body>
</html>
If you cannot edit <head>, place the snippet before </body> instead.
If the widget does not appear on the first load, clear your browser cache and reload the page.
3

(Optional) Use your own trigger button

Disable the default button in Settings → Widget if you want to use a button from your own UI. Then add a data attribute to any HTML element to make it open the widget:
<!-- Opens the widget (default view) -->
<button data-sleek>Feedback</button>

<!-- Opens the feedback board -->
<button data-sleek-feedback>Feedback</button>

<!-- Opens the changelog -->
<button data-sleek-changelog>Changelog</button>

<!-- Opens the roadmap -->
<button data-sleek-roadmap>Roadmap</button>

​
Add a notification badge

Add a badge attribute alongside your trigger to display an unread count:
AttributeShows count for
data-badgeAll notifications
data-badge-feedbackFeedback activity (status updates, comments, mentions)
data-badge-changelogNew changelog entries
<button data-sleek-changelog data-badge-changelog>
  Changelog
</button>
After installing, control the widget with the $sleek SDK — see SDK overview, User setup, and Single Sign-On.