Fluxo UIFluxo UIv0.4.93

Chat Launcher

A floating button that invites users to start a chat. Choose from 7 distinct visual styles, customize the colors, anchor it to either bottom corner, and pair it with a ChatWindow for a complete flow.

Variants

Launcher Variants

Click any launcher to see it animate. Pick the personality that fits your product.

Live Chat
Spark
Default — pill with arc + text
Icon
Compact icon-only button
Morph
Glowing animated blob
Live Chat
Beacon
Live indicator with text + status wave
Pulsar
Concentric pulsing rings

Live Chat

Expand
Capsule with text + icon button
<ChatLauncher
    variant="spark"
    text="Live Chat"
    showTooltip
    tooltipText="We are online!"
    onClick={() => setOpen(true)}
/>

Launcher → Window

Launcher → Window Flow

Click the launcher to open the chat window. Minimize or close to return to the launcher.

Launcher variant:
Chat with us
const [open, setOpen] = useState(false);

<>
  {!open && (
    <ChatLauncher
        variant="spark"
        text="Chat with us"
        onClick={() => setOpen(true)}
    />
  )}
  {open && (
    <ChatWindow
        messages={messages}
        onSendMessage={handleSend}
        onMinimize={() => setOpen(false)}
        onClose={() => setOpen(false)}
    />
  )}
</>

ChatLauncher Props

variant
'icon' | 'morph' | 'beacon' | 'pulsar' | 'expand' | 'bar' | 'spark'"'spark'"

Visual style for the launcher button.

imageUrl
string

Logo image rendered inside the launcher. Falls back to default chat icon if not set.

text
string"'Live Chat'"

Label for variants that show text (bar, beacon, expand, spark).

bgColor
string

Primary background color.

secBgColor
string

Secondary color used in gradients.

fontColor
string

Foreground (icon/text) color.

align
'bottomRight' | 'bottomLeft'"'bottomRight'"

Side of the screen the launcher is anchored to.

spacingCorner
string

Distance from the anchored side edge.

spacingBottom
string

Distance from the bottom edge.

showTooltip
boolean

Show an idle tooltip near the launcher.

tooltipText
string"'We are online!'"

Tooltip text.

icon
ReactNode

Custom icon overriding the default chat icon.

className
string

Extra class on the root.

style
CSSProperties

Extra inline styles.

buttonOnMobile
boolean

Force the simple icon variant on mobile when variant is bar/expand.

autoAnimate
boolean"true"

Enable periodic animations on variants that support them (e.g., expand).

onClickreq
() => void

Click handler — toggles open/close state externally.

import { ChatLauncher } from 'fluxo-ui';

import type { ChatLauncherProps, ChatLauncherVariant, ChatLauncherAlign } from 'fluxo-ui';