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.
Snap Vertical
Choose where to snap the button to.
- Top
- Bottom
Vertical Distance
Set the vertical spacing for the button.
Snap Horizontal
Choose where to snap the button to.
- Left
- Right
Horizontal Spacing
Set the horizontal spacing for the button.
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 #
Subject Input Label
Type the input subject label.
Subject Input Placeholder
Type the subject input placeholder.
Message Text Area Label
Type message text area label.
Message Text Area Placeholder
Type message text area placeholder.
Button Text
Type the button text.
Channels Settings #
Manage the chat channels using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Title
Set a Title for your chat channel.
Channel
Select the desired channel.
- Regular Link
- SMS
- Phone (Click to call)
- Slack
- Skype
- Viber
- SnapChat
- Line
- Telegram
- Tik Tok
- Vkontakte
Icon
Choose the icon to display.
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 #
Show on Desktop
Show/Hide the channel item on desktop.
Show on Tablet
Show/Hide the channel item on tablet.
Show on Mobile
Show/Hide the channel item on mobile.
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.
