You can embed Bond's registration flow directly on your own website with an iframe, so customers register and pay without leaving your site. This guide is for whoever builds your website, on WordPress, Webflow or another CMS.
How Bond's iframe behaves
Bond's registration iframes are responsive and designed to fill 100% of the width of the page. They're built as if they're the only thing on the page, and they include a fixed footer with the button customers use to move through registration.
If other fixed elements on your page (like a navigation bar) cover that footer, customers can get stuck. Most embedding issues come from the iframe's height, so that's where to focus.
Key best practices
Set up a template. Create one page template in your CMS for Bond programs, so you don't have to re-apply styles every time you embed a new program. If you run more than one location, build the template once and reuse it for every location.
Size the height carefully. Adjust the iframe's height for your navigation bar and anything else fixed on the page, so Bond's footer always stays visible.
Prevent double scrolling. If the iframe is the wrong height, customers may have to scroll both your page and the iframe. Correct sizing avoids this.
Give Bond as much room as possible. You can add text or images around the iframe, but customers get through registration most easily when the iframe has the most space.
Make it work on every device. Use the CSS and JavaScript below to keep the experience consistent on desktop and mobile.
Step-by-step setup
1. Define the iframe container
Set the parent container to
width: 100%andposition: relative.Use CSS to control the iframe's height.
2. Use responsive styling
Use
svh(small viewport height) units. They account for mobile browsers showing and hiding their address bar.Subtract the height of your navigation bar, plus anything else you place above or below the iframe.
3. Adjust the height with JavaScript
Recalculate the iframe height when the page loads and whenever the window is resized.
Make sure the whole iframe stays visible and the fixed footer is always reachable.
Example code (Webflow)
This example is for a Webflow CMS template. The same approach works in WordPress and other platforms. Change 80px to the actual height of your navigation bar, and tweak the code to fit your site's layout.
Iframe styles (add to the <head> of your Bond programs template)
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
.bond-iframe-container {
width: 100%;
position: relative;
overflow: hidden;
}
.bond-iframe-content {
width: 100%;
height: calc(100svh - 80px); /* Adjust based on navbar height */
border: none;
display: block;
}
@media (max-width: 768px) {
.bond-iframe-content {
height: calc(100svh - 80px); /* Adjust for mobile address bar */
}
}
</style>
JavaScript for dynamic resizing
<script>
function adjustBondIframeHeight() {
const iframe = document.querySelector('.bond-iframe-content');
const navbarHeight = 80; /* Adjust based on actual navbar height */
iframe.style.height = `calc(100svh - ${navbarHeight}px)`;
}
window.addEventListener('load', adjustBondIframeHeight);
window.addEventListener('resize', adjustBondIframeHeight);
</script>
The embed itself
Wrap the iframe in the container, and replace the src with the Bond link for the program or page you're embedding:
<div class="bond-iframe-container">
<iframe class="bond-iframe-content" src="YOUR_BOND_REGISTRATION_LINK"></iframe>
</div>
Test before you go live
Publish to a staging (test) version of your site first.
Test on several devices and browsers:
iPhone (Safari and Chrome)
Android (Chrome)
Desktop (Chrome, Safari and Edge)
Check that customers can scroll through the whole registration process without issues, and that Bond's footer stays visible and fixed.
Fix any layout issues, then publish to your live site.
Tracking conversions? If you use Google Tag Manager or GA4, embedded checkout needs a few scripts on your site as well. See Getting Started: Conversion Analytics.
Need a hand? Your Customer Success rep can help you set up your embed and test it with you.