Skip to content
Fogbender Docs

React

This package provides a set of React components for easily embedding Fogbender into any React application. It includes full-page chat, Intercom-style floaty widget, unread badges, and more.

#Examples and Demo

Code for the fogbender-react package lives here:
👉 https://github.com/fogbender/fogbender-oss/tree/main/packages/fogbender-react

A live demo is available on CodeSandbox:
👉 https://codesandbox.io/s/github/fogbender/fogbender-oss/tree/main/examples/react

#Installation

Terminal window
npm install fogbender-react

#Token Format

Each widget expects a token object that represents the end user and their organization/account:

const token = {
  widgetId: "your-widget-id", // from https://fogbender.com/admin/-/-/settings/embed
  customerId: "your-user-account-id", // your user's group/customer/org/account ID
  customerName: "User's Organization Name", // your user's group/customer/org/account name
  userId: "user-123",
  userEmail: "user@example.com",
  userJWT: "generated-server-side-jwt", // must be signed on your server
  userName: "Jane Doe",
  userAvatarUrl: "https://example.com/avatar.png", // optional
};

Tokens must be secured with a JWT generated on your backend—see Security section for details.

#Usage

Simple widgets offer a plug-and-play experience with sensible defaults and no setup required. For more advanced use cases, wrapping widgets in a provider unlocks additional functionality—like the unread badge—and configurability—letting you programmatically control options like theme (light or dark) and whether users are allowed to create new rooms.

#Simple Roomy Widget

import { FogbenderSimpleRoomyWidget } from "fogbender-react";


<div style={{ display: "flex" }}>
  <FogbenderSimpleRoomyWidget token={token} />
</div>;

Roomy Widget: A full-page team messaging view. Fills its parent container. Wrap in a flex container with a defined height.

#Simple Floaty Widget

import { FogbenderSimpleFloatyWidget } from "fogbender-react";


<FogbenderSimpleFloatyWidget token={token} />;

Floaty Widget: Intercom-style button anchored to the bottom-right, expanding into a compact chat interface.

#Unread Badge

import {
  FogbenderProvider,
  FogbenderConfig,
  FogbenderHeadlessWidget,
  FogbenderUnreadBadge,
} from "fogbender-react";


<FogbenderProvider>
  <FogbenderConfig token={token} />
  <FogbenderHeadlessWidget />
  <FogbenderUnreadBadge />
</FogbenderProvider>;

Unread Badge: A small indicator that can be placed anywhere in your app to show unread message state.

Fogbender unread badge widget example

Note that FogbenderHeadlessWidget is required to display FogbenderUnreadBadge.

#Roomy Widget with Provider

import { FogbenderProvider, FogbenderConfig, FogbenderRoomyWidget } from "fogbender-react";


<FogbenderProvider>
  <FogbenderConfig token={token} mode="dark" roomCreationEnabled={true} />
  <FogbenderRoomyWidget />
</FogbenderProvider>;

Roomy Widget: Same layout and behavior as the simple version, but initialized in dark mode and room creation enabled.

#Floaty Widget with Configuration

import {
  FogbenderProvider,
  FogbenderConfig,
  FogbenderIsConfigured,
  FogbenderFloatyWidget,
} from "fogbender-react";


<FogbenderProvider>
  <FogbenderConfig token={token} mode="dark" />
  <FogbenderIsConfigured>
    <FogbenderFloatyWidget />
  </FogbenderIsConfigured>
</FogbenderProvider>;

Floaty Widget: Anchored to the bottom-right and initialized in dark mode.

#Floaty + Unread Badge

import {
  FogbenderProvider,
  FogbenderConfig,
  FogbenderIsConfigured,
  FogbenderHeadlessWidget,
  FogbenderUnreadBadge,
  FogbenderFloatyWidget,
} from "fogbender-react";


<FogbenderProvider>
  <FogbenderConfig token={token} />
  <FogbenderIsConfigured>
    <FogbenderHeadlessWidget />
    <FogbenderUnreadBadge />
    <FogbenderFloatyWidget />
  </FogbenderIsConfigured>
</FogbenderProvider>;

Use this setup when you want to show an unread badge and a floaty widget.

Unread badge with floaty

#Headless Widget

import { FogbenderProvider, FogbenderConfig, FogbenderHeadlessWidget } from "fogbender-react";


<FogbenderProvider>
  <FogbenderConfig token={token} />
  <FogbenderHeadlessWidget />
</FogbenderProvider>;

Headless Widget: Invisible component that keeps the Fogbender client connected. Mostly useful for building custom integrations.

#About Fogbender

Fogbender brings real-time team messaging directly into your product. Designed for B2B support scenarios, it enables communication between your team and your customers’ teams—without the friction of external tools like Slack Connect and Microsoft Teams. With Fogbender, you can embed a shared-channel-like experience natively in your app, giving your users an integrated, collaborative support flow exactly where they most inspect it: inside of your own product.

#License

MIT