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

• showChangelogIndicator: Controls the visibility of the new changelog indicator dot on the trigger button. Defaults to true.

• 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

• hideBucketSelection: When set to true, hides the bucket selection dropdown in the submission form if submissionBucketIds has only one bucket ID. Defaults to false.

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

• suggestSimilarPost: Enable or disable suggesting similar posts when a user types in the submission form. Defaults to true.

• 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

• hideChangelogLabels: When set to true, hides the labels displayed on changelog items. Defaults to false.

• 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

• showAllChangelogLink: Controls the visibility of the "View all" link within the changelog module. Set to false to hide the link. Defaults to true.

• showAllPostLink: Controls the visibility of the "View all" link within the feature requests (posts) module. Set to false to hide the link. Defaults to true.

• showAllArticles: Controls the visibility of the "View all" link within the knowledge base (articles) module. Set to false to hide the link. Defaults to true.

• module_names: Allows customization of the display names used within the widget modules. You can specify singular and plural names for different elements.

  • roadmap_name: Custom name for the roadmap module.
  • roadmap_plural_name: Custom plural name for roadmap items.
  • bucket_plural_name: Custom plural name for feature request buckets (e.g., "Categories").
  • bucket_singular_name: Custom singular name for a feature request bucket (e.g., "Category").
  • changelog_plural_name: Custom plural name for changelog entries.
  • changelog_singular_name: Custom singular name for a changelog entry.
  • knowledge_base_name: Custom name for the knowledge base module. Example: { "bucket_plural_name": "Feedback Groups", "changelog_singular_name": "Update" }

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

  • disableBackgroundOverlay: When this is enabled, the background overlay will be disabled
  • indicatorColor: Sets a custom color for the new changelog indicator dot.
  • widgetWidth: Sets a custom width for the widget (e.g., '400px').
  • 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

• locale: Sets the language for the widget content (e.g., 'en', 'es', 'fr'). Defaults to the organization's default language or English ('en') if not set.