Embeddable Coaches
Many of Banzai's resources contain activities designed to help individuals make sense of their personal finances. Examples include budget Coaches, savings and retirement Coaches, and more. Banzai Coaches go great embedded into any informative or instructive resource—a blog, an article, etc. With Direct, you too can embed Coaches in your website. Let's talk about how.
Embedding Banzai Coaches 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 Coaches or even Banzai calculators.
Search the Coach list below. Once you've found an activity you'd like to embed onto 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 Coaches on your website. Choose the one that fits your site's architecture. (The same methods work for Banzai calculators.)
JavaScript Snippet (Recommended — Responsive)
The JavaScript snippet ensures Coaches 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="{coach-id}"where you want the Coach to appear:<div id="get-out-of-debt" class="__banzai-coach"></div>
You're not limited to one activity per page — add multiple <div> elements for multiple Coaches or calculators.
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="1200" height="720" frameborder="0"></iframe>
The iframe solution has fixed width and height. Recommended dimensions for Coaches are typically 1200px x 720px — see each individual Coach's page for confirmation.
Single-Page Application (SPA) Integration
If your site uses a JavaScript framework with client-side routing (Astro, Next.js, Nuxt, Gatsby, React Router), Coaches 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'))