The CRM Calculator is an interactive experience that assists users on finding their ROI as well as other detailed information that can be found beneficial. This experience contains micro animations, chart widgets, odometer counters, reveals, questions drop downs and text inputs. On the result there are custom results that give a detailed outline of the users results and additional information. This interactive experience is ideal for clients looking to build a calculator that displays a multitude of information. 

  • Type: Calculator
  • Complexity: Medium
  • Use case: Sales Enablement

Features available

Here are the major features, abilities, and interactive elements used in this template.

  • Animations
  • Chart
  • Odometer counter
  • Reveal
  • Video Background

How-to use

Here is a helpful guide on how to handle all the major features, abilities, and interactive elements available to make the most out of this template.

>> Framing screenshots


Step 1: To adjust or add an animation to a component, start by selecting the component. Navigate to the Animation panel on the right hand side.

Step 2: Set the trigger to Immediate, scroll into view, or etc.

Step 3: The second dropdown will appear and select the animation type.


Step 1: To update the chart, select the chart widget and navigate to the edit panel.

Step 2: Open the Chart Data panel to make changes to the chart. 

Step 3: Here the values, color, highlight, and label can be changed. For color, highlight, and label the color code and text should be written between two quotation marks.

Odometer counter

Step 1: Select the text with the odometer counter. Double click to open the text editor.

Step 2: Select source to edit the odometer value.

Step 3: To change the starting value, update the data-prev and 0 to the new number.

Step 4: To update the final value, update the data-val.


Step 1: To replace/change the image icon double click on the image container, on the right hand corner of the image editor select <reselect image and then select Add Images. For a similar look to the other reveal icons, upload an image that is 100px x 100px.

Step 2: To change the background color of the reveal, select the custom pod level (one above the reveal) and navigate to the Micro-Themes under background change the color. To change the border color for the reveal container select the reveal container and navigate to Borders & Corners. Set a color and set the thickness.

Video background

Step 1: Select the video container, and navigate to the edit panel.

Step 2: Under the variables, select the video type, and update the settings.

Step 3: To change the video, open the video URL and copy the Video ID.

Step 4: Paste the video ID under settings.

Content Writing Template

Here is the content structure’s template to make it easier for you when providing content guidelines or creating the copy for this template, from understanding the content structure to getting to know the amount of words needed to each text piece.

Related templates

If you like this template, you might want to check out these other similar models.

Have a question?

Still have questions or are facing troubles when handling this template? Please do not hesitate to send any additional questions to [email protected], so we can make sure to have this article constantly up to date.

Share this: