Customer support calculator

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Customer support calculator | Pendo.io</title> <meta name="description" content="In customer support, time is money. Use this simple calculator to find out how much you could be saving with Pendo."> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="https://go.pendo.io/rs/185-LQW-370/images/favicon.ico"> <link rel="stylesheet" href="https://go.pendo.io/rs/185-LQW-370/images/tailwind.min.css"> <link rel="stylesheet" href="https://go.pendo.io/rs/185-LQW-370/images/fonts.css"> <script type="text/javascript" src="//cdn.reachforce.com/SmartForms.js" data-token="144201"></script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&family=Sora:wght@400;600;700&display=swap" rel="stylesheet"> <script type="text/javascript"> (function() { var didInit = false; function initMunchkin() { if(didInit === false) { didInit = true; Munchkin.init('185-LQW-370', { 'domainLevel':'2' }); } } var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = '//munchkin.marketo.net/munchkin.js'; s.onreadystatechange = function() { if (this.readyState == 'complete' || this.readyState == 'loaded') { initMunchkin(); } }; s.onload = initMunchkin; document.getElementsByTagName('head')[0].appendChild(s); })(); </script>  <meta name="robots" content="index, nofollow">   <style> .font-sans { font-family: 'Inter', sans-serif; } .font-display { font-family: 'Sora', sans-serif; } a, p, li, span { font-family: 'Inter', sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: 'Sora', sans-serif; } .form-checkbox { border-color:#060119; } .pank-100 { background-color: #FF4876; } .form-checkbox{border-color:#9CA3AF!important;} .calc__bg { /* background:url('https://go.pendo.io/rs/185-LQW-370/images/BackgroundCurve_Gradient_Purple_2x.png') no-repeat; background-size:100%; background-position:center -240px; */ background-color: #550ed4; } #annualTixVol, #tixDeflectionTotal, #costSavingTotal, #hoursSaved { font-size:32px; font-weight:300; color:#550ed4; margin-bottom:0; } .calc__bg-cr { /* background:url('https://www.pendo.io/wp-content/uploads/2021/08/BackgroundCurve_Gradient_Pink-Orange_2x.png') no-repeat; background-size:100%; background-position:center -240px; */ background-color: #550ed4; } .cr__outputs { background-color:#f7f1ff; padding:36px; border-radius:10px; } .cr__outputs input:disabled, input[readonly], textarea:disabled, textarea[readonly] { background-color: #f7f1ff; cursor: auto; border: none; box-shadow: none; box-sizing: unset; padding: 0; } .cs__outputs { background-color:#f7f1ff; padding:36px; border-radius:10px; } .cs__outputs input:disabled, input[readonly], textarea:disabled, textarea[readonly] { background-color: #f7f1ff; cursor: auto; border: none; box-shadow: none; box-sizing: unset; padding: 0; } #estARR, #churnCost, #newChurn, #customersRetained, #reduxChurn, #reduxChurnTotal { font-size:32px; font-weight:300; color:#550ed4; margin-bottom:0; } .brand-color{ color: #550ed4; } .bg-brand-color{ background-color: #550ed4; } .bg-color{ background-color: #f7f1ff; } @media screen and (min-width:64em) and (max-width:85.25em) { .calc__bg { background-size: cover; background-position: center -30px; } .calc__bg-cr { background-size: cover; background-position: center -30px; } } @media screen and (min-width:40em) and (max-width:63.9375em) { .calc__bg { background-size: cover; background-position: center -30px; } .calc__bg-cr { background-size: cover; background-position: center -30px; } } @media screen and (max-width:39.9375em) { .calc__bg { background-size: cover; background-position: center -30px; } .calc__bg-cr { background-size: cover; background-position: center -30px; } } </style>  <style>.async-hide { opacity: 0 !important} </style> <script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date; h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')}; (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c; })(window,document.documentElement,'async-hide','dataLayer',4000, {'GTM-PBMH543':true});</script>   <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-MBJ22KN');</script>  <style>.mktoGen.mktoImg {display:inline-block; line-height:0;}</style> </head> <body class="bg-gray-50" id="bodyId">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MBJ22KN" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>   <div class="max-w-7xl mx-auto py-4"> <div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-1 lg:grid-rows-1 lg:grid-flow-col gap-6 md:gap-4"> <div class="px-4"> <a href="https://www.pendo.io/" target="_blank"><img class="h-10 mb-2 mt-2 w-auto" src="https://go.pendo.io/rs/185-LQW-370/images/pendo-logo-primary-dark.svg" alt="Pendo Logo"></a> </div> </div> </div> <div class="calc__bg pt-12 pb-16 mb-12"> <div class="max-w-6xl mx-auto pb-12 pt-2"> <div class="grid grid-cols-1"> <div> <h1 class="text-center text-white font-bold font-display text-lg uppercase mb-4">Customer support ROI calculator</h1> <h2 class="text-center text-white font-bold font-display px-2 md:px-0 text-5xl md:text-7xl mb-10">How much customer support time could you be saving?</h2> <p class="text-center text-white font-sans text-2xl w-8/12 mx-auto">In customer support, time is money. Modify the three values below to see how much Pendo can save you.</p> </div> </div> </div> </div> <div class="max-w-7xl mx-auto -top-28 px-4 md:px-0 relative"> <div class="grid col-span-12 md:grid-cols-7" style="padding:0px;border-radius:10px;background-color:#f7f1ff;"> <div class="col-span-12 md:col-span-4 shadow-lg bg-white" style="border-radius:10px;padding:36px;"> <form> <h3 class="style-guide__headline5 color__set--chalkboard text-2xl mb-2" style="margin-top:0px;letter-spacing:0;"><strong>Support calls/tickets</strong></h3> <div class="grid grid-cols-12"> <div class="col-span-10"> <label style="padding-top:4px;" for="tixPerMonth">Average amount of customer calls/tickets <strong>per month</strong></label> </div> <div class="col-span-2"> <input class="w-full py-1" style="border:1px solid #cccccc;text-align:right;" type="number" data-type="number" id="tixPerMonth" min="0" step="10" max="15000" value="1500"> <div id="tixPerMonth"></div> </div> </div> <input class="mb-8 py-1" style="width:100%;" type="range" step="10" min="0" max="15000" value="1500" id="tixPerMonthRange" name="tixPerMonthRange"> <h3 class="style-guide__headline5 color__set--chalkboard text-2xl mb-2" style="margin-top:24px;letter-spacing:0;"><strong>Resolution time</strong></h3> <div class="grid grid-cols-12"> <div class="col-span-10"> <label style="padding-top:4px;" for="avgTimeResolve">Average time to resolve the call/ticket (minutes)</label> </div> <div class="col-span-2"> <input class="w-full py-1" style="border:1px solid #cccccc; text-align:right;" value="30" type="number" id="avgTimeResolve" name="avgTimeResolve"> </div> </div> <input class="mb-8" style="width:100%;" type="range" min="0" step="1" max="180" value="30" id="avgTimeRange" name="avgTimeRange"> <h3 class="style-guide__headline5 color__set--chalkboard text-2xl mb-2" style="margin-top:24px;letter-spacing:0;"><strong>Hourly rate</strong></h3> <div class="grid grid-cols-12"> <div class="col-span-10"> <label for="hourlyRate" style="padding-top:4px;">Average hourly rate for customer support</label> </div> <div class="col-span-2 relative"> <span class="input-group-label absolute left-4 top-1">$</span> <input class="w-full py-1" style="border-top:1px solid #cccccc;border-bottom:1px solid #cccccc;border-right:1px solid #cccccc;border-left:1px solid #cccccc;text-align:right;" type="number" id="hourlyRate" name="hourlyRate"> </div> </div> <input class="mb-8" style="width:100%;" type="range" min="0" step="1" max="75" value="35" id="avgRateRange" name="avgRateRange"> <div class="text-right mt-4"> <button class="button pendo-btn__pank text-white px-4 py-2 rounded-md uppercase font-bold font-sans" style="background-color:#550ed4;" id="calculate" type="button">Calculate</button> </div> </form> </div> <div class="col-span-12 md:col-span-3 cs__outputs"> <form> <div class="input-group flex"> <div class="flex-shrink"> <span class="input-group-label" style="background-color:#f7f1ff;border:none;font-size:32px;color:#550ed4;padding:0;font-weight:300;">Annual tickets:</span> </div> <div class="flex-1"> <input class="number-separator input-group-field" type="number" id="annualTixVol" name="annualTixVol" value="18000" style="width:100%;margin-left:8px;" disabled> </div> </div> <label class="mb-12 inline-block" style="font-size:18px;" for="annualTixVol">Average annual ticket volume</label> <div class="input-group flex"> <div class="flex-shrink"> <span class="input-group-label" style="background-color:#f7f1ff;border:none;font-size:32px;color:#550ed4;padding:0;font-weight:300;">Deflected tickets:</span> </div> <div class="flex-1"> <input class="number" type="text" id="tixDeflectionTotal" name="tixDeflectionTotal" value="1800" style="width:100%;margin-left:8px;" disabled> </div> </div> <label class="mb-12 inline-block" style="font-size: 18px;line-height: 20px;" for="tixDeflectionTotal">Number of tickets annually deflected with Pendo <span style="color:#6b6d7a;">(based on <span style="background-color;#f3f3f3;font-size:18px;"><select style="font-size:18px;width:fit-content;padding:0;box-shadow:none;border:none;height:auto;display:inline;margin-bottom:0;background-color;#f3f3f3;border-bottom:1px solid #cccccc;color:#6b6d7a;" type="text" id="tixDeflectionPercent" name="tixDeflectionPercent"> <option value="5">5</option> <option value="10" selected>10</option> <option value="15">15</option> <option value="20">20</option> </select>%</span> deflection rate)</span></label> <div class="input-group" style="width:100%;"> <span class="input-group-label" style="background-color:#f7f1ff;border:none;font-size:32px;color:#550ed4;padding:0;font-weight:300;">Hours:</span><input type="text" id="hoursSaved" name="hoursSaved" value="900" disabled style="margin-bottom:0;margin-left:8px;font-weight:700;"> </div> <label class="mb-12 inline-block" for="tixDeflectionTotal" style="font-size:18px;margin-bottom:48px;">Estimated hours saved annually</label> <div class="input-group"> <span style="background-color:#f7f1ff;border:none;font-size:32px;color:#550ed4;padding:0;font-weight:700;" class="input-group-label">$</span> <input style="font-weight:700;" type="text" id="costSavingTotal" name="costSavingTotal" value="31500" class="number input-group-field" disabled> </div> <label for="costSavingTotal" style="margin-bottom:48px;font-size:18px;">Cost savings of annually deflected tickets</label> </form> <button class="button pendo-btn__pank text-white mt-8 px-2 rounded-lg text-sm py-1 font-bold font-sans border-2" style="color:#4546E0;border-color:#4546E0;" id="email-results" type="button"><i class="inline w-4" data-feather="send"></i> Email results</button> </div> </div> </div> <div class="max-w-6xl mx-4 md:mx-auto mb-32 rounded-lg p-12 shadow-md" style="background-color:#f7f1ff;"> <div class="grid grid-cols-12 gap-2"> <div class="col-span-12 md:col-span-8"> <h3 class="text-center md:text-left font-sans font-bold text-2xl mb-4 md:mb-0">Learn more with a custom demo and see how Pendo can start delivering value to your organization on day 1.</h3> </div> <div class="col-span-12 md:col-span-4 flex items-center"> <a style="background:#550ed4;" class="px-4 py-3 rounded-md text-white mx-auto font-bold uppercase" href="https://go.pendo.io/demo-pendo.html">Schedule my demo</a> </div> </div> </div>  <div class="max-w-7xl mx-auto mt-12 px-8 mb-24 space-y-4 font-sans" style="display: block;"> <div style="display:block;"> <div class="grid grid-cols-1 px-4"> <h3 class="font-bold text-midnight font-display text-4xl text-center mb-8 mktoText" id="moreResourcesHeadline"><div><strong><span style="color: #000000; font-family: Sora; font-size: 36px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">See how Pendo can help save on customer support costs</span></strong></div> <div><br /></div></h3> <div class="mktoText text-midnight mx-auto text-2xl mb-4 text-center max-w-5xl" id="moreResourcesSubhead"><div></div></div> </div> </div> <div class="grid grid-col-1 lg:grid-cols-3 gap-12"> <div class="h-full parent shadow-xl rounded-xl relative bg-white hover:bg-blurple-30 border-2 border-white hover:border-blurple top-0 hover:-top-2 transition-all duration-300 ease-in-out"> <a href="https://www.pendo.io/product-led/how-product-led-support-improves-the-customer-experience/"> <div class="text-container p-0 mb-6 lg:mb-5"> <img class="rounded-tl-lg rounded-tr-lg" src="https://go.pendo.io/rs/185-LQW-370/images/Pendo_PLH_NewsletterImage_Onboarding.png" alt="" title="hero-feedback"> <div style="display: inline;" class="pendo-feedback uppercase text-black text-sm font-bold inline-block mt-4 mx-8 py-2 px-3 bg-color">Product-led Hub</div> <h3 class="font-sans font-bold leading-tight my-4 mx-8 text-2xl md:text-3xl"> Learn how product-led support improves the customer experience </h3> </div> </a> <a class="text-18-30 font-bold inline-block mx-8 mb-12" href="https://www.pendo.io/product-led/how-product-led-support-improves-the-customer-experience/">Learn more <span class="text-pank">-></span> </a> </div> <div class="h-full parent shadow-xl rounded-xl relative bg-white hover:bg-blurple-30 border-2 border-white hover:border-blurple top-0 hover:-top-2 transition-all duration-300 ease-in-out"> <a href="https://www.pendo.io/customers/labcorp-uses-pendo-to-identify-onboarding-friction-and-reduce-ticket-backlog-by-99-percent/"> <div class="text-container p-0 mb-6 lg:mb-5"> <img class="rounded-tl-lg rounded-tr-lg" src="https://go.pendo.io/rs/185-LQW-370/images/Pendo_PLH_NewsletterImage_June2022_BuildingaproductledenterpriseImage.png" alt="" title="hero-feedback"> <div style="display: inline;" class="pendo-feedback uppercase text-black text-sm font-bold inline-block mt-4 mx-8 py-2 px-3 bg-color">Customer Story</div> <h3 class="font-sans font-bold leading-tight my-4 mx-8 text-2xl md:text-3xl"> LabCorp uses Pendo to identify onboarding friction and reduce ticket backlog by 99% </h3> </div> </a> <a class="text-18-30 font-bold inline-block mx-8 mb-12" href="https://www.pendo.io/customers/labcorp-uses-pendo-to-identify-onboarding-friction-and-reduce-ticket-backlog-by-99-percent/">See how <span class="text-pank">-></span> </a> </div> <div class="h-full parent shadow-xl rounded-xl relative bg-white hover:bg-blurple-30 border-2 border-white hover:border-blurple top-0 hover:-top-2 transition-all duration-300 ease-in-out"> <a href="https://www.pendo.io/pendo-blog/how-to-use-pendo-to-reduce-the-burden-on-your-support-team/"> <div class="text-container p-0 mb-6 lg:mb-5"> <img class="rounded-tl-lg rounded-tr-lg" src="https://go.pendo.io/rs/185-LQW-370/images/Pendo_PLH_NewsletterImage_June2022_WhythebestinapponboaridngexperinecesaredatadrivenImage.png" alt="" title="hero-feedback"> <div style="display: inline;" class="pendo-feedback uppercase text-black text-sm font-bold inline-block mt-4 mx-8 py-2 px-3 bg-color">Blog</div> <h3 class="font-sans font-bold leading-tight my-4 mx-8 text-2xl md:text-3xl"> Learn how to use Pendo to reduce the burden on your support team </h3> </div> </a> <a class="text-18-30 font-bold inline-block mx-8 mb-12" href="https://www.pendo.io/pendo-blog/how-to-use-pendo-to-reduce-the-burden-on-your-support-team/">Read now <span class="text-pank">-></span> </a> </div> </div>  </div> <div class="mktoSnippet" id="globalFooter"><div class="mt-0 bg-gray-800 mx-auto pt-8"> <div class="max-w-7xl mx-auto"> <div class="grid grid-cols-1 p-4 lg:grid-cols-3 lg:gap-8 lg:py-8"> <div class="col-span-1 md:col-span-2"><span class="text-white text-sm mr-4 md:w-auto inline-block mb-4"><a class="text-white mr-4 md:w-auto inline-block mb-4" href="https://www.pendo.io/privacypolicy/">Pendo Privacy Policy</a><a class="mr-4 md:w-auto inline-block mb-4" href="https://www.pendo.io/terms-of-service/">Terms and Conditions</a><a class="mr-32 md:w-auto inline-block mb-4" href="tel:877-320-8484">877.320.8484</a></span><span class="text-white text-sm mr-4 md:w-auto block mt-8 md:mt-0 mb-4">© <script>// <![CDATA[ var dteNow = new Date(); var intYear = dteNow.getFullYear(); document.write(intYear); // ]]></script> Pendo.io, All Rights Reserved. Pendo trademarks, product names, logos and other marks and designs are trademarks of Pendo.io, Inc. or its subsidiaries and may not be used without permission.</span></div> <div class="flex items-center ml-0 md:ml-auto"><img class="float-left md:float-right mt-4 lg:mt-0" width="150" src="https://go.pendo.io/rs/185-LQW-370/images/pendo-logo-primary-light.svg" /></div> </div> </div> </div></div> <div class="hidden overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-4 z-50 justify-center items-center md:inset-0 h-modal sm:h-full" id="modal"> <div class="hidden h-full w-full" id="blocker"></div> <div class="absolute bottom-8 left-3 mx-auto mt-24 px-4 w-full max-w-lg h-full md:h-auto" id="modal-content">  <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">  <div class="flex justify-between items-center p-5 rounded-t border-b dark:border-gray-600"> <button id="close" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="modal"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg> </button> </div>  <div class="p-6 space-y-6"> <p class="text-center font-bold text-lg font-display">Get these calculated results emailed to you</p> <div id="success-template" class="bg-green-100 px-4 py-2 rounded-lg hidden"> <p class="text-center text-base font-sans font-bold text-green-700">Check your inbox for an email with these results.</p> </div> <script src="https://go.pendo.io/js/forms2/js/forms2.min.js"></script> <form id="mktoForm_3140"></form> <script>MktoForms2.loadForm("https://go.pendo.io", "185-LQW-370", 3140, function(form) { form.onSuccess(function(values, followUpUrl) { var formElement = form.getFormElem()[0]; formElement.reset(); jQuery('[type="submit"]').html('Submit').removeAttr('disabled'); jQuery('#success-template').show(); setTimeout(function() { jQuery('#success-template').fadeOut(); }, 5000) // Return false to prevent the submission handler from taking the lead to the follow up url return false; }); $('link[id="mktoForms2BaseStyle"]')[0].disabled=true; $('link[id="mktoForms2ThemeStyle"]')[0].disabled=true; $('form').removeClass('mktoForm'); $('div.mktoErrorMsg').addClass('inline text-white bg-red-500 pr-4 pl-4 text-sm rounded-sm'); $('button[type="submit"]').addClass('w-full pank-100 tracking-wide flex items-center justify-center mt-0 px-8 py-3 border border-transparent text-base uppercase font-medium font-bold rounded-md text-white md:py-3 md:text-lg md:px-10 mt-6').removeClass('mktoButton'); $('#modal form input:not(input#GDPRConsent)').removeAttr('style').addClass('w-full mr-2 h-10 px-3 py-2 placeholder-gray-300 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500'); $('form').removeAttr('style'); $('div.mktoOffset').hide(); $('div.mktoButtonRow').addClass('w-full'); $('[for="GDPRConsent"]').removeAttr('style').addClass('mt-8 text-xs md:text-sm text-gray-600'); $('[type="checkbox"]').addClass('form-checkbox h-5 w-5 ml-2 text-gray-700'); $('div.mktoGutter').hide(); $('.mktoAsterix').addClass('w-5 pr-1 inline text-red-600'); $('div.mktoCheckboxList').addClass('w-5 inline ml-2'); $('#LbltemporaryText1').addClass('w-full'); $('#LbltemporaryText2').removeClass('w-5/12').addClass('w-full'); $('#LbltemporaryInteger1').removeClass('w-5/12').addClass('w-full'); $('.mktoButtonWrap.mktoSimple').removeAttr('style'); $('div.mktoCheckboxList').removeAttr('style').removeClass('ml-2').addClass('w-full ml-0'); });</script> </div> </div> </div> </div> <script src async defer></script> <script type="text/javascript" src="https://go.pendo.io/rs/185-LQW-370/images/feathericons.min.js"></script> <script type="text/javascript" src="https://go.pendo.io/rs/185-LQW-370/images/jquery.js"></script> <script> feather.replace() </script>  <script type="text/javascript"> $(function() { $('a[href*=\\#]:not([href=\\#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); }); </script>  <script> /** * push events to Google Tag Manager when the Marketo Forms 2 Javascript is * loaded and executed and when Marketo form events occur * uses the Marketo Forms 2.0 API * http://developers.marketo.com/documentation/websites/forms-2-0/ * * @author Keith W. Shaw <keith.w.shaw@gmail.com> * @license MIT */ (function marketoFormListener () { "use strict"; /** * poll for global MktoForms2 variable to be defined * @returns {undefined} */ function pollForMktoForms2 (delay) { if (isNaN(delay)) { throw new Error("Expected delay (" + delay + ") to be a number."); } if (window.MktoForms2) { // mark the start of the script loading window.dataLayer = window.dataLayer || []; window.dataLayer.push({ "event": "mkto.form.js", "mkto.form.start": (new Date()).getTime() }); // bind liseners for all Marketo Form events addMktoForms2Listeners(window.MktoForms2); } else { // keep polling, but progressively increase the delay setTimeout(pollForMktoForms2.bind(null, 2 * delay), delay); } } /** * helper function to push invalid Marketo field errors to GTM * @returns {undefined} */ function waitForError () { var element, input, mktoErrorMsg; // check for error message element = document.querySelector(".mktoErrorMsg"); if (element) { mktoErrorMsg = element.textContent || element.innerText; // look for invalid input input = document.querySelector("input.mktoInvalid, .mktoInvalid input"); window.dataLayer.push({ "event": "mkto.form.error", "mkto.form.error.message": mktoErrorMsg, "gtm.element": input, "gtm.elementClasses": input && input.className || "", "gtm.elementId": input && input.id || "", "gtm.elementName": input && input.name || "", "gtm.elementTarget": input && input.target || "" }); } } /** * setup Marketo Form listeners to push events to GTM * @returns {undefined} */ function addMktoForms2Listeners (MktoForms2) { MktoForms2.whenReady(function handleReady (form) { window.dataLayer.push({ "event": "mkto.form.ready", "mkto.form.id": form.getId(), "mkto.form.submittable": form.submittable(), "mkto.form.allFieldsFilled": form.allFieldsFilled(), "mkto.form.values": form.getValues() }); form.onValidate(function handleValidate (valid) { window.dataLayer.push({ "event": "mkto.form.validate", "mkto.form.valid": valid }); // wait for the error message to appear setTimeout(waitForError, 0); }); form.onSubmit(function handleSubmit (thisForm) { var button; button = thisForm.getFormElem().find("button[type=\"submit\"]"); window.dataLayer.push({ "event": "mkto.form.submit", "mkto.form.id": thisForm.getId(), "mkto.form.submittable": thisForm.submittable(), "mkto.form.allFieldsFilled": thisForm.allFieldsFilled(), "mkto.form.values": thisForm.getValues(), "mkto.form.button": { "classes": button.attr("class"), "text": button.text(), "type": "submit" } }); }); form.onSuccess(function handleSuccess (values, followUpUrl) { window.dataLayer.push({ "event": "mkto.form.success", "mkto.form.values": values, "mkto.form.followUpUrl": followUpUrl }); }); }); MktoForms2.whenRendered(function handleRendered (form) { window.dataLayer.push({ "event": "mkto.form.rendered", "mkto.form.id": form.getId(), "mkto.form.submittable": form.submittable(), "mkto.form.allFieldsFilled": form.allFieldsFilled(), "mkto.form.values": form.getValues() }); }); } // start polling with an initial delay of 125ms pollForMktoForms2(125); }()); </script>  <script> var avgTixMonthly = document.getElementById('tixPerMonth').value; var avgTTR = document.getElementById('avgTimeResolve').value; var hourlyRate = document.getElementById('hourlyRate').value; var avgMonthlyTixVol = document.getElementById('tixPerMonth').value; //var avgAnnualTixVol = avgMonthlyTixVol * 12; var tixDeflection = document.getElementById('tixDeflectionPercent').value; document.getElementById('tixDeflectionPercent').defaultValue = 10; document.getElementById('avgTimeResolve').defaultValue = 30; document.getElementById('hourlyRate').defaultValue = 35; /* Range for tix per month */ jQuery(document).on('input', '#tixPerMonthRange', function() { jQuery('#tixPerMonth').val( jQuery(this).val() ); }); jQuery(document).on('input', '#tixPerMonth', function() { jQuery('#tixPerMonthRange').val(jQuery(this).val()); }); /* Range for tix per month */ /* Range for avg time to resolve */ jQuery(document).on('input', '#avgTimeResolve', function() { jQuery('#avgTimeRange').val(jQuery(this).val()); }); jQuery(document).on('input', '#avgTimeRange', function() { jQuery('#avgTimeResolve').val(jQuery(this).val()); }); /* Range for avg time to resolve */ /* Range for avg hourly rate */ jQuery(document).on('input', '#hourlyRate', function() { jQuery('#avgRateRange').val(jQuery(this).val()); }); jQuery(document).on('input', '#avgRateRange', function() { jQuery('#hourlyRate').val(jQuery(this).val()); }); /* Range for avg hourly rate */ // connect inputs jQuery('#avgTimeResolve').keyup(function (){ jQuery('#avgTixTime').val(jQuery(this).val()); }); jQuery('#avgTixTime').keyup(function (){ jQuery('#avgTimeResolve').val(jQuery(this).val()); }); jQuery('#avgTimeResolve').change(function (){ jQuery('#avgTixTime').val(jQuery(this).val()); }); jQuery('#avgTixTime').change(function (){ jQuery('#avgTimeResolve').val(jQuery(this).val()); }); // connect inputs jQuery('#hourlyRate').keyup(function (){ jQuery('#avgHourlyRate').val(jQuery(this).val()); }); jQuery('#avgHourlyRate').keyup(function (){ jQuery('#hourlyRate').val(jQuery(this).val()); }); jQuery('#hourlyRate').change(function (){ jQuery('#avgHourlyRate').val(jQuery(this).val()); }); jQuery('#avgHourlyRate').change(function (){ jQuery('#hourlyRate').val(jQuery(this).val()); }); // connect inputs jQuery("#tixDeflectionPercent").change(function(){ annTixVol = jQuery('#annualTixVol').val(); deflectPercentage = jQuery('#tixDeflectionPercent').val(); ttr = jQuery('#avgTimeResolve').val(); rate = jQuery('#hourlyRate').val(); var annTixDeflection=""; if(isNaN(annTixVol) || isNaN(deflectPercentage)){ annTixDeflection=" "; }else{ annTixDeflection = ((annTixVol*deflectPercentage) / 100); } jQuery('#tixDeflectionTotal').val(annTixDeflection); }); // Calculate jQuery('#calculate').click(function(){ jQuery('#annualTixVol').val(jQuery('#tixPerMonth').val()*12); jQuery('#tixDeflectionTotal').val(jQuery('#annualTixVol').val()*jQuery('#tixDeflectionPercent').val()/100); annTixVolume = parseInt(jQuery('#annualTixVol').val()); tixDeflectionTotal = parseInt(jQuery('#tixDeflectionTotal').val()); tixDeflectionPercentage = parseInt(jQuery('#tixDeflectionPercent').val()); tixPerMonth = parseInt(jQuery('#tixPerMonth').val()); tixTotal = jQuery('#tixDeflectionTotal').val(); ttr = jQuery('#avgTimeResolve').val(); rate = jQuery('#hourlyRate').val(); hoursSaved = parseInt((tixTotal * ttr)/60); total = parseInt((tixTotal * ttr)/60*rate); jQuery("#costSavingTotal").val(total); jQuery('#hoursSaved').val(hoursSaved); jQuery('#calculate').html('Re-calculate'); jQuery('[name="aBMSupportCallsandTickets"]').val(tixPerMonth); jQuery('[name="aBMResolutionTime"]').val(ttr); jQuery('[name="aBMHourlyRate"]').val(rate); jQuery('[name="aBMAnnualTickets"]').val(annTixVolume); jQuery('[name="aBMDeflectedTickets"]').val(tixDeflectionTotal); jQuery('[name="aBMDeflectionRate"]').val(tixDeflectionPercentage); jQuery('[name="aBMHours"]').val(hoursSaved); jQuery('[name="aBMCostSavings"]').val(total); console.log("Average amount of customer calls/tickets per month: " + tixPerMonth + ", ", "Average time to resolve the call/ticket (minutes): " + ttr + ", ", "Average hourly rate for customer support: $" + rate + ", ", "Average annual ticket volume: " + annTixVolume + ", ", "Number of tickets annually deflected with Pendo: ", + tixDeflectionTotal + ", ", "Estimated hours saved annually: " + hoursSaved + "hrs, ", "Cost savings of annually deflected tickets: $" + total); }); // Calculate // // Show and close modal jQuery('#email-results').click(function() { jQuery('#modal').show(); jQuery('#blocker').show(); }); jQuery('#close, #blocker').click(function() { jQuery('#modal').hide(); }); // Show and close modal </script> <script type="text/javascript" src="/js/stripmkttok.js"></script></body> </html>

CINXE.COM

Customer support calculator | Pendo.io