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