How to embed your booking page on an external website

You've built a coaching website outside of Coachful — maybe it's on Squarespace, WordPress, Webflow, or a custom-coded page — and you want clients to book sessions without leaving your site. Embedding your booking page is the cleanest way to do that. Instead of redirecting visitors to a separate URL, they schedule directly on your page, reducing friction and increasing the chance they actually follow through.

This guide walks you through every method for embedding your Coachful booking page on an external website, including iframe embeds, link-button methods, and best practices for making the experience seamless for your clients.

TL;DR — Quick Answer

• Your Coachful booking page lives at {yourslug}.coachful.co/book (or your custom domain equivalent).
• Embed it on any external site using a standard <iframe> snippet.
• Alternatively, add a styled link or button that opens your booking page in a new tab.
• For pop-up embeds, use a lightweight modal with JavaScript and your booking URL.
• No third-party booking widget is needed — Coachful's built-in scheduler handles availability, calendar sync, and confirmations.

Why Embed Your Booking Page Instead of Just Linking to It

A bare link works, but it pulls visitors away from your website entirely. Every page transition is a micro-friction point, and micro-friction kills conversions. When someone reads your coaching sales page and feels ready to book, you want them to complete that action right there — not lose momentum clicking through to a new domain.

Embedding keeps the experience on your turf. Your branding, your copy, and your call-to-action all stay visible. The client fills in their details and picks a time slot without ever feeling like they've wandered onto a different platform. For coaches running a premium practice, that continuity matters.

There's also an SEO argument: visitors who stay on your site longer signal engagement to Google. A booking interaction that happens on-page is far more engaging than a redirect bounce.

Finding Your Coachful Booking Page URL

Before you can embed anything, you need the exact URL of your booking page. Here's how to locate it:

1. Sign in to your Coachful dashboard at app.coachful.co/sign-in.
2. Navigate to Bookings → Scheduling in the left sidebar.
3. Select the session type you want to embed — for example, a 60-minute discovery call or a recurring 1:1 session.
4. Click Share or Copy Link. Your booking URL will look like yourslug.coachful.co/book/session-name.
5. If you have a custom domain connected (e.g., coachingwithyou.com), the URL will reflect that instead.

Copy this URL — you'll use it in every method below. You can embed individual session-type pages (e.g., just your intake call) or your main booking hub that lists all available session types. Embedding a specific session type usually converts better because it removes the extra choice.

Method 1 — Iframe Embed (Recommended)

An iframe (inline frame) loads your Coachful booking page inside a box on your external site. It's the most seamless option and works on virtually every website platform.

The Basic Iframe Code

Paste the following HTML wherever you want the booking calendar to appear on your page. Replace the src value with your actual booking URL:

<iframe
  src="https://yourslug.coachful.co/book/session-name"
  width="100%"
  height="700"
  frameborder="0"
  scrolling="auto"
  style="border: none; border-radius: 8px;"
  title="Book a session with [Your Name]"
></iframe>

Recommended Iframe Attributes

• width="100%" — Makes the embed responsive and fills its container on any screen size.
• height="700" — 700px works well for most booking flows. If your booking page has a long form, increase to 900px to avoid double scrollbars.
• frameborder="0" — Removes the default iframe border for a cleaner look.
• scrolling="auto" — Allows internal scrolling if the content overflows the frame height.
• title="..." — Required for accessibility. Screen readers announce this to visually impaired users.

How to Add It in Popular Website Builders

WordPress (Block Editor): Add a Custom HTML block to your page and paste the iframe code directly. No plugin needed.

Squarespace: Edit the page, add a Code Block (available on Business plans and above), and paste your iframe snippet.

Webflow: Drag an Embed element onto your canvas, open its settings, and paste the iframe code.

Wix: Use the HTML iFrame element from the Add menu, then enter your iframe code in the settings panel.

Notion public pages / Framer / Carrd: All support HTML embed blocks — paste your snippet into any code/embed widget.

Pro tip: Wrap your iframe in a <div> with max-width: 720px; margin: 0 auto; to center it nicely on wide-screen layouts without stretching the booking form uncomfortably wide.

Method 2 — Booking Button (Simple and Fast)

If a full iframe feels like too much, or if your page design doesn't have space for a large calendar widget, a styled button that opens your booking URL is a solid fallback. It's one line of HTML:

<a href="https://yourslug.coachful.co/book/session-name" target="_blank"
   style="display:inline-block; padding:14px 28px; background:#5B4CF5;
          color:#fff; font-weight:600; border-radius:6px; text-decoration:none;">
  Book a Free Discovery Call
</a>

Adjust the hex color (#5B4CF5) to match your brand. The target="_blank" opens Coachful in a new tab so your visitor doesn't fully leave your site. This method works everywhere — no platform restrictions, no code blocks required (most rich-text editors accept raw anchor tags).

Method 3 — Pop-Up Modal Embed

A modal keeps your booking page visually contained inside your website without requiring a permanent iframe block. When a visitor clicks "Book Now", a lightbox opens with the Coachful scheduler inside. When they're done, they close it and return to your page.

This approach requires a small amount of JavaScript. Here's a minimal example:

<!-- Trigger button -->
<button onclick="document.getElementById('booking-modal').style.display='flex'"
        style="padding:14px 28px; background:#5B4CF5; color:#fff;
               border:none; border-radius:6px; cursor:pointer; font-weight:600;">
  Book a Session
</button>

<!-- Modal overlay -->
<div id="booking-modal"
     style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6);
            z-index:9999; align-items:center; justify-content:center;"
     onclick="if(event.target===this)this.style.display='none'">
  <div style="background:#fff; border-radius:12px; width:90%; max-width:680px;
              height:80vh; overflow:hidden; position:relative;">
    <button onclick="document.getElementById('booking-modal').style.display='none'"
            style="position:absolute; top:12px; right:16px; background:none;
                   border:none; font-size:24px; cursor:pointer;">&times;</button>
    <iframe src="https://yourslug.coachful.co/book/session-name"
            width="100%" height="100%" frameborder="0" title="Book a session"></iframe>
  </div>
