Sticky Calculator
The Sticky Calculator feature adds a floating button or sticky banner to your pages, keeping the calculator visible as users scroll. Both options provide easy access at any time, enhancing usability and engagement. This setting is straightforward to enable and can be adjusted to fit any page layout.
To enable it, follow Individual Settings -> Sticky Calculator:
On the right side of the page, you'll see a preview of the sticky calculator. Your changes will be displayed here immediately, helping you visualize how the calculator will look on the page.
Sticky Calculator Settings
The Sticky Calculator can be displayed in two distinct ways, each with its own method of interaction:
Floating Button
This option displays the calculator as a clickable button that remains in a fixed position on the screen. When clicked, the button can either open the calculator in a pop-up window or scroll the page to the calculator. This flexibility allows users to interact with the calculator without leaving their current position on the page, maintaining a clean and attractive user interface while ensuring easy access to its functionalities.
Here you can see the available settings of the Floating Sticky Button:
Position - choose where the floating button will be displayed.
Icon - indicate the icon to display on the floating button. You can use the default icon, upload your own icon in JPG, JPEG, PNG, WEBP, GIF, and SVG formats, or choose to hide the icon entirely.
Title - select the title to be displayed on the floating button. If you choose the Custom Title option indicate it to the designated area.
Select Total - choose which total(s) to display on the floating button. If multiple totals are selected, their sum will be shown.
Not Show on Pages - select the pages where the floating button should not be visible. If opening a pop-up is set as the action, the floating button will appear on every page of your website. However, if the action is set to scroll to the calculator, the button will only be displayed on pages where the calculator is located.
When multiple calculators are set as floating sticky buttons, they will appear side by side on the pages.
Sticky Banner
As an alternative, the calculator can be configured as a sticky banner located at the top or bottom of the page. When a user clicks on the banner, it can either scroll to the calculator's location or open the calculator in a pop-up window. This ensures the calculator remains highly visible and accessible at all times. Unlike the floating button, the sticky banner also includes an additional description section, allowing for more detailed information about the calculator to be shared, providing a direct and enriched point of interaction for users.
Here you can see the available settings of the Sticky Banner:
Position - choose where the sticky banner will be displayed.
Icon - indicate the icon to display on the sticky banner. You can use the default icon, upload your own icon in JPG, JPEG, PNG, WEBP, GIF, and SVG formats, or choose to hide the icon entirely.
Title - select the title to be displayed on the sticky banner. If you choose the Custom Title option indicate it to the designated area.
Description text - enter the general description of your calculator or any short text to attract users
Select Total - choose which total(s) to display on the sticky banner. If multiple totals are selected, their sum will be shown.
Not Show on Pages - select the pages where the sticky banner should not be visible. If opening a pop-up is set as the action, the sticky banner will appear on every page of your website. However, if the action is set to scroll to the calculator, the button will only be displayed on pages where the calculator is located.
Button Text - Enter the text for the button.
Only one calculator can be used with a sticky banner. Any additional calculators set to use a sticky banner will automatically become floating buttons!
Click Actions
The sticky banner and floating button support two click actions enhancing user interaction and accessibility:
Scroll to Calculator: this action automatically scrolls the user to the section of the page where the calculator is embedded, providing a seamless navigation experience directly to the tool.
Open Pop-Up: when this action is selected, clicking on the button or banner opens the calculator in a pop-up window. This allows the user to interact with the calculator without navigating away from their current position on the page.
Appearance of Sticky Calculator
The floating button and sticky banner, along with their elements and SVG icons, inherit the colors and design from the calculator's appearance.
At the bottom of the settings, there is an area to specify additional CSS classes for the Sticky Calculator. These classes will be added to the floating button or sticky banner by the Cost Calculator. You can define these classes in the appearance section of your WordPress, just like other additional classes, giving you more control over the appearance of the Sticky Calculator.
Last updated
