[Skip to Content]
Order Calculators

Dinkytown V3 Deployment and Installation

Step-by-step instructions for installing, updating, and embedding V3 financial calculators on your website.

The V3 calculators use JavaScript, HTML5 and CSS to display and run the calculators.

  1. Take 2 minutes and watch this: Video Overview
  2. Download the KJECalc.exe (or KJECalc.zip — download instructions are emailed to you with your license receipt).
  3. Make a directory or folder on your website for all files extracted in step 2.
  4. Use these instructions to embed a calculator on a page: Embed a Calculator
  5. Edit the KJESiteSpecific.js and KJESiteSpecific.css files to change fonts, colors and settings. See: V3 Customize FAQ

Please contact support with any questions when deploying or using the calculators. Reach us by email at or by phone at (612) 331-2291.

More information can be found at:

Frequently Asked Questions:

Dinkytown V3 Deployment and Installation Overview Video

Watch our deployment overview video (definitely worth your 3 minutes)!

How do I install the V3 financial calculators to my website?

  1. Download the latest full installation package for your calculators from your download site, found on your email notice.
  2. Execute the KJECalc.exe to extract all required V3 calculators. This is a self-extracting zip file. (Or unzip KJEUpdate.zip if you are on a non-Windows platform.) If you see a warning message, you can safely continue. It is recommended that you extract to a new directory and then move the required files to your production or staging environment.
  3. Edit the HTML files to match your website, or cut and paste HTML content into new pages you have already created (be sure to copy the JavaScript section and CSS file section, and ensure your page has a doctype). Future updates will not require these pages to be replaced or modified. Note that you can only have one calculator per page.

    Edit KJESiteSpecific.js and KJESiteSpecific.css to apply colors, fonts, and more to all calculators. These files will not be replaced when you update. Please note that future updates will impact KJE.css, so no changes to that file are recommended.
  4. Deploy the files to your website. Normally it is easiest to put all calculator files in a single directory. You can then create links to the calculator pages or the provided index page as needed throughout your website.

How do I apply a V3 maintenance update?

Applying a maintenance update is a simple process requiring no manual editing of any files. The entire update process is accomplished by replacing a set of JavaScript files and one CSS file.

  1. Download the latest update package for your calculators from your download site, found on your update email notice.
  2. Execute the KJEUpdate.exe file. This is a self-extracting zip file. (Or unzip KJEUpdate.zip if you are on a non-Windows platform.) If you see a warning message, you can safely continue. It is recommended that you extract to a new directory and then move the required files to your production or staging environment.
  3. Replace the files in your current deployment with the new files from the update package. Do not delete existing files from your server — simply overwrite any file a new version is provided for. Important: The update package does not contain any HTML files, or the KJESiteSpecific.js or KJESiteSpecific.css files. Those files are already on your server and do not need to change for a normal update.

When testing the new version, make sure your browser uses the new files rather than cached ones. You may need to clear the browser's cache manually. If you have a Servlet or other custom deployment, installation instructions will be found on your download page or provided separately.

What files are used to display the calculators on my site?

We have HTML, JS and CSS files used to deploy the calculators. Certain files are used by all calculators and each calculator has files specific to it.

Files common to all calculators:

KJE.js
Main JS file used by all calculators containing common functionality for reports, graphs, calculations, etc. This file should not be edited or changed.

KJE.css
Main CSS file used by all calculators containing common style sheet definitions. This file should not be edited or changed.

KJESiteSpecific.js
JS file that defines settings (including color selections and custom functionality) specific to a website. This file can be edited and changed, and is not overwritten when updates are applied.

KJESiteSpecific.css
CSS file that defines custom styles for the calculators specific to a website. Like KJESiteSpecific.js, this file is designed to be edited and is not overwritten by updates.

excanvas.js
Provides legacy support for graphs when using IE7 and IE8. Not required by any other browser. If you do not support IE7 or IE8 you do not need to include this file in your deployment.

Calculator-specific files (example using the Mortgage Loan calculator — all calculators follow the same naming pattern):

MortgageLoan.html
The HTML file with the calculator code. This file can be edited to match your deployment — updates will not overwrite changes you make to it.

MortgageLoan.js
Main JS file specific to the calculator. Contains all computations, rules and reports. This should not be modified.

