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 settings

• jwtToken: (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 support feature_requests, changelog and knowledge_base modules.

• selector: The selector to which the widget should be attached to.

• placement: The position of the widget. Currently, we support left, right, sticky-left, sticky-right positions.

• openFrom: The position from which the widget should open. Currently, we support center, left and right positions.

• type: The type of the widget. Currently, we support popover and modal types.

• theme: The theme of the widget. Currently, we support light and dark themes.

• accent: The accent color of the widget. This can be specified in two ways.

  1. The first option is to use a straightforward hex code string to define the widget's primary color.
  2. 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 mentioned

• enableIndicator: Enable the indicator to show the number of new changelog published

• submissionBucketIds: 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 dropdown

• showOnlySubmission: When this is enabled, only the submission form will be shown for feature_requests module

• postOnBehalf: When this is enabled, the feature requests will be posted on behalf of the user

  • name
  • email
  • add_as_customer: When this is enabled, the user will be added as a customer

• changelogFilters: The filters to be applied to the changelog module.

  • per_page: The number of changelog items to be shown per page
  • ids: The ids of the changelog items to be shown
  • labels: The labels of the changelog items to be shown
  • published_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 shown
  • bucket_id: The bucket id of the feature requests to be shown

• noDefaultTrigger: When this is enabled, the default trigger button will not be shown

• autoOpenWhenNewChangelog: When this is enabled, the widget will open automatically when a new changelog is published

• launcherIconURL: The URL of the icon to be shown in the launcher button

• customizations: The style customizations to be applied to the widget.

  • disableBackgroundOverlay: When this is enabled, the background overlay will be disabled
  • styles:
    • headerButtonStyles: The styles to be applied to the header buttons
    • backButtonStyles: The styles to be applied to the back button
    • moduleLinkButtonStyles: The styles to be applied to the module link buttons

Methods

• widget.open: Open the widget programmatically

• widget.close: Close the widget programmatically

Events

• onInitialized: This event is triggered when the widget is initialized

• onNewChangelogIndicator: This event is triggered when a new changelog is published