</div>

Paste this anywhere in your page's HTML. Clicking outside the modal or the × button closes it. No jQuery or external library needed.

Already on Coachful's website builder? You don't need any of this. Your booking page is natively embedded in your Coachful website — just add a booking section block and your calendar appears automatically, complete with your availability rules and session types.

Connecting Availability and Calendar Sync Before You Go Live

Embedding a booking page that shows incorrect availability is worse than not embedding one at all. Before you publish the embed, make sure your scheduling settings are properly configured in Coachful.

1. Go to Bookings → Availability and set your working hours for each day of the week.
2. Connect your Google Calendar or Apple Calendar under Settings → Integrations → Calendar Sync to block off times you're already busy.
3. Set buffer times between sessions (recommended: 10–15 minutes) to avoid back-to-back calls with no breathing room.
4. Configure minimum notice (e.g., 24 hours) so clients can't book a call starting in 30 minutes when you're unprepared.
5. Preview your booking page at your {yourslug}.coachful.co/book URL to confirm the correct slots appear before embedding.

Coachful handles timezone conversion automatically — your availability is displayed in each visitor's local timezone. This is particularly important if you coach clients across multiple countries.

Making the Embed Mobile-Friendly

More than half of web traffic is mobile, and booking pages are no exception. A few small tweaks ensure the embedded scheduler looks great on phones:

• Always use width="100%" on your iframe — never a fixed pixel width like width="600".
• Wrap the iframe in a container with overflow-x: hidden if your site has a narrow mobile viewport.
• Test on an actual mobile device (not just browser DevTools) — scroll behavior inside iframes can behave differently on iOS Safari in particular.
• If the iframe feels cramped on mobile, consider switching to the button method on small screens using a CSS media query, showing the iframe only on tablets and desktops.

Coachful's booking page is itself fully responsive, so the content inside the iframe will reflow correctly regardless of iframe width.

Troubleshooting Common Embedding Issues

The booking page shows a blank white box

This usually means the URL in your src attribute is incorrect. Double-check that your slug is spelled correctly and that the session-type path matches exactly what's in your Coachful dashboard. Also confirm your Coachful account is active — free trials that have expired will return an error page.

The iframe is cut off and shows double scrollbars

Your iframe height is too short for the content. Increase it from 700px to 800px or 900px. If you're on a step-based booking form with multiple screens, consider setting height to at least 900px to accommodate the confirmation screen without clipping.

My website platform won't let me paste HTML

Some free-tier website plans (e.g., Squarespace Personal, free Wix) restrict custom HTML embeds. You have two options: upgrade to a plan that allows code blocks, or use the button method instead — most platforms allow you to add a hyperlink to a button even without raw HTML access.

The page loads but calendar slots appear incorrect

Go back to Bookings → Availability in Coachful and verify your calendar sync is active. If your Google Calendar connection has expired (tokens expire periodically), reconnect it under Settings → Integrations. After reconnecting, clear your browser cache and reload the embedded page.

Clients say they're getting an error after booking

Check that your Stripe Connect account is fully onboarded if the session type has a price attached. Bookings with payment required will fail at checkout if Stripe setup is incomplete. Navigate to Settings → Payments to verify your Stripe status.

The embed looks different from my site's design

Iframes load the source page's own styles — you can't directly override Coachful's booking page CSS from your external site. The best approach is to match the aesthetic at the brand level: use your custom domain, upload your logo in Settings → Branding, and set your brand color in Coachful so the booking page's palette aligns with your site.

Best Practices for Higher Booking Conversions

Embedding the page is only half the job. Here's how to maximize the number of visitors who actually complete a booking:

• Place the embed below compelling copy. Don't open a page with a cold calendar. Lead with your offer, outcome, and social proof — then show the booking widget.
• Use a specific session type. Embedding your "Free 30-Minute Discovery Call" page converts better than your general booking hub, because clients aren't paralyzed by choice.
• Add urgency copy above the embed. Something like "Only 3 spots available this month" (if true) dramatically increases booking rates.
• Test on mobile before going live. Book a test appointment yourself on your phone to catch any friction points.
• Confirm automated emails are set up. In Coachful, go to Bookings → Notifications to ensure clients receive a confirmation email and reminder. A no-show is almost always a reminder problem.

Coaches using Coachful's built-in website builder skip the embedding step entirely — booking sections, landing pages, and lead-magnet funnels are all connected natively. If managing two platforms feels like overhead, it might be worth consolidating.

Ready to Get More Bookings From Your Website?

Embedding your booking page is one of the highest-leverage changes you can make to a coaching website. It removes the redirect, keeps clients engaged, and turns passive readers into scheduled appointments. With the iframe snippet above, you can have it live in under five minutes.

If you're not yet using Coachful's scheduling tools — or you want to explore consolidating your booking page, website, and client management in one place — start your free trial at Coachful. no charge during the 7-day free trial — credit card required at signup, cancel anytime in one click. Your booking page will be ready to share (and embed) the same day.

Already have an account? Sign in to your Coachful workspace and grab your booking URL from the Scheduling tab right now.