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 13 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>

<!-- Identify user in Featurebase -->
<script>
  Featurebase('embed', {
    /* Required */
    organization: 'yourorg', // Replace this with your organization name, copy-paste the subdomain part from your Featurebase workspace url (e.g. https://*yourorg*.featurebase.app)

    /* Optional */
    basePath: null, // Sync urls between your website & our embed. Example: '/feedback'. Refer to the url synchronizing section below to learn more.

    // Aesthetic or Display
    theme: 'light', // options: light [default], dark. Remove for auto.
    initialPage: 'Board', // options: Board [default], Changelog, Roadmap, Help
    hideMenu: false, // Hides the top navigation bar
    hideLogo: false, // Hides the logo in the top navigation bar & leaves the Sign In button visible.
    filters: null, // Default filters to apply to the board view. Copy the filters from the URL when you have the filters you want selected. Example: 'b=63f827df2d62cb301468aac4&sortBy=upvotes:desc'
    jwtToken: null, // Automatically sign in a user with a JWT token. See the JWT section below.
    metadata: null, // Attach session-specific metadata to feedback. Refer to the advanced section for the details: https://help.featurebase.app/en/articles/3774671-advanced#7k8iriyap66
    locale: "en" // Change the language, view all available languages from https://help.featurebase.app/en/articles/8879098-using-featurebase-in-my-language
  })
</script>

Authentication

If you’ve set up the

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 basePath 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 basePath, 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 basePath + /roadmap, like example.com/feedback/roadmap. If the board loads correctly, you have successfully set up URL syncing.