Element
This package gives you a set of Web Components that let you integrate Fogbender without any framework. You get full-page (roomy) chat, Intercom-style floaty widget, unread badge, and more.
#Examples and Demo
Code for the fogbender-element
package lives here:
đ https://github.com/fogbender/fogbender-oss/tree/main/packages/fogbender-element
A live demo of its basic examples is available on CodeSandbox:
đ https://codesandbox.io/p/sandbox/github/fogbender/fogbender-oss/tree/main/packages/fogbender-element/
For a more complete example built with Lit, check out:
Source: https://github.com/fogbender/fogbender-oss/tree/main/examples/element-lit
Demo: https://codesandbox.io/p/sandbox/github/fogbender/fogbender-oss/tree/main/examples/element-lit
#Installation
#CDN
<script type="module" src="https://unpkg.com/@fogbender/element"></script>
#npm
npm install @fogbender/element
#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 serverâsee Security section for details.
#Usage
The difference between âsimpleâ widgets and those wrapped in a provider is configurability. Simple widgets work out of the box with default behavior. Widgets wrapped in a provider, on the other hand, support programmatic configurationâallowing you to control the theme (light or dark) and enable features like allowing user-created rooms.
#Simple Roomy Widget
<fogbender-simple-roomy-widget .token="${yourTokenObject}"> </fogbender-simple-roomy-widget>
Roomy Widget: A team messaging experience that occupies all available space of its parent containerâexcellent choice for a full-page support dashboard. For proper expansion, ensure the parent container uses display: flex
.
#Simple Floaty Widget
<fogbender-simple-floaty-widget .token="${yourTokenObject}"> </fogbender-simple-floaty-widget>
Floaty Widget: A compact, Intercomâstyle button anchored to the bottom-right corner that opens into a âmobileâ chat interface.
#Unread Badge
<fogbender-provider> <fogbender-config .token="${yourTokenObject}"> </fogbender-config> <fogbender-unread-badge></fogbender-unread-badge></fogbender-provider>
Unread Badge: The unread badge can be placed anywhere on your page to notify users of unread support messages.
#Roomy Widget with Provider
<fogbender-provider> <fogbender-config .token="${yourTokenObject}" .mode=${"dark"} .roomCreationEnabled=${true}> </fogbender-config> <fogbender-roomy-widget></fogbender-roomy-widget></fogbender-provider>
Roomy Widget: Use a provider with explicit configuration to initialize the widget in dark mode and enable users to create rooms.
#Floaty Widget with Configuration
<fogbender-provider> <fogbender-config .token="${yourTokenObject}" .mode=${"dark"}> </fogbender-config> <fogbender-is-configured> <template data-is-configured> <fogbender-floaty-widget></fogbender-floaty-widget> </template> </fogbender-is-configured></fogbender-provider>
Floaty Widget: An Intercomâstyle widget anchored to the bottom-right corner of the screen, initialized in dark mode. It expands into a âmobileâ-style chat interface when activated.
#Headless Widget
<fogbender-provider> <fogbender-config .token="${yourTokenObject}"> </fogbender-config> <fogbender-headless-widget></fogbender-headless-widget></fogbender-provider>
Headless Widget: Loads the Fogbender iframe invisibly (off-screen or hidden), allowing other components like unread badge to communicate with it behind the scenes. Useful when you donât want a visible chat window but still need the widget active.
#About Fogbender
Fogbender is a messaging service built for embedding collaborative, team-to-team conversations directly inside your app. Itâs ideal for B2B customer support, where both your team and your customerâs team benefit from transparent, multiplayer-style communication. Most companies rely on Slack Connect and Shared Channels for this todayâbut with Fogbender, you get the same shared-channel experience natively in your product, without the setup overhead.
#License
MIT