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