Deploying the New AIO Simulator widget


Include the AIO Simulator CSS and JS files in your HTML document (either in the document head, or directly above the widget deployment code in the document body).
There are some utf-8 encoded characters in the widget, so please ensure that you have specified utf-8 charset.

Deployment code

Place the following HTML code on your web page in the location where you would like the AIO simulator widget to appear.

Customized color styles

This is controlled via the theme attribute within the setting variable. Simply set your desired color hex codes for each class. Any unspecified colors will use the default widget colors. For example:

The color classes apply as follows:

  • page-color-primary –page background color on primary screens
  • page-color-secondary –page background color on secondary screens
  • page-color-header – header background color


  • field-color-white – background color for editing enabled fields
  • field-color-grey – background color of locked fields, background color for an even table row
  • field-color-silver –background color for an odd-numbered table row


  • tab-color-primary – active tab text color
  • tab-color-secondary – inactive (complete and incomplete) tab text color, inactive button text color
  • tab-color-inactive – inactive (incomplete) tab background color (note that the background color on completed tabs will be the same as page-color-header)


  • font-color-header – primary header text color
  • font-color-header-secondary – secondary header text color, “Start Over” and “Save & Share” icon color
  • font-color-primary – text color in the main part of the widget (headers, descriptions, labels of active fields)
  • font-color-secondary – text color in the main part of the widget (subtitles, text, field labels, borders)
  • font-color-tertiary – color for locked fields, buttons, texts,
  • font-color-quaternary – button text color
  • font-color-black – color of values in graphs, text bold


  • color-inactive – inactive/locked button background color
  • color-button-primary – active button background color
  • color-principal – chart color for the Principal value
  • color-interest – chart color for the Interest value


  • table-color-primary – header background color for Paydown table for 30-Year HELOC section
  • table-color-secondary –header background color for Paydown table for period section
  • table-color-tertiary –header background color for Paydown table for Traditional Mortgage section

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.

Not readable? Change text.