MortgageLoanParams.js
PARAMS file for the specific calculator. Edit this file to change default values and calculator-specific settings. Updates will not overwrite changes you make to this file.

Each calculator in your package has its own HTML page. You can edit these pages to match your website, or copy the code to embed a calculator into an existing page. We also provide an index page with links to all calculator HTML pages.

Where should I place the calculator files on my server?

Typically you would copy all provided files into a single directory on your web server accessible to the internet. You would then either create links from your existing website to the HTML files in that directory, or embed a calculator directly into an existing page that references your calculator directory.

The most common location is a subdirectory named calculators. For example: http://www.yourdomain.com/calculators

You could then create a link from existing pages to the index page at www.yourdomain.com/calculators/index.html, or create links to individual calculator pages. Alternatively, you can embed a calculator directly on an existing page by referencing the files in this directory. Please see “How do I embed a calculator directly into an existing page?”

How can I test them on my desktop (without a webserver)?

  1. Download your calculator package from your download link. Download the full installation package KJECalc.exe.
  2. Run the program (if you receive a warning message it is safe to continue). When prompted, choose a directory — the default \calculators is fine, or enter your own. Once finished, close the program.
  3. To view the calculators, open any web browser and enter the following into the address bar:
    C:\calculators\index.html
    (If you changed the directory during install, use your chosen directory path.)
  4. Click the links to your calculators. This will run the calculators on your computer without accessing the internet. If there is a warning message, choose “Allow Blocked Content.” This will only happen on some browsers when running from a local computer (not a website).
  5. You can bookmark the calculator page just like a normal website page, or create a desktop shortcut by right-clicking anywhere on the page and choosing “Create Shortcut.”

How do I embed a calculator directly into an existing page?

You can use the code below to embed a calculator directly into any page. The example is for the Mortgage Loan calculator, but works for any calculator with minor changes — all calculators use the same code except for two calculator-specific file references.

  1. Open (or create) an HTML page where you wish to embed the calculator. This can be an actual page you are editing directly or a page in virtually any CMS like WordPress or Joomla.
  2. Paste the HTML code below into your page as HTML code (not as text). The directory path /calculators/ and the calculator prefix MortgageLoan are highlighted in the comments — change these to match your deployment: 
    <!-- Change /calculators/ to your calculator directory in all 7 locations below -->
<!-- Change MortgageLoan to the name prefix of your specific calculator in 2 locations -->
<link type='text/css' rel='StyleSheet' href='/calculators/KJE.css' />
<link type='text/css' rel='StyleSheet' href='/calculators/KJESiteSpecific.css' />
<div id="KJEAllContent"></div>
<script type="text/javascript" SRC="/calculators/KJE.js"></script>
<script type="text/javascript" SRC="/calculators/KJESiteSpecific.js"></script>
<script type="text/javascript" SRC="/calculators/MortgageLoan.js"></script>
<script type="text/javascript" SRC="/calculators/MortgageLoanParams.js"></script>
  3. Change the directory path from /calculators/ to the directory where you have the calculator files on your server (appears in 7 locations: 5 JS files and 2 CSS files). This will remain the same for all calculators in your package.
  4. Change MortgageLoan to match the HTML file name of the calculator you wish to insert. The table below shows some examples:
Calculator HTML file Prefix to use in code block Calculator Name
MortgageCompare.html MortgageCompare Mortgage Comparison: 15 Years vs. 30 Years
MortgageRentvsBuy.html MortgageRentvsBuy Rent vs. Buy
MortgageLoan.html MortgageLoan Mortgage Loan Calculator
MortgageQualifier.html MortgageQualifier Mortgage Qualifier

Copy the calculator's title, introductory description and disclaimer to your page directly from the calculator's HTML file. For CMS pages it is recommended to place this text as normal formatted text rather than an HTML code block. Changes you make to this text will not be affected by future updates.

Alternatively, you may choose to use an iFrame to display the calculator. The iframe will load the calculator and automatically size/resize responsively. If your page has CSS conflicts, using an iframe often eliminates that problem.

<script SRC='KJE.js'></script>
<iframe alt=calculator id=KJE-IFRAME src='index.html'></iframe>

Make sure index.html above points to the deployment location of your calculators. You can also load a specific calculator by changing index.html to the calculator's HTML file name (e.g. MortgageLoan.html).