• Contact Support
  • Banzai support

    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://teachbanzai.com/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:

    1. Insert the JavaScript snippet before the closing  </body>  tag:
    2. <script>!function(e,t){var s="script",a=e.getElementsByTagName(s)[0],n=e.createElement(s);n.async=!0,n.src="https://teachbanzai.com/coach/styles.js?subdomain=hometown",a.parentNode.insertBefore(n,a)}(document);</script>
      	
    3. In the snippet, change the subdomain from hometown to YOUR subdomain (e.g. mainfcu).
    4. ... subdomain=mainfcu ...
      	
    5. Add the following code to your page in the position you want the activity to appear:
    6. <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.teachbanzai.com, 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 Activities 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.

    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://teachbanzai.com/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)

    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)

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

    Mortgage Calculator (ID: mortgage-calculator)

    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)

    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)

    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)

    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)

    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)

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

    Debt Payoff Calculator (ID: debt-management)

    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)

    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)

    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)

    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)

    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)

    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)

    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)

    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)

    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)

    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)

    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)

    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)

    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)

    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)

    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)

    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)

    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)

    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)

    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

    Coach: Get Out of Debt (ID: get-out-of-debt)

    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)

    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)

    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)

    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)

    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)

    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)

    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)

    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)

    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)

    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)

    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: What Mortgage Can I Afford? (ID: mortgage-affordability-coach)

    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)

    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)

    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)

    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)

    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)

    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)

    Tests the cyber safety smarts of teens ages 13-18 with an interactive game. Includes realistic scenarios so teens learn to spot red flags and dangers online. Offers instruction on best practices and opportunities to replay for deeper learning. SEE HERE.

    Coach: The Cost of College (ID: cost-of-college)

    Guides a user through the major expenses they should expect to pay for a year of college. Based on averages and inputs, users estimate what they will need to pay in categories like housing, school supplies, and transportation. Provides an overall estimated expense list for a year of school. SEE HERE.