A floating WhatsApp chat button that opens a popup with your team members. Each visitor picks who to talk to and starts a WhatsApp conversation directly. Every feature can be toggled on or off, and every visual detail is fully customizable.
Multi-Agent Popup with individual phone numbers, names, roles, and avatars for each team member
Online/Offline Status with animated green dot indicator and customizable status text
Automatic Scheduling using timezone-aware business hours. Set start/end hours, working days (Everyday, Mon-Fri, or Custom per day), and the component handles the rest
Pre-filled Messages with a default message for the whole team or custom messages per member
4 Button Animations: None, Pulse, Focus Ring, Satellite, and Multicolor. Animations pause automatically when the popup is open or on hover
Optional Label with a floating tooltip next to the button (e.g. "Need help? Chat with us")
Smart Positioning that auto-detects if the button is on the left or right side of the screen and aligns the popup accordingly
Offline Members Dimmed and non-clickable, with online members sorted to the top automatically
Avatar Fallback with auto-generated initials when no photo is provided
Responsive with mobile-friendly popup width and max-width constraints
Every feature is optional. Toggle them on or off directly from the properties panel:
Scheduling: enable per member. When off, use the simple Online toggle. When on, configure timezone, start/end hours, and working days
Custom Days: when scheduling is set to Custom, toggle individual days (Sun-Sat) with separate hours for each
Button Label: show or hide the floating text tooltip next to the button
Button Animation: choose from 4 animation styles or turn it off completely
Pre-filled Message: set a default message for all members, or override it per member
Shadow: toggle the button shadow on or off
Timezone: The component uses IANA timezone names (e.g. "America/Sao_Paulo", "Europe/London"). It converts the visitor's local time to your business timezone to determine who is online. This means your schedule is always based on your office hours, regardless of where the visitor is.
Phone Number Format: Enter the full number with country code, no spaces or dashes (e.g. "5511999999999" for Brazil). The component automatically generates the correct wa.me link.
Smart Popup Alignment: The popup automatically opens to the left or right depending on where the button is positioned on the screen. No manual configuration needed.
Offline Members: When a member is offline (either manually toggled or by schedule), they appear dimmed with reduced opacity and are not clickable. Online members are automatically sorted to the top.
Every visual detail is controlled from the properties panel. Nothing is hardcoded:
Members: name, role, phone number, pre-filled message, avatar, and online status per member
Button Style: accent color, size, and shadow toggle
Button Animation: None, Pulse, Focus, Satellite, or Multicolor
Popup Style: width, border radius, header background, and body background
Header Title: text, font (family, weight, size, line-height, spacing), and color
Header Subtitle: text, font, and color
Response Text: text, font, and color (e.g. "Usually replies within a few minutes")
Member Style: name font and color, role font and color, avatar size, and offline indicator color
Label Style: text, font, and color for the optional floating tooltip
Controls are grouped by section and unused options hide automatically. For example, scheduling controls only appear when "Use Schedule" is enabled for a member, and custom day controls only show when "Custom" working days are selected.
