Developer Docs

# Feedback Widget

So, you just signed up to Sleekpan and you are ready to add the widget code to your website? Great! This page will help you add Sleekplan to your HTML seamlessly. No need to be a developer.

Feedback Widget

First of all, this is the most common and recommended way to use Sleekplan with your application. Sleekplan is primarily based on the JavaScript widget, which allows you to interact with the widget from within your application. However, there are certain circumstances where you may have to embed the widget inside a custom frame or you may want to use a standalone solution on a seperated domain.

It only takes a few minutes to install Sleekplan on your website. Once installed, you’ll be able to use the widget via the $sleek SDK. This enables you to perform various operations, such as setting up metadata for visitors and much more.

# 1. Find the JavaScript code

To get started you need to insert a code snippet into your application, so make sure you have access to the HTML code of your app. This JavaScript code allows us to load all the necessary resources and automatically insert the widget into your application. Log in to the app and go to Settings → Widget (opens new window), copy the 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>

# 2. Install the JavaScript code

In the file serving the first portion of your HTML <head> section, copy and paste the code we provide you just before the </head> tag. If you can't find the </head> tag, you can also copy the code before the end of the HTML body (eg: right before the </body> tag. If the feedback widget is not shown up immadiatly, refresh your browser's cache and try again. That's it you are done, the widget is now ready to use.




 
 






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

If you can't figure out how to add Sleekplan to your website, chat with us. We will be happy to help!

# 3. (optional) Setup a custom button

By default the widget is triggered by a feedback button that comes with the widget. However, if you want to trigger the widget by using your own button, you can do so and it's quite simple. First, you may want to disable the default button. Go to Settings → Widget (opens new window) and disable the feedback button.

The data-sleek attribute tells us which element is your button. Once the widget is initialized, we will listen for clicks on elements with this attribute, to trigger the widget to open. You can simply replace data-sleek-feedback with data-sleek-changelog to open the changelog or data-sleek-roadmap to open the roadmap.


 




 













<!-- 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>

# 3.1. Display a notification badge

You can also display an unread counter on your custom button, like you see in the example below.

install-notification-badge

The data-badge attribute tells us which element is your button. Once the button is initialized, we will show a unread counter on that element.

  • data-badge for all notifications
  • data-badge-feedback for notifications from the feedback board, e.g. status update, comments, mentions
  • data-badge-changelog for new updates notifications counter

Full example:

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

Domain →