Adding an ROI calculator

Want to create a powerful picture of the value you bring to your client? Add an ROI calculator to your page. Your client can move the interactive slider to see those benefits grow.

ROI calculators can represent any type of value: money spent or saved, time or resources saved, new leads generated, or anything else you can dream up. 

Adding an ROI calculator

You can have as many ROI calculators in a page as you like. 

To get started, you can add a new block to your page or use an existing block. Click the + symbol, which appears on any blank line in your block. That brings up a menu of insertable content. Choose ROI Calculator.

You can choose one of the preset calculators to edit, or choose the blank calculator to start building from scratch.

Adding your variables

The next step is to create the variables for your ROI calculation. Variables are the symbols that represent your numbers. Why not just use numbers? Because in an ROI calculation, you'll want to be able to change the numbers. So we use variables to allow that flexible calculation.

Note: If you currently use spreadsheets for calculating, you can think of these variables like the individual cells in a spreadsheet.)

Your calculator can have any number of variables – whatever your calculation needs!

As a first step, add a label that describes the result of your ROI calculation. 

Setting up the Slider variable

The next step is to choose which variable you'll assign to the slider. This is your variable in motion - the number that will change as your client moves the slider. 

To set up this variable, click on the Slider Options icon.

From there, enter these settings:

• Label: The name you're giving the slider, or the value it represents
• Min/Max: The smallest and largest numbers the slider can represent
• Initial value: The spot where the slider begins by default. It might be the minimum value, or any other number
• Increment: How much the numbers advance as your client moves the slider 
• Highlight color: Choose one of your brand colors for the slider button

Setting up the other variables

With your Slider variable in place, it's time to set up the rest of your variables. To get started, head to the top left corner of the ROI widget. Click the Show Calculator button.

The variables list will open in a sidebar. If you've chosen one of the preset calculators, you'll see several variables in place. If you chose the blank calculator, you'll see one placeholder variable.

Editing an existing variable

To edit the variable details, click on the Variable Options icon.

From there, you can change the label and range of numbers. You can also add a prefix, like a currency symbol, or a suffix, like a unit of measurement.

Setting a range for your variable

Why set up a minimum and maximum for each variable? It's so that your client will be able to play with the parameters of the calculation. In their view, they'll be able to open the calculator and enter different numbers for each variable, but only within the ranges you've set.

Sometimes, you won't want a variable to be changeable. In that case, you can set the same value as the minimum and maximum.

Creating a new variable

If you want to add new variables to a calculator, click the Add Variable button. Then click the Variable Options icon to edit the details.

Deleting a variable

You can delete any variable by clicking on the Variable Options icon and then clicking the Delete Variable button.

Note: If you already have a formula in place in the calculator, we recommend editing existing variables instead of deleting them. Deleting variables can break your formula.

Adding a formula

Please see this guide for more details on writing formulas.

Styling the calculator

To make the calculator stand out on your Qwilr Page, you can also add a background color or a background image.

Adding a background color

To get started, click on the top edge of the calculator. That brings up a toolbar. Click the styling icon.

Choose one of your brand colors to apply a background to the calculator. The text color will adjust automatically.

Changing the slider color

To edit the slider button's color, click the Slider Options icon.

Choose the brand color for the slider. The change saves automatically.

Adding a background image

Alternatively, you can use an image as the background of your calculator. To get started, head to the top right corner of the calculator and click the Background Image button.

(If you're using one of the preset calculators, this button will remove the default image. Click it again to add a new image.)

That action opens your image library. You can then upload an image, choose one from our stock library, or choose an image you've already uploaded.

Note: Because Qwilr's layout is mobile-responsive, the image you choose will be cropped automatically for different screen sizes. We recommend choosing a flexible image, as sections of it will crop out on smaller screens.

When you've chosen your image, click on the top edge of the calculator to bring up the toolbar. Click the styling icon.

From there, you'll be able to choose a color tint to apply to the background image, and change its opacity. You can also adjust the focus of your background image, making it slightly blurry.

If you need to update the color of the slider button so it works better with your background image, click on the Slider Options icon.

If you want to remove or replace the background image, head to to the top right corner and click the  Remove Background Image button.

What your client sees

The ROI calculator is designed to help you and your client have a great conversation about the value you offer. To help with this, both you and your client will have access to update the numbers. 

You can customize the field at the top of the calculator to let your client know what numbers they can change, or any other assumptions you've discussed with them.

Your client will be able to move the slider to change the numbers of the Slider variable. They can also click the Show Calculator button to display the current value of each variable. They can enter new values as well (within the ranges you've pre-set).

Here's an example of a client's view.

If your client enters a number that's outside of the range you've set for that variable, they'll see a message to let them know what the range is.

Deleting a calculator

Note: Keep in mind that deleting a calculator from your page deletes all variables and the formula. You might want to record these details somewhere before deleting.

Click on the top edge of the calculator to bring up a toolbar. Then click the trash can icon to delete.