• 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://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:

    1. 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>
    
    1. In the snippet, change the subdomain from hometown to YOUR subdomain (e.g. mainfcu).
    ... subdomain=mainfcu ...
    
    1. 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

    CD Calculator (ID: cd-calculator)
    Recommended iframe sizing: 1024px x 718px

    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-coach)

    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

    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)

    Recommended iframe sizing: 1200px x 720px

    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.

    Coach: Saving With A Purpose (ID: saving-with-a-purpose)

    Recommended iframe sizing: 1200px x 720px

    Helps users break down their short- to mid-length savings goals into a monthly saving amounts over a specific timeline. Teaches what it means to save with a purpose and make informed saving and spending decisions. SEE HERE.

    Coach: Earning Extra Income (ID: earn-extra-income)

    Recommended iframe sizing: 1200px x 720px

    Guides a user through their options for earning extra income. Details the types of side gigs, including the time and financial commitments required. Estimates what a user could potentially make—and owe in self-employment taxes—from their efforts. SEE HERE.

    Coach: Cost of a Wedding (ID: cost-of-a-wedding)

    Recommended iframe sizing: 1200px x 720px

    Helps users estimate their wedding budget by providing price averages and tips on how to apply costs while planning their event. SEE HERE.

    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.