{"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":"2023-10-23T17:30:20","modified_gmt":"2023-10-23T17:30:20","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>The <a href=\"https:\/\/iontemplates.rockcontent.com\/preview\/premium\/calculator\/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>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>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><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>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\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh4.googleusercontent.com\/X1c3W_QmtLwggu07ABnqac02qAO9KHkoz07QDMkFfnN15Fj3osPwJLOA1rhbchrI4P2B7S_0BFPMwXian9ef682x386AmhQCsLf9QIc6yaqjeXvvL6GKgny4k1uDs-IWagJzuIOGpiQVEGA_CuhRkBY\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 2: Set the <strong>trigger to Immediate, scroll into view, or etc.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh4.googleusercontent.com\/Jty8Gw-fhn9TxE6_oq_v2iIlOoZO0p7FfTRQxH-FxZiMXnRlhy9VhN-ZKe0bo6TCCOPWEZgML-sytRzGtqJH_gWx1tNkNB1PkGxLO4KNBqWLVOMriNE6dKrWBopuheBgNcVTLBsfG6RhK0o3IZRiLlY\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 3: The second dropdown will appear and select the <strong>animation type.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh6.googleusercontent.com\/jT5HvotfP6WTuVmqZ1AgbT1FFDAiL-eQpHUHqzoFzgjOxTx2Vn3zKceSkWR0XMI20qBOVb3neLthIF34okwG9FOlcAfz88PX3fAJ1V5ZG4xPCZ_uP7X5An9mXspGpHYb5trJai-Nm-nGnRvImwssN50\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Chart<\/strong><\/h3>\n\n\n\n<p>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\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh4.googleusercontent.com\/G_4X7sfZxK8QqNJ04VPCWIJq0HAZhT35cwLvEws5eDeoY-oLKXByeMKzFaczoh1i0Uj4TQOOVBtuN8wQBHCo0G6SEl-Cq6z7lT4dM6NQ3-qrLui3_UybA2J9vZgJeo--_Xozl_3oEWqKb5Q-UG5_M2Q\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 2: Open the <strong>Chart Data panel<\/strong> to make changes to the chart.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh6.googleusercontent.com\/8A2gcuVX8ZqlIgi283p0X4sOg680KiDQe5TGLfve2Z4hzGD5DTrb5lgaEozV7uV6h22y_pa5w4CgvR88hm5aDbDfR7N0bjeT6YpuS9zx-3L3neas-Oeaw4Rh1KylOwI8-oc7Q5wtiqa-2hre4Zrp4QI\" alt=\"\"\/><\/figure>\n\n\n\n<p>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<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh3.googleusercontent.com\/85mBml7f21rKBz-ouh7IqZwf8hZ3QqQtTixtAfXIygOUylQydWAa2hHnoZ-g4uicfF4colluzrLXlQtrK3hrAyx4Qz2HjSHvoIA1u7im8DT59pvI_8OSCchtFkA9-kmAJZNO0hUpvQkG6HB8yKmEo_M\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Odometer counter<\/strong><\/h3>\n\n\n\n<p>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\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh4.googleusercontent.com\/ty5TOc3k0klaYpwWRX2yhE2PgfYv5sVCDRgaGWG_Mwu1yQVwrHIoo7odR5ZVaTnBsoy6NAvkD7tQQigw729jjgWZCDEWFeQzyzuasuEWYqSzj131zlsBLITfUCacukUgyb_Su2x-A4b40SykTmQoF9s\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 2: Select <strong>source<\/strong> to edit the odometer value.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh5.googleusercontent.com\/6q_juM6ylAR7kbl9aFxVQNkqU9DBHlPEict3M82I7rsYi7QF7f-bVaf5L6Sgf7rHVDITRMqEEoIrf-qW7WAJL_waBYNPS2LwgmtC1rmlu0Nm_to4vBBNIK9JhpEJsuv3HQ_OO4-ioQhn9TtQXLopGnw\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 3: To change the starting value, <strong>update the data-prev and 0 to the new number.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh3.googleusercontent.com\/HF4FqNPvZ_dtQx9vqKiuPh3ZG84tveZgEmIyybiuqFvj5_QtG5VshTsz-tEPbABfub-P4fO0df5GvHdLeDi5vSKT12zOx3YPXZju3ok6GYEkBgvcW4IzZRH7e5Ki4BgZBEmDc5JJo8gqfXED0EjoBCI\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 4: To update the final value, <strong>update the data-val.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh5.googleusercontent.com\/uh19XrdTvDtwXUx3XM-tx09zSP6mVo8wDrJr_Of7pOSy4Fg10VPcGm2lFn2LTGbvcfxJHvxd73ugFxwdOlPmDixmpGzxVZdCENMNGJpyM5ty3qwxsDDqEbBHLidzTwS-3eMl_G81QU2im5WmUW2ZtE0\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Reveal<\/strong><\/h3>\n\n\n\n<p>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\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh3.googleusercontent.com\/QsCIdAOqpvhpuo8ryQ8wZzpuLsrCKSQG5baWWPjrYn2Kf0Upnu7eU9nE_qMoLADmTace35Sq0FdU4ov0-mteTxS260I_9q5eZrutGFDNe_Q1wyG7LzzMcdjuqbO6Ec3LuJJlqvnMLGuiAlAeBQvQdTU\" alt=\"\"\/><\/figure>\n\n\n\n<p>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<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh4.googleusercontent.com\/1Ih68pToiPYgfqlY52SNmW6mGRKIWc2M0PcJF_Vnqy0T46YQKb2_WyywmB0qbMOMJXy2sBQq7xCQlQfI0Akd3hg6R3tS0KTXqD32QL6ZFomdKpEpxWtWg58Jz94JoY0pO58-l_onHp5fTm5hYh70jfk\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Video background<\/strong><\/h3>\n\n\n\n<p>Step 1: Select the video container, and <strong>navigate to the edit panel.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh3.googleusercontent.com\/xz4SuIh-gjwllp-0_UxUGws9u92bAOE-Vfkp3OfDuIVfOu2M-Y7kO068oRFRpNFlEDaE-4bBozPM8GwtKZioQ8Q715endkjWbeLqH7X4CGQUABic5YoJDerAYxynR4P2id7m0uM51I7r0wg5UMnA8yA\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 2: Under the variables, select the <strong>video type, and update the settings.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh3.googleusercontent.com\/_V1hBxAQSNCny0CLsSiacV3kg7U0s6SjVU4HrWLNTqZnnEk6e019qrUEP6kPLwv2GzXhiWC2EC6Q-ea5sk5_P0qHS3tURiDNeXj7o9CcPRtR33q-hgupBz1g8BTnJLekv_1Ep0JWliuqG9ntcGs8Ksw\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 3: To change the video, open the video URL and copy the <strong>Video ID<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh5.googleusercontent.com\/7uX_Zx23GE8_klpAzC-FEZ21flKEDqNnPd2J8YqzgxItGDN992K5F9dkxngEftQAy7CZXc8nzb70MiBZ5NtRAxTZa6RsqpWNgB6TdXfaK9jmzQtlxDdRGoXOt9p0B1ONtVfUhuattbtiN1mHwHJPSHQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 4: Paste the video ID under <strong>settings<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh3.googleusercontent.com\/AkdE_hKNWCAAb8pfoWLAulifFHFaU-wdU0nko69yEvc9Z76cnwUylVMcxNMN18GgN0G7PET9rLbnQZB4gr-D57f-T7ci3GrFKctkjgRlQUGJqGSjVnI9WCjpIgqdIPlaJSEmpjVAZcSVzSVBtPZu1kE\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Content Writing Template<\/h2>\n\n\n\n<p><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>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:\/\/rockcontent.com\/gallery\/crm-calculator\/\">CRM Calculator<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/quickstartcloud.postclickmarketing.com\/preview\/standard\/calculator\/easy-calculator\">Easy Calculator<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/quickstartcloud.postclickmarketing.com\/preview\/premium\/calculator\/paid-media\">Paid Media Calculator<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/quickstartcloud.postclickmarketing.com\/preview\/premium\/calculator\/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>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}]}}