Widget
Widgets
Introduction
featureOS provides highly customizable widget for feedback boards, roadmap, and changelog.
Setup
The basic setup process invovles adding the following snippet into your website and add a trigger button to which will trigger the widget.
<button id="hellonextWidget">Click Here ✨</button>
<script>
const widget = new window.HellonextWidget({
token: 'YOUR ORGANIZATION WIDGET TOKEN',
modules: ['feature_requests', 'changelog'],
selector: '#hellonextWidget',
})
widget.init()
</script>
Options
token
: Your organization widget token. You can find your organization widget token in your organization settingsjwtToken
: (Deprecated) The JWT token of the user. This is required if you want to enable the user to create feature requests and vote on them.ssoToken
: The JWT token of the user generated based on the below json structure with organization's SSO Key. This is required if you want to enable the user to create feature requests and vote on them.{ "email": "<EMAIL OF THE USER>", "name": "<NAME OF THE USER>" // Optional }
modules
: Modules to be enabled in the widget. Currently, we supportfeature_requests
andchangelog
modules.selector
: The selector to which the widget should be attached to.placement
: The position of the widget. Currently, we supportleft
andright
positions.openFrom
: The position from which the widget should open. Currently, we supportleft
andright
positions.type
: The type of the widget. Currently, we supportpopover
andmodal
types.theme
: The theme of the widget. Currently, we supportlight
anddark
themes.accent
: The accent color of the widget. This can be specified in two ways.- The first option is to use a straightforward hex code string to define the widget's primary color.
- For more extensive customization, you can utilize the following keys to assign colors to specific elements. Example: "accent": { "keys here" }
background
: This color serves as the widget's background for all the widget interface.primary
: The color applies to gradient, header, and button elements.button
: The chosen color will exclusively affect the button elements.
triggerText
: The text to be displayed on the trigger button when the selector is not mentionedenableIndicator
: Enable the indicator to show the number of new changelog publishedsubmissionBucketIds
: The bucket ids to which the feature requests should be submitted to, only the bucket ids mentions here will be show in submission form bucket dropdownshowOnlySubmission
: When this is enabled, only the submission form will be shown forfeature_requests
modulechangelogFilters
: The filters to be applied to the changelog module.per_page
: The number of changelog items to be shown per pageids
: The ids of the changelog items to be shownlabels
: The labels of the changelog items to be shownpublished_at
: The date from which the changelog items should be shown
postFilters
: The filters to be applied to the feature requests module.status
: The status of the feature requests to be shownbucket_id
: The bucket id of the feature requests to be shown
Methods
widget.open
: Open the widget programmaticallywidget.close
: Close the widget programmatically
Events
onInitialized
: This event is triggered when the widget is initializedonNewChangelogIndicator
: This event is triggered when a new changelog is published