Navigation & Structure
Dock Chat
Floating dock chat widget with customizable position, animated open/close transitions, and spring physics. Features morphing button icon and smooth chat panel animations.
navigation-structurechatdockfloatingwidgetinteractiveanimation
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
position | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'bottom-right' | Position of the dock button and chat panel. |
buttonSize | number | 56 | Size of the floating button in pixels. |
chatWidth | number | 320 | Width of the chat panel in pixels. |
chatHeight | number | 384 | Height of the chat panel in pixels. |
title | string | "Support Team" | Title displayed in the chat header. |
subtitle | string | "How can we help you today?" | Subtitle displayed in the chat header. |
buttonColor | string | "#4f46e5" | Color of the floating button (hex, rgb, or hsl). |
className | string | undefined | Additional CSS classes for custom styling. |
onOpenChange | (open: boolean) => void | undefined | Callback function called when chat opens or closes. |