Embed a widget

FeatureOS provides a highly customizable widget for feedback boards, roadmaps, and changelogs.

Setup

Add the following snippet to your website and attach it to a trigger button:

<button id="featureosWidget">Click Here ✨</button>
<script>
  const widget = new window.HellonextWidget({
    token: 'YOUR ORGANIZATION WIDGET TOKEN',
    modules: ['feature_requests', 'changelog'],
    selector: '#featureosWidget'
  });
  widget.init();
</script>

Note — Find your organization widget token in your organization settings.

Options

• token: Your organization widget token.

• ssoToken: A user JWT generated from the JSON structure below, signed with your organization's SSO key. Required to let users create feature requests and vote.

  {
    "email": "<EMAIL OF THE USER>",
    "name": "<NAME OF THE USER>"
  }

• jwtToken: (Deprecated) The JWT token of the user. Use ssoToken instead.

• modules: Modules to enable. Supported: feature_requests, changelog, knowledge_base.

• selector: The element the widget attaches to.

• placement: Widget position — left, right, sticky-left, sticky-right.

• openFrom: Where the widget opens from — center, left, right.

• type: Widget type — popover or modal.

• theme: light or dark.

• accent: The accent color. Either a hex string, or an object for granular control:

  • background: Widget background across the whole interface.
  • primary: Gradient, header, and button elements.
  • button: Button elements only.

• triggerText: Text shown on the default trigger button when no selector is given.

• enableIndicator: Show a count of new published changelogs.

• showChangelogIndicator: Show the new-changelog indicator dot on the trigger button. Defaults to true.

• submissionBucketIds: Restrict submissions to specific bucket IDs; only these appear in the submission form's bucket dropdown.

• hideBucketSelection: Hide the bucket dropdown when submissionBucketIds has a single ID. Defaults to false.

• showOnlySubmission: Show only the submission form for the feature_requests module.

• suggestSimilarPost: Suggest similar posts as a user types. Defaults to true.

• postOnBehalf: Post feature requests on behalf of a user.

  • name
  • email
  • add_as_customer: Also add the user as a customer.

• changelogFilters: Filters for the changelog module.

  • per_page: Number of changelog items per page.
  • ids: Specific changelog item IDs to show.
  • labels: Changelog labels to show.
  • published_at: Show changelog items published from this date.

• hideChangelogLabels: Hide labels on changelog items. Defaults to false.

• locale: Default language for the widget and changelog module. Defaults to the organization's default language, or English (en).

• allowedLanguages: Languages allowed for the changelog module.

• postFilters: Filters for the feature requests module.

  • status: Statuses to show.
  • bucket_id: Bucket to show.

• noDefaultTrigger: Don't render the default trigger button.

• autoOpenWhenNewChangelog: Open the widget automatically when a new changelog is published.

• launcherIconURL: Icon shown in the launcher button.

• showAllChangelogLink: Show the "View all" link in the changelog module. Defaults to true.

• showAllPostLink: Show the "View all" link in the feature requests module. Defaults to true.

• showAllArticles: Show the "View all" link in the knowledge base module. Defaults to true.

• module_names: Customize the display names used in the widget modules.

  • roadmap_name, roadmap_plural_name
  • bucket_plural_name, bucket_singular_name
  • changelog_plural_name, changelog_singular_name
  • knowledge_base_name

  Example: { "bucket_plural_name": "Feedback Groups", "changelog_singular_name": "Update" }

• customizations: Style customizations.

  • disableBackgroundOverlay: Disable the background overlay.
  • indicatorColor: Custom color for the new-changelog indicator dot.
  • widgetWidth: Custom widget width (e.g. 400px).
  • styles:
    • headerButtonStyles
    • backButtonStyles
    • moduleLinkButtonStyles

Methods

• widget.open: Open the widget programmatically.
• widget.close: Close the widget programmatically.

Events

• onInitialized: Fired when the widget is initialized.
• onNewChangelogIndicator: Fired when a new changelog is published.