The ROI Calculator template is a streamlined, interactive experience that guides visitors through entering their core performance metrics and instantly generates clear, detailed results. It simplifies complex calculations into an intuitive format, making it easy for users to understand the potential impact of their investment and engage further with your content.
Here’s how to set it up and customize it for your content:
What is the ROI Calculator template?
The ROI Calculator template is a streamlined experience that guides visitors through entering their performance metrics and reviewing detailed results:
- Guided Input Flow: A clean, dedicated input page collects 4 essential data points (Monthly Spend, Conversion Rate, Cost per Click and Average Sale Value).
- Dynamic Results Page:After submitting inputs, users are taken to a dedicated results screen displaying: Total Clicks, Number of Sales, Total Revenue, Profit and ROI Percentage.
- Clear, Structured Layout: Each result is highlighted in its own container, making complex calculations easy to understand at a glance.
- Optional Engagement Elements: Include a newsletter subscription field on the results page to capture leads or nurture prospects.
Step-by-step guide to using the template
Update the icons
- To replace the icons to images that better fit your brand, double click on the element or click on the element highlighted in the image below:
- On the popup window, click on “Reselect image” on the top right corner and create a library or upload to a preexistent image library.
Adding anchors
- You can guide the user with the use of anchors, with the ROI the “Start now” button has an action to scroll to an anchored section. To make one, select the element that’s going to be used as an anchor.
- With the element selected on the top right click on the anchor icon, the anchor must have an unique name. Don’t forget to hit the “ok” button to save it.
- Now, add a button or a link and give them a behavior, it is located on the Settings tab.
- On the popup window select the anchor and give it an unique tag. Save it by clicking on the “Apply” button.
Adding animations
- Animations are a way to win and retain the attention of the user, but it can also come to their aid, guiding them on where to click next. Select the element you want to animate and click on the highlighted button shown below:
- Upon clicking on it, you’ll be presented with different trigger actions, you can learn about them in this article. Select the animation that better suits your needs.
- Whilst the first options are regarding the type of animations you can apply and the actions to trigger them, the last three options: Delays, Duration and Looping are more customisable settings, where you can adjust how long it’ll take for an animation to start, how long it’s going to last and how many times it’s going to repeat.
Test and Publish
Before going live, preview your ROI Calculator on all devices to ensure the experience works as expected. Enter sample data to confirm that calculations display correctly, labels are accurate, and any optional lead capture fields function properly. Once everything is verified, publish your calculator as a standalone page or embed it on your website – ready to engage visitors and demonstrate the value of your solution.
