{"id":4872,"date":"2023-02-02T10:36:08","date_gmt":"2023-02-02T10:36:08","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/?p=4872"},"modified":"2026-07-18T15:02:22","modified_gmt":"2026-07-18T15:02:22","slug":"how-to-use-the-crm-calculator-template","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/how-to-use-the-crm-calculator-template\/","title":{"rendered":"How to use the CRM Calculator Template"},"content":{"rendered":"\n<div style=\"position: relative; padding-bottom: 56.25%; height: 0;\"><iframe src=\"https:\/\/www.loom.com\/embed\/58925b2815504d8d9f2a630c6643e76a?sid=8f7b8299-3ddd-4f41-9cb1-6ec6b81bdb34\" frameborder=\"0\" webkitallowfullscreen=\"\" mozallowfullscreen=\"\" allowfullscreen=\"\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\"><\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">The <a href=\"https:\/\/ioninteractive.com\/gallery\/crm-calculator\/\">CRM Calculator<\/a> 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.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Type: Calculator<\/li>\n\n\n\n<li>Complexity: Medium<\/li>\n\n\n\n<li>Use case: Sales Enablement<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Features available<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here are the major features, abilities, and interactive elements used in this template.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Animations<\/li>\n\n\n\n<li>Chart<\/li>\n\n\n\n<li>Odometer counter<\/li>\n\n\n\n<li>Reveal<\/li>\n\n\n\n<li>Video Background<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How-to use<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/drive.google.com\/drive\/folders\/1MLfJh4mFZdK-sygegE10vO1aAwxEWBNB?usp=drive_link\">&gt;&gt; Framing screenshots<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Animations<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Step 1: To <strong>adjust or add an animation to a component<\/strong>, start by selecting the component. Navigate to the <strong>Animation panel<\/strong> on the right hand side.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2026\/07\/task3521-current-template-animations.png\" alt=\"Current Ion interface for Animations\"\/><figcaption class=\"wp-element-caption\">Current Ion interface supporting the Animations steps in this guide.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Step 2: Set the <strong>trigger to Immediate, scroll into view, or etc.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Step 3: The second dropdown will appear and select the <strong>animation type.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Chart<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Step 1: To update the chart, select the <strong>chart widget and navigate to the edit panel<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2026\/07\/task3521-current-template-elements-palette.png\" alt=\"Current Ion interface for Chart\"\/><figcaption class=\"wp-element-caption\">Current Ion interface supporting the Chart steps in this guide.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Step 2: Open the <strong>Chart Data panel<\/strong> to make changes to the chart.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Step 3: Here the values, color, highlight, and label can be changed. For color, highlight, and label the color code and text should be <strong>written between two quotation marks.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Odometer counter<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Step 1: Select the text with the odometer counter. <strong>Double click to open the text editor.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2026\/07\/task3521-current-template-creative-css.png\" alt=\"Current Ion interface for Odometer Counter\"\/><figcaption class=\"wp-element-caption\">Current Ion interface supporting the Odometer Counter steps in this guide.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Step 2: Select <strong>source<\/strong> to edit the odometer value.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Step 3: To change the starting value, <strong>update the data-prev and 0 to the new number.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Step 4: To update the final value, <strong>update the data-val.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Reveal<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Step 1: To replace\/change the image icon <strong>double click on the image container<\/strong>, on the <strong>right hand corner of the image editor select &lt;reselect image<\/strong> and then <strong>select Add Images<\/strong>. For a similar look to the other reveal icons, upload an image that is 100px x 100px.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2026\/07\/task3521-current-template-reveal-settings.png\" alt=\"Current Ion interface for Reveal\"\/><figcaption class=\"wp-element-caption\">Current Ion interface supporting the Reveal steps in this guide.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Step 2: To change the background color of the reveal, select the custom pod level (one above the reveal) and navigate to the <strong>Micro-Themes under background change the color<\/strong>. To change the border color for the reveal container select the reveal container and navigate to <strong>Borders &amp; Corners<\/strong>. Set a color and set the thickness.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Video background<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Step 1: Select the video container, and <strong>navigate to the edit panel.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2026\/07\/task3471-current-video-settings.png\" alt=\"Current Ion interface for Video Background\"\/><figcaption class=\"wp-element-caption\">Current Ion interface supporting the Video Background steps in this guide.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Step 2: Under the variables, select the <strong>video type, and update the settings.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Step 3: To change the video, open the video URL and copy the <strong>Video ID<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Step 4: Paste the video ID under <strong>settings<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Content Writing Template<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/docs.google.com\/spreadsheets\/d\/1ADL3V8LuEJ2XtF6T3N4Ppkv1sQDrUnDjZH64xpoGH3Q\/edit?usp=sharing\">Here is the content structure\u2019s template<\/a> 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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Related templates<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you like this template, you might want to check out these other similar models.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/ioninteractive.com\/gallery\/crm-calculator\/\">CRM Calculator<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/ioninteractive.com\/gallery\/easy-calculator\/\">Easy Calculator<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/ioninteractive.com\/gallery\/paid-media-calculator\/\">Paid Media Calculator<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/ioninteractive.com\/gallery\/savings-calculator\/\">Savings Calculator<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Have a question?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Still have questions or are facing troubles when handling this template? Please do not hesitate to send any additional questions to <a href=\"mailto:help@ioninteractive.com\">help@ioninteractive.com<\/a>, so we can make sure to have this article constantly up to date.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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, [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":5258,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[39],"tags":[],"class_list":["post-4872","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-templates-gallery"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/4872","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=4872"}],"version-history":[{"count":0,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/4872\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5258"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=4872"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=4872"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=4872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}