Skip to content
NbliK
Book a demo
In App SDK

Drop a community module into your product

Add feed, groups and support threads inside your existing app with a few lines of code, and keep your own auth.

Dashboard.tsx
import { CommunityFeed } from '@nblik/react'export function Dashboard() {return (<CommunityFeedtoken={session}theme={brand}/>)}
Rendered in your app
OnboardingAgent

Welcomed Maya and pointed her at the first report.

SupportAgent

Answered an SSO question in 41 seconds, with the doc link.

Jonas WeberMember

Anyone else exporting to Looker? Curious how you handle refresh.

Why it matters

Sending users to a separate site loses most of them.

A community on a different domain means a second login, a second set of notifications and a context switch away from the product. Most users never make the trip, and the ones who do treat it as a place they visit occasionally rather than part of the thing they already use every day.

Putting the community inside the product changes the numbers completely, because the user is already there and already signed in. The question is only how much engineering it takes, and the honest answer for most teams has been more than they wanted to spend.

At a glance

Frameworks
React 18+, React Native 0.72+
Bundle added
About 42kB gzipped
Auth
Signed JWT from your backend
Theming
Token object, dark mode included
Events
Typed, forwardable to your pipeline
Availability
Premium and above
What you get

Everything included

Everything below works out of the box, with no custom development required.

  • Components, not an iframe

    Real React and React Native components that render inside your tree, respond to your layout and inherit your theme. No iframe, no scroll trapping, no broken mobile viewport, and no separate stylesheet fighting yours.

  • Your session, not a second login

    Pass a signed token from your backend and the user is authenticated. They never see a login screen, never create a second password, and their community identity stays tied to the account you already manage.

  • Themed from your design tokens

    Colour, radius, spacing scale and typography come from a theme object, so the module reads as part of your product rather than a widget bolted on. Dark mode included.

  • Pick only the pieces you need

    Take the whole community, or just the support thread component next to a feature, or just the feed on a dashboard. Each component is independent and tree shakes, so you only ship what you use.

  • Agents run inside the module

    The Support Agent answers in your product, with sources, in the same panel the question was asked. The Onboarding Agent works against the activation events you already fire, so it can aim a user at the action that actually matters.

  • Events out, so your analytics stay whole

    Every community interaction fires a typed event you can forward to Segment, Amplitude or your own pipeline. Community activity ends up in the same funnel as the rest of your product, not in a separate silo.

  • Typed end to end

    Ships with TypeScript definitions for every component, hook and event. Your editor autocompletes the props and your build fails if a payload changes shape, rather than a runtime surprise in production.

  • Headless hooks when you want your own UI

    If the supplied components are not the look you want, use the hooks directly. useFeed, useThread, useMembers and useAgentReply give you the data and the mutations, and you render whatever you like.

Integration

Five steps, about an afternoon

Copy each block in order. Nothing here needs a build step, a config file or a call with us.

  1. 1

    Install the package

    One dependency. No build step, no config file, works with any bundler.

    bash
    npm install @nblik/react
  2. 2

    Sign a session token on your server

    Your backend proves who the user is. Credentials never pass through us, and the token is short lived.

    ts
    import { createSessionToken } from '@nblik/node';

export async function GET(req: Request) {
  const user = await getCurrentUser(req);
  const token = await createSessionToken({
    userId: user.id,
    displayName: user.name,
    avatarUrl: user.avatar,
    secret: process.env.NBLIK_SECRET!,
  });
  return Response.json({ token });
}
  3. 3

    Wrap your app in the provider

    The provider handles the token exchange, caching and reconnection. Pass your design tokens once and every component inherits them.

    tsx
    import { NblikProvider } from '@nblik/react';

<NblikProvider
  getToken={() => fetch('/api/nblik-token').then((r) => r.json())}
  theme={{ brand: '#5B4BE0', radius: 12, font: 'Inter' }}
>
  {children}
</NblikProvider>
  4. 4

    Drop in the surfaces you want

    Take the whole shell, or one component next to an existing feature. Each is independent and tree shakes.

    tsx
    import { CommunityFeed, SupportThread } from '@nblik/react';

<CommunityFeed group="release-notes" />
<SupportThread topic={feature.id} agent="support" />
  5. 5

    Forward your activation events

    Tell the Onboarding Agent what a successful user looks like and it will aim new users at exactly that.

    ts
    import { track } from '@nblik/react';

track('activation', { step: 'first_report_created', userId: user.id });
Inside your product

What your users actually see

Each of these is a component you can drop anywhere in your app. Take one, or take the whole shell.

  • <CommunityFeed />

    Posts, threads and agent replies. Scope it to a group, or show everything.

  • <SupportThread />

    A question box beside any feature. The Support Agent answers with sources inline.

  • <GroupList />

    Every group the user can join, with join and leave handled for you.

  • <MemberProfile />

    Profile, activity and reputation, editable by the member.

  • <EventList />

    Upcoming events with RSVP, capacity and calendar export.

  • <NotificationBell />

    Unread count and a dropdown, wired to your existing header.

Getting started

How it goes live

  1. 1

    Install the package

    One dependency, one provider component at the root of your app, and an API key from your dashboard.

  2. 2

    Issue a session token

    Your backend signs a short lived token with your secret. The provider exchanges it, so identity stays under your control and no credentials pass through us.

  3. 3

    Drop in the components you want

    Feed, groups, threads, member profile or the whole shell. Pass your theme object and the module takes on your product’s look immediately.

  4. 4

    Wire up events and switch on agents

    Forward your activation events so the Onboarding Agent knows what a successful user looks like, then enable agents one at a time.

Included with this solution

  • React and React Native components
  • Single sign on with your existing session
  • Themeable to match your product
  • Agents run inside the module the same way
Questions

In App SDK specifics

Does our user data leave our systems?

Only what you choose to send. The session token carries an identifier and whatever profile fields you include. You can run with a pseudonymous id and a display name if that is all you want to share.

What about Vue, Svelte or a server rendered app?

A framework agnostic web component wrapper covers those cases today, and React is the first class path. If you are on something else, tell us on the demo call and we will show you the wrapper working in your stack.

How much does it slow the app down?

Components are lazy loaded and code split, so the community only loads on the routes that use it. Typical added weight on those routes is about 42kB gzipped.

Book a demo
Other solutions

Ways to run the same platform

See in app sdk with your own brand on it

Book a demo and we will set it up with your data before the call.

Book a demoSee pricing

Thirty minutes. No credit card, no obligation.