Vue

This package provides a set of Vue components that let you easily embed Fogbender widgets into any Vue application. It includes full-page messaging, floaty launcher, unread badge, and headless support for advanced use cases.

#Examples and Demo

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

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

#Installation

npm install fogbender-vue

#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 provide a drop-in experience with reasonable defaults and no configuration. When more control is needed, wrapping widgets in a provider enables extra capabilities—such as displaying unread badges—and allows for customization through props like theme (light or dark) and end-user room creation capability.

#Simple Roomy Widget

<template>
  <div style="height: 100vh; display: flex; flex-direction: column;">
    <button @click="toggleMount">{{ !mounted ? "mount" : "unmount" }}</button>
    <div style="flex: 1; display: flex;">
      <FogbenderSimpleRoomyWidget v-if="mounted" :token="token" />
    </div>
  </div>
</template>

<script>
import { FogbenderSimpleRoomyWidget } from "fogbender-vue";

const token = {
  /* see above */
};

export default {
  name: "App",
  components: {
    FogbenderSimpleRoomyWidget,
  },
  data() {
    return {
      mounted: true,
      token,
    };
  },
  methods: {
    toggleMount() {
      this.mounted = !this.mounted;
    },
  },
};
</script>

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

#Simple Floaty Widget

<script setup lang="ts">
import { FogbenderSimpleFloatyWidget } from "fogbender-vue";

const token = {
  /* see above */
};
</script>

<template>
  <FogbenderSimpleFloatyWidget :token="token" />
</template>

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

#Unread Badge

<script setup lang="ts">
import {
  FogbenderProvider,
  FogbenderConfig,
  FogbenderHeadlessWidget,
  FogbenderUnreadBadge,
} from "fogbender-vue";

const token = {
  /* see above */
};
</script>

<template>
  <FogbenderProvider>
    <FogbenderConfig :token="token" />
    <FogbenderHeadlessWidget />
    <FogbenderUnreadBadge />
  </FogbenderProvider>
</template>

Unread Badge: A small indicator that can be placed anywhere in your app to show unread message state. The number shown is the number of rooms with unread messages, not a sum of unread messages across all rooms.

Note: FogbenderHeadlessWidget must be mounted for this to work.

#Roomy Widget with Provider

<script setup lang="ts">
import { FogbenderProvider, FogbenderConfig, FogbenderRoomyWidget } from "fogbender-vue";

const token = {
  /* see above */
};
</script>

<template>
  <FogbenderProvider>
    <FogbenderConfig :token="token" mode="dark" :roomCreationEnabled="true" />
    <FogbenderRoomyWidget />
  </FogbenderProvider>
</template>

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

#Floaty Widget with Configuration

<script setup lang="ts">
import {
  FogbenderProvider,
  FogbenderConfig,
  FogbenderIsConfigured,
  FogbenderFloatyWidget,
} from "fogbender-vue";

const token = {
  /* see above */
};
</script>

<template>
  <FogbenderProvider>
    <FogbenderConfig :token="token" mode="dark" />
    <FogbenderIsConfigured>
      <FogbenderFloatyWidget />
    </FogbenderIsConfigured>
  </FogbenderProvider>
</template>

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

#Floaty + Unread Badge

<script setup lang="ts">
import {
  FogbenderProvider,
  FogbenderConfig,
  FogbenderIsConfigured,
  FogbenderHeadlessWidget,
  FogbenderUnreadBadge,
  FogbenderFloatyWidget,
} from "fogbender-vue";

const token = {
  /* see above */
};
</script>

<template>
  <FogbenderProvider>
    <FogbenderConfig :token="token" />
    <FogbenderIsConfigured>
      <FogbenderHeadlessWidget />
      <FogbenderUnreadBadge />
      <FogbenderFloatyWidget />
    </FogbenderIsConfigured>
  </FogbenderProvider>
</template>

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

#Headless Widget

<script setup lang="ts">
import { FogbenderProvider, FogbenderConfig, FogbenderHeadlessWidget } from "fogbender-vue";

const token = {
  /* see above */
};
</script>

<template>
  <FogbenderProvider>
    <FogbenderConfig :token="token" />
    <FogbenderHeadlessWidget />
  </FogbenderProvider>
</template>

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

#About Fogbender

Fogbender enables seamless, real-time messaging between your team and your customers—embedded directly within your product. Built for B2B support workflows, it eliminates the overhead of tools like Slack Connect and Microsoft Teams by offering a native, shared-channel-style experience. With Fogbender, your users get a collaborative, persistent support interface exactly where they need it: inside your app.

#License

MIT