# 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.
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.
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.
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 and disable the feedback button.
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-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.
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-badgefor all notifications
data-badge-feedbackfor notifications from the feedback board, e.g. status update, comments, mentions
data-badge-changelogfor new updates notifications counter
<!-- Custom changelog button with unread counter --> <button data-sleek-changelog data-badge-changelog> Changelog </button>