Embedded Calculators and Coach Sessions

NOTE: This document is for bank and credit union partners who use Banzai Direct.

Banzai Direct includes over 50 articles, many of which contain activities designed to help individuals make sense of their personal finances. Examples include the Coach, budget calculators, and savings and retirement calculators.

As a Banzai partner, you can also embed these activities in your own websites.

Responsive Solution: JavaScript Snippet

In most cases you will want to deploy Banzai's activities to your website via the simple JavaScript snippet. This strategy ensures that calculators and Coach sessions are screen-responsive, adapting to mobile devices and desktops alike. Here's how to construct your web page:

<html>
  <head></head>
  <body>
    <!-- STEP 2: A <div> with class="__banzai-coach" will insert the activity. -->
    <div id="mortgage-calculator" class="__banzai-coach"></div>

    <!-- STEP 1: JavaScript snippet embeds Banzai's library of activities. -->
    <script>!function(e,t){var s="script",a=e.getElementsByTagName(s)[0],n=e.createElement(s);n.async=!0,n.src="https://banzai.org/coach/styles.js?subdomain=hometown",a.parentNode.insertBefore(n,a)}(document);</script>
  </body>
</html>

Click here to see a working version of the sample. Note there are three steps:

Insert the JavaScript snippet before the closing </body> tag:

<script>!function(e,t){var s="script",a=e.getElementsByTagName(s)[0],n=e.createElement(s);n.async=!0,n.src="https://banzai.org/coach/styles.js?subdomain=hometown",a.parentNode.insertBefore(n,a)}(document);</script>

In the snippet, change the subdomain from hometown to YOUR subdomain (e.g. mainfcu).

... subdomain=mainfcu ...

Add the following code to your page in the position you want the activity to appear:

<div id="mortgage-calculator" class="__banzai-coach"></div>

That's it! You're not limited to a single activity on a page either. For example:

<div id="mortgage-calculator" class="__banzai-coach"></div>
<div id="savings-calculator" class="__banzai-coach"></div>

Scroll to the end of the article for a list of activities and their IDs.

Simple Solution: The IFRAME

A simpler, albeit less mobile-friendly solution, is the <iframe>. Adding an activity via an iframe is similar to how you might embed a YouTube or Vimeo video on your website. For example:

<iframe src="https://learnbanzai.com/coach/fifty-thirty-twenty?subdomain=hometown" width="700" height="654" frameborder="0"></iframe>

To implement an iframe calculator or Coach session on your website, you need to update two properties:

The ID of the activity (see Activity Identifiers below). In the example above, it is fifty-thirty-twenty.

Your subdomain. This example uses Banzai's demo account, hometown. Your subdomain is the same as your subdomain for your Sponsor Impact Page (SIP), or your Banzai Direct landing page. For example, if your SIP subdomain is bankeverywhere.banzai.org, then change the subdomain above to bankeverywhere.

The following properties are optional:

Width. Sets the width of the iframe.

Height. Sets the height of the iframe. Note both width and height are fixed—they are not responsive. The section below recommends widths and heights for each activity. Note: if you set the width (or height) of an activity beyond its maximum width, a colored boundary will appear—the boundary indicates that you've set one of the properties too high.

Important: The iframe solution is not responsive and these widths and heights (measured in pixels) are a basic estimation of the size of each calculator on a standard desktop/laptop viewport. The sizing given for each of these calculators are subject to change as we update our suite, and are meant only as a recommendation. It should also be noted that sizing may not be exact if you have CSS or page layouts that conflict with the styles of these calculators.

Complete Example

Here's a complete example of an <iframe> embedded activity in context of a web page:

<html>
  <head>
    ...
  </head>
  <body>
    <h1>Example Web Page</h1>
    <iframe src="https://banzai.org/coach/mortgage-calculator?subdomain=hometown" width="800" height="800" frameborder="0"></iframe>
  </body>
</html>

Calculators

