Installation overview
Learn how to install Featurebase on your website with this quick 101 guide.
Written By Bruno H
Last updated 4 days ago
Overview
Featurebase ships as a single JavaScript SDK that you install once at your app root. Once installed, every Featurebase surface — Messenger, the Feedback widget, the Updates widget, Surveys, and the embedded web portal — picks up your appId and the signed-in user automatically. Setup typically takes a few minutes of engineering time.
👨💻 Feel free to share this guide with your engineer or a technical team member who can assist.
What you'll need
Your App ID — copy it from Settings → Developers → Installation.
Recommended for logged-in users: a server-signed JWT so Featurebase trusts the user identity you pass it. See Creating and signing a JWT.
Install featurebase-js
Install the package from npm — or, if you can't run a build step, drop the legacy script tag into your <head>.
npm install featurebase-jspnpm add featurebase-jsyarn add featurebase-jsbun add featurebase-jsBoot the SDK once at your app root
This single call is what gives every widget its identity and appId. Pick whichever tab matches your stack — the result is the same.
// app/layout.tsx — Next.js 13+, or any React root.
'use client';
import { FeaturebaseProvider } from 'featurebase-js/react';
export default function RootLayout({ children, user }) {
return (
<FeaturebaseProvider
appId="YOUR_APP_ID" // Settings → Developers → Installation
// featurebaseJwt={user?.featurebaseJwt} // recommended for logged-in users
>
{children}
</FeaturebaseProvider>
);
}// Any framework, or no framework.
import Featurebase from 'featurebase-js';
Featurebase({
appId: 'YOUR_APP_ID', // Settings → Developers → Installation
// featurebaseJwt: user?.featurebaseJwt, // recommended for logged-in users
});<!-- Legacy script-tag install. Drop into your <head>. -->
<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>
<script>
Featurebase('boot', {
appId: 'YOUR_APP_ID',
// featurebaseJwt: '<server-signed jwt>', // recommended for logged-in users
});
</script>For logged-in users, generate a JWT on your server and pass it as featurebaseJwt. For anonymous visitors you can leave it out — Messenger will treat them as leads.
Identify your users (recommended)
For logged-in apps, identify users with a server-signed featurebaseJwt. This is the production-safe path and works with secure installation enabled by default.
👉 Full guide: Identifying users & syncing data.
Mount the widgets you need
Messenger boots automatically from the universal install above as long as it's enabled in your dashboard. Every other widget needs one extra mount call — pick a page below for the per-widget guide:
Public portal SSO
If you want users to access your public Featurebase portal through your own identity provider, set up Single Sign-On. This is separate from the SDK boot above: the SDK identifies users inside your product, while SSO controls direct login to the hosted public portal.
👉 Web portal SSO setup — authenticate users to the public portal with your own IdP.
Advanced
For API, metadata, and other advanced setups:
Have any questions?
Please feel free to message us via live chat or at support@featurebase.app. We'll get back to you as soon as we can, typically within a few hours. 🙏 Thank you!
Still need help? Ask the team