Demo the widget here →

Featurebase allows you to embed feedback, changelog, or roadmap views directly on your site and sync the URLs for better navigation.

Step 1 — Install the Featurebase SDK

Every widget — including Embedded portal — inherits its appId and the signed-in user from a single universal Featurebase install at your app root. Do that first, then come back here for the widget-specific mount call.

👉 Follow Installation overview (it takes about 2 minutes). Your appId lives in Settings → Developers → Installation.

👤 Logged-in product? Use a server-signed featurebaseJwt on the universal boot so feedback, responses, and read state are attributed to the right person. See Identifying users & syncing data.

Step 2 — Mount the Embedded portal

Installing

To embed Featurebase on your website, just copy and paste this code into your website:

Example
React
Vanilla
Legacy
Copy
// Inside <FeaturebaseProvider>, anywhere in your tree.
'use client';
import { EmbedView } from 'featurebase-js/react';

export function PublicPortalPage() {
  return (
    <EmbedView
      embedOptions={{
        path: '/',
        filters: '',
        // routeSyncingBasePath: '/feedback',
      }}
      stylingOptions={{
        theme: 'light',
        hideMenu: false,
        hideLogo: false,
      }}
    />
  );
}

Authentication

If you are using our SDK identify functionality (recommended), then all the data about the user will be automatically connected to the Web portal widget as well.

As an additional option, you could generate a JWT on your server and pass it to the init_embed_widget function as user.jwt:generatedTokenValue.

Advanced

Listen for callbacks

You can listen for callbacks to detect certain events in the widget.

Here are the available callbacks (these values are set as callback.action):

• widgetReady - The widget has fully loaded in

Example:

win.Featurebase(
  'embed',
  {
    organization: 'yourorg',
    // Rest of the params
  },
  (err, callback) => {
    // Check for callback.action to listen for events above
    if (callback?.action === 'widgetReady') {
      // Do something
    }
  }
);

Synchronizing the URL with Your Embedded Feedback Board

Synchronizing the URL with your embedded feedback board offers a more intuitive user experience on your website. This lets users easily share specific links and ensures consistent navigation, enhancing overall site engagement and interaction.

To set this up, configure the routeSyncingBasePath value in your embed settings to a desired path, like /feedback. This ensures your feedback board appears at the /feedback endpoint on your website.

A crucial point to remember: redirect any traffic heading to /feedback/* back to /feedback. Without this step refreshing the board will cause a 404 error.

View the below code snippets to learn how to set this up in your framework:

Example
HTML
Next.js
Vue.js
Svelte
Copy
## To set up seamless url syncing with your embedded board:

1. Choose a routeSyncingBasePath, e.g., `/feedback`.
2. Configure your server: Any request like `/feedback/roadmap` should load the `/feedback` page.
3. Ensure the browser's URL stays as `/feedback/roadmap`, but the content comes from `/feedback`.

After this, you can test if it works by navigating to your chosen routeSyncingBasePath+ /roadmap, like example.com/feedback/roadmap. If the board loads correctly, you have successfully set up URL syncing.