Adding an ROI calculator

Want to empower your buyers to understand the value you provide? You're in the right place! 

Add an ROI Calculator to your Qwilr Page to show the value you can bring - in an easy-to-understand way. Your client can move the interactive slider to see those benefits grow - and it's totally customizable so you can decide what value means to you. 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. 

In this article:

• Adding an ROI calculator
• Adding your variables
• Adding a formula (Links to a separate article)
• Styling the calculator
• What your client sees
• Deleting a calculator

Here's a detailed video to help you get started. You can also read the steps below. 

Adding an ROI calculator

You're able to add multiple ROI calculators within your Qwilr Page to showcase different types of value.

To get started, add a new Block to your page (or use an existing block). Click the + symbol, which appears on any blank line in your Block, then click 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

Next, let's look at adding 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.

Your calculator can have any number of variables – whatever you need!

Step 1: Add a label that describes the result of your ROI calculation. 

Step 2: Click the Slider Options icon 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. 

Step 3: Fill in the details for your Slider 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 

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, click the Show Calculator button in the top left of the calculator.

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.

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

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

Want to make the calculator stand out on your Qwilr Page? You can add a background color or a background image.

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.

To change the slider button's color, select one in the Editor. Your changes will be saved automatically

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.

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.

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

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 buyer sees

The ROI calculator is designed to help you and your buyers have a great conversation about the value you offer. To help with this, both you and your buyer 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 buyers 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 buyer's view.

If your buyer 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

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

If you have any feedback or questions, please reach out to [email protected] anytime!