Floating Button Trigger
The Floating Button trigger displays a persistent button that floats on the page. When clicked, it opens your popup. This provides always-available access without interrupting the user.
Overview
| Property | Value |
|---|---|
| Trigger Type | floatingbutton |
| Visibility | Always visible |
| User Action Required | Click |
| Mobile Support | Full |
When to Use
Good Use Cases
- Contact/support — Always-available help
- Feedback collection — Persistent feedback button
- Chat alternatives — Custom chat trigger
- Sticky CTAs — Persistent calls-to-action
- Special offers — Tab-style promotions
- Navigation aids — Quick access menus
Benefits
- Non-intrusive
- Always accessible
- User-initiated
- High visibility
- Great mobile support
Configuration
Button Position
Where the button appears on screen:
| Position | Description |
|---|---|
| Bottom Right | Most common |
| Bottom Left | Alternative corner |
| Right Center | Side position |
| Left Center | Left side |
| Top Right | Header area |
| Top Left | Header area |
Button Settings
Configure button appearance:
| Setting | Options |
|---|---|
| Shape | Circle, rounded rectangle, pill |
| Size | Small, medium, large, custom |
| Icon | Font Awesome icons |
| Text | Optional label text |
| Color | Background color |
Button Styling
Visual Options
| Property | Description |
|---|---|
| Background Color | Button fill color |
| Icon Color | Icon/text color |
| Border | Optional border |
| Shadow | Drop shadow effect |
| Hover Effects | Color change, scale |
Icon Options
Popular icons for floating buttons:
| Icon | Use Case |
|---|---|
comment | Chat, feedback |
envelope | Contact, newsletter |
question | Help, FAQ |
gift | Offers, promotions |
phone | Contact |
plus | Add, expand |
With Text Label
Optionally show text with icon:
[💬 Chat with us]
Or icon-only for minimal design:
[💬]
Animation Options
Entry Animation
How the button appears:
| Animation | Effect |
|---|---|
| Fade in | Subtle appearance |
| Scale up | Bouncy entrance |
| Slide in | From edge of screen |
| None | Immediate display |
Attention Animations
Draw attention to the button:
| Animation | Effect |
|---|---|
| Pulse | Subtle pulsing |
| Bounce | Gentle bounce |
| Shake | Attention-grabbing |
| None | Static |
When to Animate
- On initial load (once)
- After scroll (re-engage)
- Periodically (use sparingly)
Position Settings
Offset from Edge
Distance from screen edges:
Bottom: 24px
Right: 24px
Typical: 16-32px from edges
Z-Index
Ensure button stays above other content:
- Default: High z-index
- May need adjustment for some sites
Mobile Behavior
Responsive Positioning
Consider mobile-specific positioning:
| Desktop | Mobile |
|---|---|
| Bottom right | Bottom center (optional) |
| 24px offset | 16px offset |
| Medium size | Larger touch target |
Touch Targets
Ensure button is:
- At least 44x44px for touch
- Not overlapping navigation
- Clear of other interactive elements
Display Options
Show/Hide Conditions
| Condition | Effect |
|---|---|
| Always visible | Button always shows |
| After scroll | Appears after scrolling |
| After delay | Appears after time |
| On specific pages | Page-based rules |
Hide on Popup Open
When popup opens:
- Hide button (common)
- Show button with close state
- Keep visible (less common)
Best Practices
Positioning
- Don't overlap — Avoid covering content
- Consistent placement — Same position across pages
- Accessible location — Easy to reach on mobile
- Clear of navigation — Don't conflict with site elements
Styling
- Brand colors — Match your design
- Contrast — Visible against all backgrounds
- Appropriate size — Noticeable but not huge
- Clear icon — Obvious meaning
Behavior
- Quick response — Instant popup on click
- Smooth animation — Nice transitions
- Remember state — Don't re-animate constantly
- Reliable — Always works when clicked
Common Patterns
Support Button
Position: Bottom right
Icon: Chat bubble
Color: Brand blue
Text: "Help"
Action: Opens contact form
Feedback Tab
Position: Right center (rotated)
Text: "Feedback"
Color: Accent color
Action: Opens feedback form
Offer Button
Position: Bottom right
Icon: Gift
Text: "Special Offer"
Color: Promotion color
Animation: Gentle pulse
Quick Contact
Position: Bottom left
Icon: Phone
Color: Green
Text: None (icon only)
Hover: "Call us"
Interactions with Other Elements
Existing Chat Widgets
If you have a chat widget:
- Position on opposite side
- Use different purpose
- Consider removing one
Scroll-to-Top Buttons
If you have scroll-to-top:
- Position separately
- Different vertical alignment
- Clear visual distinction
Cookie Banners
Consider floating bars:
- Adjust position when banner shows
- Adequate spacing
- Don't overlap
Metrics to Track
- Click rate — Button interactions
- Visibility — Is it being seen?
- Conversion — After opening popup
- Mobile vs desktop — Different behavior?
Troubleshooting
Button not visible:
- Check z-index
- Verify position isn't off-screen
- Look for CSS conflicts
- Check trigger is enabled
Button in wrong position:
- Verify position settings
- Check for conflicting CSS
- Test on different screen sizes
Click not working:
- Verify popup is configured
- Check for JS errors
- Ensure not blocked by overlay
Related Triggers
- On Click — For element-specific triggers
- On Load — For automatic display
- Timed Delay — Combined with delay