JavaScript API

Once the widget script loads, window.Lumifeed exposes the full API. All methods are also available if you initialize via Lumifeed.init() directly.

Methods

`open()`

Open the feedback panel.

window.Lumifeed.open()

`close()`

Close the feedback panel.

window.Lumifeed.close()

`identify(user)`

Attach a user context to all subsequent submissions. Call this after login, or whenever user state changes.

window.Lumifeed.identify({
  id: "user_123",          // your internal user ID
  name: "Ada Lovelace",    // optional
  email: "ada@example.com", // optional
  attributes: {            // optional — any custom key/value pairs
    plan: "pro",
    company: "Acme",
  },
})

`setTheme(mode)`

Switch the widget theme at runtime.

window.Lumifeed.setTheme("dark" | "light" | "auto" | "follow")

Value	Behavior
`"dark"`	Always dark
`"light"`	Always light
`"auto"`	Follows `prefers-color-scheme`
`"follow"`	Watches `html.classList` and `data-theme` attribute for real-time sync

// Toggle from a theme button
document.getElementById("theme-btn").addEventListener("click", () => {
  const isDark = document.documentElement.classList.contains("dark")
  window.Lumifeed.setTheme(isDark ? "dark" : "light")
})

`setColors(palette)`

Override palette colors at runtime. Useful when your app's theme context changes colors dynamically.

window.Lumifeed.setColors({
  light?: {
    accentColor?: string   // e.g. "#6366f1"
    panelBg?: string       // panel background
    surfaceColor?: string  // inputs & badges background
  },
  dark?: {
    accentColor?: string
    panelBg?: string
    surfaceColor?: string
  },
})

Only the keys you pass are updated — the rest remain unchanged.

// React example — sync with your theme context
useEffect(() => {
  window.Lumifeed.setColors({
    light: { accentColor: theme.colors.primary },
    dark:  { accentColor: theme.colors.primaryDark, panelBg: theme.colors.background },
  })
}, [theme])

`on(event, handler)`

Listen for widget events. Returns an unsubscribe function.

const off = window.Lumifeed.on("submit", (data) => {
  console.log("Feedback submitted")
})

// Stop listening
off()

Event	Fires when
`"open"`	Panel opens
`"close"`	Panel closes
`"toggle"`	Trigger button clicked
`"submit"`	Feedback form submitted
`"meToo"`	User votes on an existing post
`"*"`	Any event — receives `{ event, data }`

`destroy()`

Remove the widget from the page entirely, clean up all listeners and observers.

window.Lumifeed.destroy()

ESM / programmatic init

If you prefer not to use the script tag, import the widget as an ES module and initialize it manually:

import Lumifeed from "@lumifeed/widget"

const widget = Lumifeed.init("fp_live_YOUR_KEY", {
  position: "bottom-right",  // "bottom-right" | "bottom-left" | "top-right" | "top-left"
  theme: "follow",           // "dark" | "light" | "auto" | "follow"
  baseUrl: "https://lumifeed.app",
  cssVarBridge: "shadcn",    // optional: auto-map shadcn/ui CSS vars
  user: {
    id: currentUser.id,
    email: currentUser.email,
  },
  onEvent: (event, data) => {
    analytics.track(`widget:${event}`, data)
  },
})

// Later — get the instance from anywhere
window.Lumifeed.identify({ id: "user_456" })

TypeScript types

type ThemeMode = "dark" | "light" | "auto" | "follow"

interface ThemePalette {
  accentColor?: string
  panelBg?: string
  surfaceColor?: string
}

interface LumifeedInstance {
  open(): void
  close(): void
  identify(user: {
    id?: string
    email?: string
    name?: string
    attributes?: Record<string, unknown>
  }): void
  setTheme(theme: ThemeMode): void
  setColors(palette: { light?: ThemePalette; dark?: ThemePalette }): void
  on(event: string, handler: (data?: unknown) => void): () => void
  destroy(): void
}

declare global {
  interface Window {
    Lumifeed: LumifeedInstance & {
      init(apiKey: string, options?: LumifeedOptions): LumifeedInstance
      instance: LumifeedInstance | null
    }
  }
}

JavaScript API

On this page