9. Button

Button (Single Form / Single Agent / Simple Button / Multi-Agent List / Multi-Agent Grid) #

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.

Floating Button Style & Icons #

1. Floating Button Style
   • Choose the design style of your floating chat button.
   • Several predefined button designs are available.
2. Icon for Circle Button
   • Select the main icon for your chat button.
   • Options: WhatsApp logo, chat icons, native, or upload a custom icon.
3. Icon for Circle Button Close
   • Choose the icon that appears when the chat bubble is open and users want to close it.
   • Options include “X” or other native/custom icons.

Tooltip Settings #

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

Positioning (Desktop, Tablet, Mobile) #

8. Button Position (Desktop)
   • Choose where the chat button appears on desktop.
   • Options: Bottom Right, Bottom Left, Middle Right, Middle Left
9. Margin from Bottom Right (Desktop): Set custom margins in pixels for spacing from the bottom and sides.
10. Different Positioning for Tablet Devices: Toggle ON if you want to customize button placement separately for tablets.

11. Bubble Position (Tablet): Select tablet-specific button placement (same options as desktop).

12. Margin from Bottom Right (Tablet): Adjust spacing for tablets independently.

13. Different Positioning for Mobile Devices: Toggle ON to configure mobile-specific button position.

14. Bubble Position (Mobile): Choose where the button will appear on mobile.

15. 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.

---

Button (Advanced Button Layout) #

When you select the Advanced Button layout, you get additional customization options. This layout is designed to show agent-specific details (like photo, name, and designation) directly inside the button for a more personalized look.

Advanced Button Settings #

1. Advanced Button Style
   • Select the button style specifically designed for advanced layouts.
   • Options may include designs with larger visuals or text details.
2. Button Agent Photo
   • Upload or select an agent photo to display directly on the button.
   • This helps visitors easily recognize who they’re chatting with.
3. Button Agent Name
   • Enter the agent’s display name.
   • Example: John Doe
4. Button Agent Designation
   • Add a role or title (e.g., Sales Support, Customer Care).
5. Button Label
   • Customize the main text that appears inside the advanced button.
   • Example: How Can I Help You?
6. Online Text
   • The text shown when the agent is available.
   • Example: I Am Online
7. Offline Text
   • The text displayed when the agent is unavailable.
   • Example: I Am Offline
8. Advanced Button Padding
   • Control spacing inside the button.
   • Adjust padding for top, right, bottom, and left in pixels.

Positioning (Desktop, Tablet, Mobile) #

9. Button Position (Desktop)
   • Choose button placement on desktop.
   • Options: Bottom Right, Bottom Left, Middle Right, Middle Left
10. Margin from Bottom Right (Desktop): Adjust spacing from the bottom and side edges for desktop.

11. Different Positioning for Tablet Devices: Toggle ON to configure separate placement for tablets.

12. Bubble Position (Tablet): Choose where the advanced button will appear on tablets.

13. Margin from Bottom Right (Tablet): Customize spacing for tablets.

14. Different Positioning for Mobile Devices: Toggle ON to enable specific positioning for mobile devices.

15. Bubble Position (Mobile): Choose placement for mobile screens.

16. Margin from Bottom Right (Mobile): Fine-tune button margins on mobile for optimal visibility.