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.
Main Features of Dock Chat
How to Use Dock Chat in Next.js
Installation Guide for Dock Chat
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. |