Embed Web Portal View

Learn how to embed Featurebase on your website, sync URLs for intuitive navigation, and enable Single Sign-On for seamless user authentication.

Written By Robi Rohumaa

Last updated 10 days ago

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

Demo the widget here →

Installing

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

Example
<!-- Import Featurebase SDK -->
<script>!(function(e,t){const a="featurebase-sdk";function n(){if(!t.getElementById(a)){var e=t.createElement("script");(e.id=a),(e.src="https://do.featurebase.app/js/sdk.js"),t.getElementsByTagName("script")[0].parentNode.insertBefore(e,t.getElementsByTagName("script")[0])}}"function"!=typeof e.Featurebase&&(e.Featurebase=function(){(e.Featurebase.q=e.Featurebase.q||[]).push(arguments)}),"complete"===t.readyState||"interactive"===t.readyState?n():t.addEventListener("DOMContentLoaded",n)})(window,document);</script>

<!-- Embed Featurebase -->
<div data-featurebase-embed></div>

<!-- Initialize Featurebase widget -->
<script>
  Featurebase('init_embed_widget', {
    /* Required - Organization identifier */
    organization: 'yourorg', // Replace with your organization name (subdomain from your Featurebase workspace URL)
    
    embedOptions: {
      path: '/', // Initial page to load: '/' for feedback board, '/roadmap' for roadmap, '/changelog' for changelog, etc.
      filters: '', // Query params that can be used for default filters (e.g. 'b=63f827df2d62cb301468aac4&sortBy=upvotes:desc')
      // routeSyncingBasePath: '' // ADVANCED - Sync URLs between your website & the embed, read the documentation below for usage
    },
    
    /* Optional - Styling configuration */
    stylingOptions: {
      theme: 'light', // Theme options: 'light', 'dark', or '' for auto-detection
      hideMenu: false, // Toggle visibility of the top navigation bar
      hideLogo: false, // Toggle visibility of the logo in the navigation bar
    },
    
    /* Optional - User authentication & data */
    // user: {
    //   jwt: '', // For SSO authentication, use jwt parameter here
    //   metadata: {} // Custom metadata to attach to feedback submissions
    // },
    // Note: When SDK identify is set up, the user will be automatically authenticated
    
    /* Optional - Localization */
    // locale: 'en' // Language setting (all available at https://help.featurebase.app/en/articles/8879098)
  })
</script>

Authentication

If you’ve set up the

Could not load article.

or

Could not load article.

, the user will be automatically authenticated inside the widget.

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
## 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.