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.

RR

Written By Robi Rohumaa

Last updated 10 days ago

👨‍💻 You'll need to write custom code for the setup process. If you're uncomfortable with this, share this guide with a technical team member who can assist.

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

Installing

To put 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
    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>

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.

Single Sign-On with embedding

Our embedded board supports automatically authenticating your users via SSO.

Generate a JWT token for the embed

Start by following our JWT creation guide to get an SSO token.

Pass this JWT along to the embed initialization:

Example
Featurebase("embed", {
  ..., // Other options
  jwtToken: "The token you just generated."
});