Embeddable Calculators
Many of Banzai's resources contain activities designed to help people make sense of their personal finances. Examples include budget calculators, savings and retirement calculators, and more. Banzai calculators go great embedded into any informative or instructive resource—a blog, an article, etc.
Embedding Banzai calculators onto your own website adds personalized context to any resource while still maintaining your style and branding throughout. Remember, you're not limited to a single activity on a page. You can embed multiple calculators or even Banzai Coaches.
Search the calculator list below. Once you've found a calculator you'd like to embed on your website, select it for step-by-step instructions on how to add it to any resource on your website.
Technical Setup
There are three ways to embed Banzai calculators on your website. Choose the one that fits your site's architecture. (The same methods work for Banzai Coaches.)
JavaScript Snippet (Recommended — Responsive)
The JavaScript snippet ensures calculators adapt to mobile devices and desktops alike.
-
Insert this snippet before the closing
</body>tag of your page, replacinghometownwith your subdomain:<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> -
Add a
<div>withclass="__banzai-coach"andid="{calculator-id}"where you want the calculator to appear:<div id="mortgage-calculator" class="__banzai-coach"></div>
You're not limited to one activity per page — add multiple <div> elements for multiple calculators or Coaches.
IFRAME (Simpler — Not Responsive)
Similar to embedding a YouTube video. Update the activity ID and your subdomain:
<iframe src="https://banzai.org/coach/{activity-id}?subdomain=hometown" width="700" height="654" frameborder="0"></iframe>
The iframe solution has fixed width and height. Recommended dimensions are listed on each individual calculator's page.
Single-Page Application (SPA) Integration
If your site uses a JavaScript framework with client-side routing (Astro, Next.js, Nuxt, Gatsby, React Router), calculators must be re-mounted after each page navigation. Follow the JavaScript Snippet setup above, then call mount() after navigation:
if (window.BanzaiCoach?.ready) {
window.BanzaiCoach.mount()
}
Before navigating away, call unmount():
window.BanzaiCoach.unmount()
Or dispatch custom events:
document.dispatchEvent(new CustomEvent('banzai:mount'))
document.dispatchEvent(new CustomEvent('banzai:unmount'))