The list below will help you decide which embedded calculators to add to your website. It also shows the calculators' IDs.

50/30/20 Calculator (ID: fifty-thirty-twenty)

Recommended iframe sizing: 1024px x 420px

The 50/30/20 rule states—for a person who desires one simple budgeting formula—that she should set 50% of her income aside for needs, 30% for wants, and 20% for savings. SEE HERE

Savings Calculator (ID: savings-calculator)

Recommended iframe sizing: 1024px x 738px

Shows how much many an individual will save via compound interest and an additional monthly payment. SEE HERE

Mortgage Calculator (ID: mortgage-calculator)

Recommended iframe sizing: 1024px x 738px

Calculates a monthly payment on a mortgage. Demonstrates how the payment is split between principal and interest. SEE HERE

Early Mortgage Payoff Calculator (ID: early-payoff)

Recommended iframe sizing: 1024px x 739px

Indicates how much interest a person will save, and time, by putting an additional amount towards a mortgage every month. SEE HERE

Mortgage Affordability Calculator (ID: mortgage-affordability)

Recommended iframe sizing: 1024px x 858px

Helps a potential home buyer understand whether he or she is able, based on a budget, to afford a specific mortgage payment. SEE HERE

Student Loan Payoff Calculator (ID: student-loan)

Recommended iframe sizing: 1024px x 739px

Demonstrates how much money and time can be saved by paying down student loans faster than the loan term. SEE HERE

Auto Loan Payoff Calculator (ID: auto-loan-calculator)

Recommended iframe sizing: 1024px x 739px

Demonstrates how much money and time can be saved by paying down an auto loan faster than the loan term. SEE HERE

Credit Card Payoff Calculator (ID: credit-card-payoff)

Recommended iframe sizing: 1024px x 718px

Demonstrates how many monthly payments and how much interest will be paid on a credit card. SEE HERE

Debt Payoff Calculator (ID: debt-management)

Recommended iframe sizing: 1024px x 739px

Like the Student Loan calculator and the Early Mortgage Payoff calculator, shows how much money can be saved in interest by adding additional principal to a monthly payment. Especially useful in clearing credit card debt. SEE HERE

Budget Calculator (ID: budget-calculator)

Recommended iframe sizing: 1024px x 758px

Helps an individual understand how much he or she is saving (or losing) on either a monthly or annual based on monthly and annual expenses. SEE HERE

Retirement Calculator (ID: retirement-calculator)

Recommended iframe sizing: 1024px x 738px

Helps people calculate their retirement funds by projecting income level, monthly savings, age and life expectancy, and percent rate of return on savings. SEE HERE

Cost of Living Calculator (ID: cost-of-living)

Recommended iframe sizing: 1024px x 640px

Compares average costs of living between US cities and states, including housing, groceries, utilities, transportation, and health-care costs, so readers can see what salary they should seek to maintain their current standard of living. SEE HERE

Mortgage Type Activity (ID: mortgage-type)

Recommended iframe sizing: 1024px x 636px

Summarizes the pros and cons of each mortgage type: conventional, fixed-rate, adjustable-rate, government-insured, and large (or "jumbo") mortgages. SEE HERE

Minimum Payment Calculator (ID: minimum-payment)

Recommended iframe sizing: 1024px x 738px

Calculates how much users could save in the long term by making more than a minimum monthly payment. Adjustable inputs include current balance, minimum monthly payment amount, interest rate, and fixed monthly payment. SEE HERE

Rule of 72 (By Years) (ID: rule-of-72-years)

Recommended iframe sizing: 1024px x 424px

Estimates what interest rate users would need to double an investment by the number of years they enter, using a natural logarithm called the Rule of 72. SEE HERE

Rule of 72 (By Interest Rate) (ID: rule-of-72-interest-rate)

Recommended iframe sizing: 1024px x 424px

Estimates how long it would take to double an investment by the interest rate users enter, using a natural logarithm called the Rule of 72. SEE HERE

