9. Button

The Button tab controls how your floating chat button looks and where it appears on your website. You can customize the button’s style, icons, tooltip, and positioning for desktop, tablet, and mobile devices.

Icon Button (Minimal Floating Button) #

The Icon Button is the most lightweight floating option. It displays a single circular icon and is ideal for minimal or mobile-first layouts.

1. Floating Button Style – Choose Icon Button to display a compact, circular floating icon.
2. Icon for Circle Button – Select the icon shown inside the button. Options include WhatsApp, chat icons, native icons, or a custom uploaded icon.
3. Icon for Circle Button Close – Choose the icon shown when the button is toggled or closed (for example, an “X” icon).
4. Transition Effect for Circle Icon – Apply a subtle animation (such as slide down) when the button appears or changes state.
5. Button Size – Set the icon size: Small, Medium, or Large.
6. Icon Color – Control the icon color for normal and hover states.
7. Button Background – Set the background color of the floating icon, including hover color.
8. Button Border – Customize border width, style, color, hover color, and radius.

Simple Button (Icon + Text) #

The Simple Button adds a short text label next to the icon, creating a clearer call-to-action without becoming visually heavy.

1. Floating Button Style – Select Simple Button to show an icon with a text label.
2. Button Main Label – Set the primary text shown on the button (e.g. “How may I help you?”).
3. Icon for Button – Choose an icon to display alongside the text, or disable the icon entirely.
4. Icon for Button Close – Select the close icon shown when the button is toggled.
5. Transition Effect – Apply a subtle animation effect when the button appears.
6. Button Size – Adjust the overall button size.
7. Icon Color – Control icon color for normal and hover states.
8. Icon Background – Enable or disable a background behind the icon.
9. Icon Background Color – Choose background colors for normal and hover states.
10. Button Background – Set the main button background color.
11. Button Label Color – Control text color for normal and hover states.
12. Button Border – Fully customize border width, style, color, hover color, and radius.
13. Icon Border – Fully customize border width, style, color, hover color, and radius.
14. Button Padding – Adjust spacing inside the button for precise layout control.

Advanced Button (Avatar, Status & Trust Signals) #

The Advanced Button is designed for maximum engagement. It supports agent avatars, status text, and layered labels to build trust before the click.

1. Floating Button Style – Select Advanced Button.
2. Agent Avatar Type – Choose a default avatar, upload a custom image, or disable avatars.
3. Button Top Label – Add a short descriptor (e.g. agent name or role).
4. Button Main Label – Set the main call-to-action text.
5. Online Text – Text displayed when the agent is available.
6. Offline Text – Text displayed when the agent is unavailable.
7. Button Size – Control the overall button size.
8. Button Background – Set background colors for normal and hover states.
9. Button Label Color – Customize text color.
10. Button Border – Adjust border width, style, color, hover color, and radius.
11. Icon Border – Independently control avatar/icon border styling.
12. Button Padding – Fine-tune spacing for balanced layouts.

---

Tooltip Settings #

1. Button Tooltip
   • Controls when the tooltip text appears.
   • Options: On Hover, Show, Hide
2. Button Tooltip Text
   • The text that appears inside the tooltip when users hover over or see the button.
   • Example: Need Help? Chat with us
3. Button Tooltip Background: Pick a background color for the tooltip for better visibility.
4. Button Tooltip Width
   • Adjust the width of the tooltip in pixels.
   • Default is 180px (but you can expand or shrink).

Positioning (Desktop, Tablet, Mobile) #

1. Button Position (Desktop)
   • Choose where the chat button appears on desktop.
   • Options: Bottom Right, Bottom Left, Middle Right, Middle Left
2. Margin from Bottom Right (Desktop): Set custom margins in pixels for spacing from the bottom and sides.
3. Different Positioning for Tablet Devices: Toggle ON if you want to customize button placement separately for tablets.
4. Bubble Position (Tablet): Select tablet-specific button placement (same options as desktop).
5. Margin from Bottom Right (Tablet): Adjust spacing for tablets independently.
6. Different Positioning for Mobile Devices: Toggle ON to configure mobile-specific button position.
7. Bubble Position (Mobile): Choose where the button will appear on mobile.
8. Margin from Bottom Right (Mobile): Fine-tune margins for smaller screens.

👉 This section ensures you can fully customize the floating chat button’s style and placement across all devices for better user experience.