# Sticky Calculator {% embed url="" %} 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. {% tabs %} {% tab title="Floating Button" %}

{% endtab %} {% tab title="Sticky Banner" %}

{% endtab %} {% endtabs %} 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.

Preview section of the Sticky Calculator

## Sticky Calculator Settings The **Sticky Calculato**r 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. {% hint style="info" %} When multiple calculators are set as floating sticky buttons, they will appear side by side on the pages. {% endhint %}

Multiple Sticky Calculators on the same page

### 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. * **Button Tex**t - Enter the text for the button. {% hint style="danger" %} Only **one calculator** can be used with a sticky banner. Any additional calculators set to use a sticky banner will automatically become floating buttons! {% endhint %} ### Click Actions The sticky banner and floating button support eight 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.

#### Pop-up Order Form or Payments Opens an order form with calculation results and payment options in a pop-up, facilitating immediate action from the user.

{% hint style="info" %} Values should be indicated to the calculator **beforehand** or you can indicate some default values in your calculator to avoid zero value in total and charge users. {% endhint %} #### Download PDF Allows users to download a **PDF detailed quote** directly with a single click.

{% hint style="warning" %} Do not forget to enable [**PDF Entries**](https://docs.stylemixthemes.com/cost-calculator-builder/cost-calculator-settings/global-settings/pdf-entries) in **Global Settings** to make the function work. {% endhint %} #### Share Invoice Enables users to quickly share an invoice via email directly from the calculator.

{% hint style="warning" %} Click Action will be **disabled** if the[ **Email Quote**](#user-content-fn-1)[^1] setting is **OFF.** Do not forget to set up [**SMTP settings**](https://docs.stylemixthemes.com/f-a-q/smtp-settings) to make email sending work. {% endhint %} #### WooCheckout Action After Submit Redirects users to the WooCommerce checkout page automatically after clicking the button.

Opened WooCheckout Page after clicking the button

{% hint style="info" %} Values should be indicated to the calculator **beforehand** as clicking the button shares the **total amount to WooCommerce** after clicking the button. You can also set some d**efault values** to your calculator so that even without touching the calculator, the total price will not be zero. {% endhint %} {% hint style="warning" %} This click action works only once [**WooCheckout**](https://docs.stylemixthemes.com/cost-calculator-builder/cost-calculator-settings/calculator-settings/woo-checkout) is **ON.** {% endhint %} #### WooProduct as Open Modal Displays a calculator in a modal window on the WooProduct page only, keeping users on the current page while providing product information.

WooProduct page with Calculator as open modal

{% hint style="warning" %} This click action works only once [**WooProducts**](https://docs.stylemixthemes.com/cost-calculator-builder/cost-calculator-settings/calculator-settings/woo-products) is **ON.** {% endhint %} #### WooCheckout Action on WooProduct Page Initiates a checkout process immediately after clicking the button, streamlining the buying process on the **WooProduct page** only. In this case, Sticky Calculator will not be displayed on the other page.

WooCheckout page after clicking the button

{% hint style="warning" %} This click action works only once [**WooCheckout**](https://docs.stylemixthemes.com/cost-calculator-builder/cost-calculator-settings/calculator-settings/woo-checkout) and [**WooProducts**](https://docs.stylemixthemes.com/cost-calculator-builder/cost-calculator-settings/calculator-settings/woo-products) are **ON.** {% endhint %} ### Not Show on Pages In click actions[ **Scroll to Calculator**](#scroll-to-calculator)**,** [**Open a pop-up,**](#open-pop-up)[ **Download PDF,**](#download-pdf) [**Share Invoice,**](#share-invoice) and [**WooChecout action after submit** ](#woocheckout-action-after-submit)there is one extra setting called Not Show on pages. With the help of it, you can indicate the pages where you do not want to display the sticky calculator. On other pages, they will be displayed.

### Show Calculator on Background In click actions [**Pop-up order form or payments,**](#pop-up-order-form-or-payments) [**Download PDF,**](#download-pdf) [**Share Invoice,**](#share-invoice) [**WooCheckout action after submit,** ](https://docs.stylemixthemes.com/cost-calculator-builder/cost-calculator-settings/calculator-settings/woo-checkout)and [**WooCheckout Action on WooProduct Page**](#woocheckout-action-on-wooproduct-page) there is another additional setting called Show Calculator in the background. If you disable the setting, the calculator will not be displayed on the pages where it was placed, but only a floating button or sticky banner will be displayed according to your choice.

### 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](https://docs.stylemixthemes.com/cost-calculator-builder/plugin-features/calculator-customization).

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. [^1]: Global Settings -> Order Form -> Email Quote Button