How to Use the Floating Button
One of the ways to trigger a popup is by using a Floating Button. The button will be shown on your website all the time and the popup will be opened as soon as the button is clicked.
Let's see how to use the Floating Button in Popup Builder plugin.
Make sure to have at least one popup created so you can use the Floating Button.
Open the popup editing area from Popup Builder Plugin and click the "Enable" button under the Floating Button.
You can customize the following options for your floating button.
Choose the Style of the button from the available options: Corner and Basic.
Customize the Floating Button Position.
If the Style is Basic, the following Position types are available: Top left, Top right, Bottom left, Bottom right, Top center, Bottom enter, Right center, Left center. You can also customize the Position Top and Position right with percents. The default values are 40% for Position Top and 50% for Position Right.
If the Style is Corner, the following Position types are available: Top left, Top right, Bottom left, Bottom right.
Customize the Font size.
Choose a Background color.
Set a Text color for the button.
And insert the text you wish.
That's it! Now you have a popup which will be triggered by a Floating Button.
Note: If you want the popup to appear just on the Floating Button click, make sure to have either "Set by CSS class" or "On Click"chosen from the Popup Events section. Of course, you can have any other event chosen as well, but then the popup will appear depending on that event as well, not just on Floating Button click. Let's say, if you have the Popup Event "On Load", then the popup will appear both when the website is loaded and when the Floating Button is clicked.
Note: Make sure to have a Display Rule chosen for the popup and have the popup published.
Let's see how to use the Floating Button in Popup Builder plugin.
Make sure to have at least one popup created so you can use the Floating Button.
Open the popup editing area from Popup Builder Plugin and click the "Enable" button under the Floating Button.
You can customize the following options for your floating button.
Choose the Style of the button from the available options: Corner and Basic.
Customize the Floating Button Position.
If the Style is Basic, the following Position types are available: Top left, Top right, Bottom left, Bottom right, Top center, Bottom enter, Right center, Left center. You can also customize the Position Top and Position right with percents. The default values are 40% for Position Top and 50% for Position Right.
If the Style is Corner, the following Position types are available: Top left, Top right, Bottom left, Bottom right.
Customize the Font size.
Choose a Background color.
Set a Text color for the button.
And insert the text you wish.
That's it! Now you have a popup which will be triggered by a Floating Button.
Note: If you want the popup to appear just on the Floating Button click, make sure to have either "Set by CSS class" or "On Click"chosen from the Popup Events section. Of course, you can have any other event chosen as well, but then the popup will appear depending on that event as well, not just on Floating Button click. Let's say, if you have the Popup Event "On Load", then the popup will appear both when the website is loaded and when the Floating Button is clicked.
Note: Make sure to have a Display Rule chosen for the popup and have the popup published.
Updated on: 11/08/2021
Thank you!