Button Settings

The button settings control the appearance and behavior of the floating consultation button that appears on your website. This button is the primary way visitors access your consultation form.

Button Visibility: The consultation button appears on all pages of your website and remains visible as visitors scroll. It’s designed to be non-intrusive while remaining easily accessible.

Button Position Settings

Button Position

Options: Left or Right
Purpose: Determines which side of the screen the consultation button appears on
Default: Right side

Right Position (Recommended):
• Most common placement for floating buttons
• Familiar to users from chat widgets
• Doesn’t interfere with most website navigationLeft Position:
• Good for right-to-left language sites
• Alternative when right side conflicts with other elements
• Can provide visual balance for certain layouts

Button Appearance Settings

Phone Icon Color

Options: White or Black
Purpose: Controls the color of the phone icon inside the consultation button
Default: White

White Icon:
• Best for dark or colorful button backgrounds
• High contrast with most background colors
• Classic, professional appearanceBlack Icon:
• Best for light button backgrounds
• Subtle appearance on bright colors
• Good for minimalist designs

Button Background Color

Field Type: Color picker
Purpose: Sets the background color of the consultation button
Default: #ffb931 (orange/yellow)

Color Selection Tips:
• Choose colors that contrast with your website background
• Use brand colors to maintain consistency
• Bright colors attract more attention
• Test visibility on different devices and screen sizesPopular Color Choices:
• Orange (#ffb931) – energetic, attention-grabbing
• Blue (#007cba) – professional, trustworthy
• Green (#28a745) – positive, action-oriented
• Red (#dc3545) – urgent, high-contrast

Text Above the Button

Field Type: Text input
Purpose: Tooltip text that appears over the button
Default: “Free Phone Consultation”

Effective Text Examples:
• “Free Phone Consultation”
• “Get Expert Advice”
• “Schedule Your Call”
• “Talk to Our Team”
• “Request Consultation”
• “Call Us Now”Best Practices:
• Keep it short and clear (2-4 words)
• Use action-oriented language
• Highlight value (free, expert, immediate)
• Match your business tone

Button Behavior

Visual Effects

Hover Effect: Button slightly changes appearance when hovered
Shadow Effect: Dynamic drop shadow based on button color
Tooltip Display: Text appears on hover with smooth animation
Click Animation: Subtle animation feedback when clicked

Responsive Design

Mobile Optimization: Button size adjusts for touch interfaces
Screen Adaptation: Position adjusts for different screen sizes
Accessibility: Keyboard navigation and screen reader support
Cross-browser: Consistent appearance across all modern browsers

Technical Details

Dynamic Styling

The plugin automatically generates CSS styles based on your settings:

Color Adaptation: Drop shadows automatically match button color
RTL Support: Button position automatically adjusts for right-to-left languages
Z-index Management: Button stays above other page elements
Performance: Minimal CSS footprint for fast loading

Design Recommendations

Color Combinations

High Contrast Combinations:
• Orange background (#ffb931) + White icon
• Blue background (#007cba) + White icon
• Dark background (#333333) + White icon
• Light background (#f8f9fa) + Black iconBrand Integration:
• Use your primary brand color for the background
• Choose icon color based on contrast requirements
• Test visibility against your website’s color scheme

Placement Strategy

Consider These Factors:
• Existing chat widgets or floating elements
• Your website’s navigation placement
• Mobile device usage patterns
• Cultural reading patterns (left-to-right vs right-to-left)
• User testing feedback

Testing Your Button

Multiple Devices: Test on desktop, tablet, and mobile
Different Browsers: Verify appearance in Chrome, Firefox, Safari, Edge
Page Variety: Check button on different page types (home, product, blog)
User Feedback: Ask real users about button visibility and appeal
Conversion Tracking: Monitor how button changes affect consultation requests