Admin: Floating Action Buttons

Introduction

The Floating Action Buttons section in your admin portal allows you to customize and control the interactive UI elements that provide quick access to primary actions on your website. These buttons, often called FABs for short, appear as floating elements on your site and help users perform common actions like adding items to their cart or initiating chat conversations. From this settings page, you can configure the appearance, behavior, and content of these essential user interface components.

Login to Admin Portal

1. Visit: https://admin.fluid.app/
2. Enter your email address associated with your account.
3. Retrieve the 6 digit code sent to your email and enter it.
4. You are now in your company's Fluid Admin portal. 

Accessing Floating Action Button Settings

1. Navigate to Settings in your dashboard.
2. Locate the "Commerce" section.
3. Select "Floating Action Buttons" from the menu options

Settings Overview

The Floating Action Buttons settings page provides comprehensive control over your site's interactive elements. The interface is divided into several key sections:

Preview Panel

The left side of the interface displays a real-time preview of your floating action buttons, showing how they will appear on both desktop and mobile devices. This preview updates automatically as you make changes to settings, allowing you to see the impact of your modifications immediately.

Desktop and Mobile Views:

• Toggle between desktop and mobile previews using the tabs
• See how your buttons will appear across different screen sizes
• Observe button positioning and sizing in real-time

Cart Button Configuration Overview

The Cart Button is a floating action button that provides users with quick access to their shopping cart, displaying cart contents and enabling rapid checkout processes.

Hide Button Option

Use the toggle switch to show or hide the floating cart button on your store:

• Enabled: Cart button appears on your website
• Disabled: Cart button is hidden from view

Note: Hiding the cart button may impact user experience and conversion rates

Size Options

Choose from three predefined sizes for your cart button:

Small

• Compact design for minimal visual impact
• Suitable for sites with limited screen space
• Less prominent but still accessible

Medium (Recommended)

• Balanced size that provides good visibility without being intrusive
• Works well for most website layouts
• Optimal for both desktop and mobile experiences

Large

• Maximum visibility and impact
• Ideal for e-commerce focused sites
• May be too prominent for content-heavy websites

Color Customization

Brand Settings Integration

Enable "Use brand settings" to automatically apply your company's brand colors to the floating action buttons. This ensures consistency with your overall brand identity and design system.

Primary Color

• Default: #e51f3d (Red)
• Purpose: Used for the primary action buttons and main interactive elements
• Usage: Cart button background, primary call-to-action elements
• Customization: Click the color picker to select a custom primary color

Secondary Color

• Default: #CE12A6 (Purple/Magenta)
• Purpose: Used for secondary actions and supporting elements
• Usage: Button borders, hover states, secondary interactive elements
• Customization: Click the color picker to select a custom secondary color

Chat Button Configuration Overview

The Chat Button provides users with instant access to customer support through live chat functionality, improving customer service accessibility and response times.

Hide Button Option

Control the visibility of the floating chat button:

• Enabled: Chat button appears on your website
• Disabled: Chat button is hidden from visitors

Configuration Tabs

Style Tab

• Configure the visual appearance of the chat button
• Adjust colors, sizing, and positioning options
• Set animation and hover effects

Content Tab (Active)

• Manage the text content and messaging for the chat button
• Configure form fields and user interaction elements
• Set up automated responses and greeting messages

Content Configuration

Form Title

• Enter the title that appears at the top of the chat interface
• Example: "Chat with Support" or "How can we help?"
• Keep concise and action-oriented

Form Description

• Provide additional context about the chat service
• Explain response times or availability
• Set user expectations for the support experience

Button Text

• Customize the text that appears on the chat button itself
• Common options: "Chat Now," "Get Help," "Contact Us"
• Should be clear and encourage interaction

Success Text

• Define the message users see after successfully initiating a chat
• Confirm that their message was received
• Provide next steps or expected response timeframes

Best Practices

Design Considerations

• Positioning: Ensure buttons don't obstruct important content or navigation
• Contrast: Use colors that provide sufficient contrast against your site background
• Size: Balance visibility with user experience - avoid overwhelming the interface
• Mobile Optimization: Test button placement and sizing on mobile devices

User Experience Guidelines

• Consistency: Maintain consistent styling across all floating action buttons
• Accessibility: Ensure buttons are accessible to users with disabilities
• Performance: Monitor that buttons don't negatively impact page load times
• Analytics: Track button usage to optimize placement and design

Content Best Practices

• Clear Messaging: Use concise, action-oriented language
• Brand Voice: Maintain consistency with your brand's tone and personality
• User Testing: Regularly test button functionality and user interactions
• Regular Updates: Keep content fresh and relevant to current promotions or services

Troubleshooting Common Issues

Buttons Not Appearing

• Check that buttons are not hidden via the toggle switches
• Verify that brand settings are properly configured
• Ensure no conflicting CSS is hiding the elements

Color Changes Not Applying

• Clear browser cache and refresh the page
• Verify that "Use brand settings" is enabled if using brand colors
• Check that custom colors have been saved properly

Mobile Display Issues

• Test on actual mobile devices, not just browser developer tools
• Verify button sizing is appropriate for touch interactions
• Ensure buttons don't interfere with mobile navigation

Performance Optimization

• Regularly review button usage analytics
• Remove unused buttons to improve page performance
• Optimize button images and animations for faster loading
• Test button functionality across different browsers and devices