fbpx

Need Help?

Here are some good places you cant start.

Join the Community

Whats New?

Get updated about all the good stuff!

Floating Chat Buttons

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.

  1. Go to Unlimited Elements Widget Library
  2. Search in the search bar for “Floating Chat Buttons”
  3. Hover over the widget in the search results and click install
  4. 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.

1
Snap Vertical

Choose where to snap the button to.

  • Top
  • Bottom
2
Vertical Distance

Set the vertical spacing for the button.

3
Snap Horizontal

Choose where to snap the button to.

  • Left
  • Right
4
Horizontal Spacing

Set the horizontal spacing for the button.

General Settings #

1
General Settings

Select the menu direction to open.

  • Down to Up
  • Up to Down
2
Show Labels

Show/Hide the item title for tooltip.

3
Open Icon

Choose the open icon.

4
Close Icon

Choose the close icon.

5
Apply Goo Effect

Choosing yes will connect buttons with liquid effect.

6
Show Overlay

Show an overlay on screen when the chat buttons are expanded.

7
Overlay Color

Choose an overlay color.

8
Apply Opening Animation

This will apply an opening animation to the chat button.

9
Enable Attention Grabber

Turn on or off the attention grabber effect.

10
Attention Grabber

Select the attention grabber effect.

  • Blink
  • Bounce
  • Fade
  • Shine
  • Spin
  • Pulse
  • Grow
  • Waggle

Message Text Container Settings #

1
Subject Input Label

Type the input subject label.

2
Subject Input Placeholder

Type the subject input placeholder.

3
Message Text Area Label

Type message text area label.

4
Message Text Area Placeholder

Type message text area placeholder.

5
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
1
Title

Set a Title for your chat channel.

2
Channel

Select the desired channel.

  • Regular Link
  • Email
  • SMS
  • Phone (Click to call)
  • WhatsApp
  • Slack
  • Twitter
  • Skype
  • Viber
  • Facebook
  • WeChat
  • SnapChat
  • Line
  • Telegram
  • Instagram
  • LinkedIn
  • Tik Tok
  • Vkontakte

 

3
Icon

Choose the icon to display.

Channels Style Settings #

1
Style Type

Select the channel icon color.

  • Official Colors
  • Custom Colors
  •  
2
Icon Color

Set the icon color.

3
Icon Hover Color

Set the icon hover color.

4
Icon Background Color

Set the icon background color.

5
Icon Hover Background Color

Set the icon hover background color.

6
Label Background Color

Set the background color for background.

Channels Responsive Settings #

1
Show on Desktop

Show/Hide the channel item on desktop.

2
Show on Tablet

Show/Hide the channel item on tablet.

3
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.

Video Overview #

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!