Money Market Account Calculator (By Interest Rate) (ID: money-market-account-calculator)

Recommended iframe sizing: 1024px x 738px

Shows how much many an individual will save via compound interest and an additional monthly payment in an MMA. SEE HERE

Simple vs. Compound Interest (ID: interest-calculator)

Recommended iframe sizing: 1024px x 738px

Allows users to explore the differences between simple and compound interest, and how they affect the principal of a balance. SEE HERE

Asset Depreciation Calculator (ID: depreciation-calculator)

Recommended iframe sizing: 1024px x 738px

Calculates the worth of assets using the straight line depreciation formula, adjusting for initial purchase price, salvage value, and life of asset. SEE HERE

Stimulus Check Calculator (ID: stimulus-check-calculator)

Recommended iframe sizing: 1024px x 878px

Calculates the amount users will receive via the CARES Act stimulus checks using income, filing status, and number of dependents. SEE HERE

Auto Refinance Calculator (Monthly Payment) (ID: auto-refinance-monthly)

Recommended iframe sizing: 1024px x 759px

Compares a current auto loan with a possible refinanced loan with an emphasis toward lowering the user's current monthly payment. SEE HERE

Auto Refinance Calculator (Term) (ID: auto-refinance-term)

Recommended iframe sizing: 1024px x 759px

Compares a current auto loan with a possible refinanced loan with an emphasis toward paying the refinanced loan quickly and lower the overall amount owed. SEE HERE

Emergency Fund Calculator (ID: emergency-fund-calculator)

Recommended iframe sizing: 1024px x 838px

Generates an emergency fund savings goal based on a user's income, then uses a monthly budget and savings amount to estimate how long it will take the user to reach their emergency fund goal. SEE HERE

Mortgage Estimation Calculator (ID: mortgage-estimation-calculator)

Recommended iframe sizing: 1024px x 738px

Estimates how much of a mortgage a user can afford based on a preferred monthly payment. Users set an ideal monthly payment, down payment, preferred loan term, and interest rate. SEE HERE

Vacation Affordability Calculator (ID: vacation-affordability-calculator)

Recommended iframe sizing: 1024px x 766px

Helps users see whether or not they can afford their ideal vacation based on the cost of the vacation, their savings, and their ability to save more. SEE HERE

Auto Loan Affordability Calculator (ID: auto-loan-affordability-calculator)

Recommended iframe sizing: 1024px x 718px

Shows a maximum total loan cost for an auto loan based on the user's preferred monthly payment, down payment, loan term, and interest rate. SEE HERE

Mortgage Refinance Calculator (ID: mortgage-refinance-calculator)

Recommended iframe sizing: 1024px x 806px

Demonstrates how refinancing a home can reduce a user's term or monthly payment. Users enter their loan balance, payment, and interest rate for their current mortgage. SEE HERE

HELOC Calculator (ID: heloc-calculator)

Recommended iframe sizing: 1024px x 757px

Helps users estimate the potential HELOC limit they could be approved for using a mortgage total, unpaid balance, and LTV. SEE HERE

Rent Affordability Calculator (ID: rent-affordability-calculator)

Recommended iframe sizing: 1024px x 854px

Users will determine what they can afford for rent based on their expenses and gross monthly income. SEE HERE

Low Rate/Cash Back (ID: low-rate-cash-back-calculator)

Recommended iframe sizing: 1024px x 807px

Outlines the total amount a user will pay with either a low rate or cash back auto financing incentive. SEE HERE

Personal Loan Calculator (ID: personal-loan)

Recommended iframe sizing: 1024px x 739px

Helps user see how long it will take to pay off a personal loan using a loan’s interest rate and the amount owed. SEE HERE

Inflation Calculator (ID: inflation-calculator)

Recommended ifram sizing: 1024px x 546px

This calculator demonstrates how inflation can impact spending and saving over time. SEE HERE