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
Demonstrates how much a CD can grow over its lifetime (usually 12 to 60 months. 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
COACHES
Coach: Get Out of Debt (ID: get-out-of-debt)
Recommended iframe sizing: 1200px x 720px
Guides users in debt by explaining the nature of their debts and by allowing them to use their real-life debt information to do the following: find out their debt-free date, set a goal to pay off their debts faster than the current terms, and discover a debt counseling service if it is deemed helpful. SEE HERE
Coach: Basic Bookkeeping (ID: bookkeeping)
Recommended iframe sizing: 1200px x 720px
Guides users who own or are interested in owning a business by allowing them to use their real-life business information to do the following: learn how to create basic financial reports, learn simple ways to use financial reports, and discover the reasoning that supports the practice of financial reporting. SEE HERE
Coach: Make the Most of Your FSA or HSA (ID: fsa-vs-hsa)
Recommended iframe sizing: 1200px x 720px
Teaches about the differences between using a flexible spending account (FSA) and using a health savings account (HSA). Allows users to enter their real-life health expenses to do the following: predict their out-of-pocket health care costs, discover what they should contribute to their FSA or HSA, and see how much they could save on taxes. SEE HERE
Coach: Your First SBA Loan (ID: business-loans)
Recommended iframe sizing: 1200px x 720px
Designed for small business owners that are investigating funding options for their business. Guides users through various types of SBA loans and shows them an estimation of how much they should consider borrowing. SEE HERE
Coach: Retirement Funds (ID: trad-vs-roth)
Recommended iframe sizing: 1200px x 720px
Describes the differences between Traditional and Roth retirement accounts. Predicts how a user's retirement savings will grow in the future and allows the user to test different values for future retirement outcomes. SEE HERE
Coach: Am I Ready to Retire? (ID: retirement)
Recommended iframe sizing: 1200px x 720px
Guides a user through setting a retirement goal then evaluates a their current retirement savings to see if they're on track to meet it. Provides information about the potential costs and savings one might face during retirement. SEE HERE
Coach: Filling Out the FAFSA (ID: fafsa-coach)
Recommended iframe sizing: 1200px x 720px
Describes the process of filling out and submitting the Free Application for Federal Student Aid (FAFSA), determines the user's dependency status, and uses a data set to predict the total cost of attendance for the user's school as well as the average net COA after receiving federal aid. SEE HERE
Coach: Setting Up Your Business (ID: setting-up)
Recommended iframe sizing: 1200px x 720px
Guides users in deciding on a business structure (sole prop, LLC, or corporation) by using personalized information and in-Coach decision trees, and provides resources for licensing their business in a particular state. SEE HERE
Coach: Build Your Emergency Fund (ID: emergency-fund)
Recommended iframe sizing: 1200px x 720px
Helps users define an emergency fund savings goal and describes how the user can reach that goal. Uses personalized input to create a unique goal. SEE HERE
Coach: Term Life Insurance (ID: term-life-insurance)
Recommended iframe sizing: 1200px x 720px
Describes the reasons why term life insurance is valuable and how it differs from whole life insurance. Evaluates a user’s life insurance needs based on their current life situation and recommends a life insurance policy amount. SEE HERE
Coach: Create a Budget (ID: general-budgeting)
Recommended iframe sizing: 1200px x 720px
Guides users in creating a budget that fits their lifestyle. Every dollar is assigned a job using the 50/30/20 budgeting guideline and users receive personalized advice for reducing their expenses. SEE HERE
Coach: Create a Holiday Budget (ID: create-a-holiday-budget)
Recommended iframe sizing: 1200px x 720px
Helps users set a holiday budget and review potential expenses, one-by-one, so they can make sure holiday magic doesn’t overwhelm finances. SEE HERE
Coach: What Mortgage Can I Afford? (ID: mortgage-affordability-coach)
Recommended iframe sizing: 1200px x 720px
Helps users discover their ideal monthly housing payment and realize what that will mean for a total home price. Educates users about the factors that effect the cost of a mortgage. SEE HERE
Coach: The Cost of Baby's First Year (ID: babys-first-year)
Recommended iframe sizing: 1200px x 720px
Describes the immediate and ongoing expenses of baby’s first year. Walks the user through decisions, from feeding to childcare to how much to spend on a stroller, and outlines the financial impact. Gives users a monthly budget and one-time spending total so they can budget accordingly. SEE HERE
Coach: Navigating Debt Collections (ID: debt-collection)
Recommended iframe sizing: 1200px x 720px
Walks users through key information they need to know when contacted by a debt collector and helps them create a plan for what to do next. Gives tips to recognizing if it is a real debt collector or a scammer. SEE HERE
Coach: Out of Work (ID: out-of-work)
Recommended iframe sizing: 1200px x 720px
Reviews the potential impacts of losing a job to a user's budget, health insurance, retirement fund, and more. Explores options for dealing with lost benefits and finding a new job. Creates a detailed action plan based on user’s unique situation. SEE HERE
Coach: Trim Your Budget (ID: cutting-expenses)
Recommended iframe sizing: 1200px x 720px
Guides a user through setting a savings goal for each month and evaluate their expenses one at a time. User enters their current spending category-by-category, views ideas for trimming costs, then sets a new budget for that expense. Provides an overall look at current spending and how much a user could save overall. SEE HERE
Coach: Understanding Health Insurance (ID: understand-health-insurance)
Recommended iframe sizing: 1200px x 720px
Walks the user through a real-life scenario to explain and ins and outs of health insurance. User enters their plan details, if they have them, as they go through the scenario step-by-step, and gains an understanding of health insurance basics and how they work together. Ends with a personalized summary of their health insurance coverage and its benefits. SEE HERE
Coach: Are You Cyber Safe? For Teens (ID: cyber-security)
Recommended iframe sizing: 1200px x 720px
Coach: The Cost of College (ID: cost-of-college)
Recommended iframe sizing: 1200px x 720px
Coach: Saving With A Purpose (ID: saving-with-a-purpose)
Recommended iframe sizing: 1200px x 720px
Coach: Earning Extra Income (ID: earn-extra-income)
Recommended iframe sizing: 1200px x 720px
Coach: Cost of a Wedding (ID: cost-of-a-wedding)
Recommended iframe sizing: 1200px x 720px
Coach: How Do I Build Credit? (ID: building-credit)
Recommended iframe sizing: 1200px x 720px
Guides a user through options for building credit from scratch or raising a decent score. Creates an actionable list of ideas for building credit that the user can implement. SEE HERE.
Coach: Repairing Credit (ID: repair-credit)
Recommended iframe sizing: 1200px x 720px
Guides a user through ideas for repairing their credit score over the short- and long-term. Creates an actionable list of ideas that the user can implement. SEE HERE.
Coach: Your Tax Return Pre-Game (ID: deductions-and-credits)
Recommended iframe sizing: 1200px x 720px
Guides a user through the ins and outs of filing a tax return. Helps users determine their filing status, see what deductions and credits they may qualify for, and compile a list of what forms and documentation they need to file their return. Provides information on ways to prepare and file their taxes. SEE HERE.
Coach: Financial Wellness Assessment (ID: financial-wellness-assessment)
Recommended iframe sizing: 1200px x 720px
Helps the user analyze their financial wellness by asking a series of questions and scoring them based on their responses. Helps them determine where they sit with finances while providing resources that will help them learn how to start improving. SEE HERE.
Coach: Workplace Cybersecurity (ID: workplace-cybersecurity)
Recommended iframe sizing: 1200px x 720px
Tests and educates employees about how to protect their company and themselves from hackers and scammers. Teaches employees about the consequences of their decisions and how to spot potential issues. The employee will move through four categories (passwords, device and account security, emails, and personal safety) to improve their skills. SEE HERE.
Coach: What Car Can I Afford? (id:new-car)
Recommended iframe sizing: 1200px x 720px
Helps a user discover an affordable monthly car payment based on their monthly income and expenses. User views an estimated overall purchase price range, based on what their budget can afford. Also provides education on auto loans and leases, trade-ins and down payments, interest rates, and more. SEE HERE.
Know Your Net Worth (id:find-your-net-worth)
Recommended iframe sizing: 1200px x 720px
Helps a user discover their net worth based on their gross assets and liabilities. Explains how net worth fits into overall financial wellness, and outlines its limits as a financial measure. Suggests ideas for improving net worth over time. SEE HERE.
Weather an Economic Storm (ID: weather-an-economic-storm)
Recommended iframe sizing: 1200px x 720px
Guides a user through different ways an Economic Storm might affect them and creates a plan that will help them weather the storm. Users enter their information category-by-category and are evaluated on how prepared they are to handle an economic storm. Provides advice and allows the user to set goals if they are under prepared. SEE HERE.
Digital Wellness Assessment (ID: digital-wellness-coach)
Recommended iframe sizing: 1200px x 720px
Helps the user analyze their relationship with technology and how tech is impacting four aspects of their overall health: Physical, Intellectual, Mental, and Social. Provides tips on bettering their relationship with technology and their overall digital wellness. SEE HERE.
Scam Checker (ID: scam-checker)
Recommended iframe sizing: 1200px x 720px
Asks the user a series of questions that help them decided how to respond to a suspicious message. Within five or less questions the Scam Checker will decide if the message is: Probably Not a Scam, Worth Investigating, or Red Flag; and give advice on how to respond. The advice is kept broad enough to allow the user to decide for themself how to proceed. SEE HERE.