The Floating Chat Buttons can be used to display the button that provides quick access to social icons or any other channels to start conversations. It makes it very easy and quick for customers to contact you through your website. They’ll be able to chat with you on Facebook Messenger, WhatsApp, SMS, or via any other method they choose. You can easily control the chat button with its customization and styling options.
Let’s look at each of the options in the “Floating Chat Buttons Widget” below.
Install Floating Chat Buttons Widget for Elementor
This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Floating Chat Buttons”
- Hover over the widget in the search results and click install
- Add your “Floating Chat Buttons” widget to any Elementor Page
Positioning Settings
Select the position of the chat button
- Fixed (Choose for sticky floating effect)
- Inline
Settings for Inline positioning.
Settings for Fixed positioning.
General Settings
General Settings
Select the menu direction to open.
- Down to Up
- Up to Down
Show Labels
Show/Hide the item title for tooltip.
Open Icon
Choose the open icon.
Close Icon
Choose the close icon.
Apply Goo Effect
Choosing yes will connect buttons with liquid effect.
Show Overlay
Show an overlay on screen when the chat buttons are expanded.
Overlay Color
Choose an overlay color.
Apply Opening Animation
This will apply an opening animation to the chat button.
Enable Attention Grabber
Turn on or off the attention grabber effect.
Attention Grabber
Select the attention grabber effect.
- Blink
- Bounce
- Fade
- Shine
- Spin
- Pulse
- Grow
- Waggle
Message Text Container Settings
Channels Settings
Manage the chat channels using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Channels Style Settings
Style Type
Select the channel icon color.
- Official Colors
- Custom Colors
Icon Color
Set the icon color.
Icon Hover Color
Set the icon hover color.
Icon Background Color
Set the icon background color.
Icon Hover Background Color
Set the icon hover background color.
Label Background Color
Set the background color for background.
Channels Responsive Settings
Floating Chat Buttons Widget Styling
You can modify every aspect of a widget’s design using different styling options. Use colors that complement the style of the site. The text, icons, fonts, and layout can be modified to make the widget look and work in the way you want.
Icons Styling
Set the button size, icon size, border radius, and shadow.
Trigger Styling
Style the background color, icon color, hover background and icon color.
Message Text Container Styling
In this section, set the width, positioning, color, radius, padding, button size and color.
Labels Styling
Style the labels typography, positioning, color, background color, padding, radius, box shadow etc.
Usage Examples
Here are some live use cases for the Floating Chat Buttons widget.
Floating chat button – open from down to up.
Floating chat button – open from up to down.
