Boost engagement with interactive calculators – from budgets to carbon footprints
Discover our premium template, perfect for creating powerful, embeddable calculators – with Google Sheets integration
Calculators are a powerful tool for understanding complex data and making informed decisions. They allow users to input data and receive a calculated result based on a predetermined formula. However, building a calculator can be a challenging task, requiring custom development and multiple tools. That’s why we’re excited about our Calculator template, which allows you to design, publish and embed customizable calculators with ease. Plus, the template also features seamless Google Sheets integration, making it easier than ever to collect, analyze and visualize data from your calculators.
The Calculator is one of our premium templates, available to users on our premium plans. Get in touch with our sales team to learn more.
This template is for anyone who wants to provide context on a topic by guiding the user through a series of questions and calculating a score accordingly. It allows you to put together your own set of custom questions, collect answers and display results based on a formula. Here are a few examples of how this template could be used:
Personal finance tools: A calculator that allows users to input their income, expenses, and debt to calculate monthly budgets, debt-to-income ratios, and savings plans.
Health and fitness calculators: A calculator that helps users determine their body mass index (BMI), ideal body weight, or recommended daily caloric intake based on their age, gender, and physical activity level.
Real estate calculators: A calculator that helps users estimate their mortgage payments, property taxes, and insurance based on their loan amount, interest rate, and home value.
These are just a few examples of the types of calculators that can be created using this template. With a little creativity and some knowledge of formulas, the possibilities are endless.
The personal footprint calculator below is an example of how customizable the Calculator template is – you can utilize HTML to create full layouts and even embed other Flourish visuals in the results area.
Features, features
With an intuitive and user-friendly interface, creating a custom calculator has never been easier. Our template makes it simple to configure questions, define formulas, and customize the design to match your brand and style.
It’s completely flexible in incorporating your choice of fonts and colors: if you have a custom theme already set up, the template will automatically apply your preferred color palette and typefaces. Furthermore, you can customize the sizing and layout to create a vertical or horizontal calculator display that best suits your design preferences.
Flourish calculator visualizations have two layout options: Horizontal and Vertical.
Another exciting aspect of this template is its ability to display images or GIFs alongside questions, adding a touch of fun and visual interest to engage users. Moreover, you can tailor the output format to your liking by utilizing custom HTML, allowing for endless possibilities in presenting your calculated results. Learn more about this in our help doc.
You can tailor the output format to your liking by utilizing custom HTML. You can even embed other Flourish visuals in your result text.
Data requirements
Like all Flourish templates, the Calculator template is set up with a preview and a data tab. Whether you’re working with simple or complex datasets, our Calculator template is designed to support a wide range of use cases and question combinations.
In the data tab, you can upload or link a simple spreadsheet of data, where each row represents a question and each column some metadata for that question, including the question type, answer options and fallback answers.
Each row in the datasheet represents a question and each column some metadata for that question, including the question type, answer options and fallback answers.
For the questions, you can provide a range of input options, including number inputs, text inputs, single/multi-response buttons, dropdown menus, date pickers, and sliders. You can configure questions with different types of inputs. Explore the available input options in our example below.
To display the result, you can directly include the answer values, define your own variables and even create your own formulas to calculate scores or define custom outputs. You can use any of the Microsoft Excel-adjacent formula functions Formula.js offers. Learn more in our help doc.
You can define your custom variables, formulas and output in the Result settings.
The results can be returned directly to the user or additionally sent to a Google Sheet.
To get started
Our Calculator template provides an easy-to-use, all-in-one solution for creating customized calculators without the need for custom development or multiple tools. Our template is also fully customizable, allowing you to configure the design and layout to match your branding and preferences. To get started:
- Select one of our Calculator starting points.
- Go to the Data tab and paste, upload or link your questions and answers.
- In the Result section of the settings panel, define variables and formulas in order to calculate the results.
- Customize the look-and feel of your calculator in the settings. You can customize everything from the calculator layout to the colors.
- Publish and embed to generate a script or iframe embed code.
- Optionally link your calculator to a Google Sheet in order to store your results externally.
Storing your results in a Google Sheet
Our Calculator template also includes a module for saving user responses to a Google Sheet. This means that you can collect and analyze data from your calculators, as well as use the data to inform other projects.
To use the module, simply connect your Google Sheets account by adding a Google Apps script code and select the sheet where you’d like to store the responses. You can also choose which responses to include and configure the layout of the sheet. Once the module is set up, all user responses will be automatically saved to the Google Sheet in real-time.
Using our "External write" setting, you can automatically save user responses to a Google Sheet and other endpoints in real-time.
With this feature, you can easily track and analyze user responses to gain insights and make data-driven decisions. The Google Sheets integration is a groundbreaking addition to Flourish templates, as it allows users to link the output of their visualizations directly to other systems for the first time. This has been a much-requested feature in the past, and we’re thrilled to introduce it with our Calculator template. Learn more about this in our help doc.
But that’s not all – the Google Sheets integration also opens up exciting possibilities for using the same data to power a different Flourish visualization in near real-time. For example, you can use the responses from a survey or calculator to create a bar chart, scatter plot or Survey visualization, giving you a quick and easy way to visualize the data and communicate the insights. Participate in our poll below to see an example of this:
Happy calculating!
Flourish’s Calculator template provides a powerful tool for premium users to create customizable calculators with ease. With a range of input options, customization capabilities, and now the seamless integration with Google Sheets, our Calculator template offers a one-stop-shop for building powerful calculators that can be embedded in any website. Try it out today and see how you can use it to better understand complex data and make informed decisions.