How to Embed a Booking Widget on Your Website (Calendly, Cal.com, and More)
A booking widget on your website lets visitors pick a time and confirm a meeting in seconds — no email back-and-forth, no form submissions disappearing into a queue. Here’s how to embed one, tool by tool and platform by platform.
Carly: Free Booking Pages You Can Link or Embed
Carly offers free booking pages that work like Calendly or Cal.com — share a link and people book time with you. Embed it on your site as a simple link or styled button:
<a href="https://your-carly-booking-link"
style="background-color: #2563eb; color: #ffffff; padding: 12px 24px;
border-radius: 6px; text-decoration: none; font-size: 16px;
font-family: sans-serif; display: inline-block;">
Book a Meeting
</a>Booking pages and group availability polls are free. Carly also has AI scheduling via email and text if you want meetings coordinated automatically.
Calendly: Three Embed Options
Calendly gives you three ways to embed scheduling on your site. All three start the same way: go to your Calendly dashboard, select the event type you want, click Share, then Add to website.
Inline Embed
The inline embed drops the full scheduling calendar directly into your page. Visitors see available times without clicking anything extra.
<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget"
data-url="https://calendly.com/YOUR-USERNAME/30min"
style="min-width:320px;height:700px;">
</div>
<script type="text/javascript"
src="https://assets.calendly.com/assets/external/widget.js"
async>
</script>
<!-- Calendly inline widget end -->Replace YOUR-USERNAME/30min with your actual Calendly link. Adjust the height value if the widget gets cut off on your page.
Popup Text
This turns any text link into a trigger that opens the Calendly scheduler in a modal overlay.
<!-- Calendly link widget begin -->
<link href="https://assets.calendly.com/assets/external/widget.css"
rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js"
type="text/javascript" async>
</script>
<a href=""
onclick="Calendly.initPopupWidget({url: 'https://calendly.com/YOUR-USERNAME/30min'});return false;">
Schedule a call
</a>
<!-- Calendly link widget end -->Popup Widget (Badge Button)
This adds a persistent floating button (usually bottom-right) that opens the scheduler when clicked.
<!-- Calendly badge widget begin -->
<link href="https://assets.calendly.com/assets/external/widget.css"
rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js"
type="text/javascript" async>
</script>
<script type="text/javascript">
window.onload = function() {
Calendly.initBadgeWidget({
url: 'https://calendly.com/YOUR-USERNAME/30min',
text: 'Schedule time with me',
color: '#0069ff',
textColor: '#ffffff'
});
};
</script>
<!-- Calendly badge widget end -->You can change the color, textColor, and text values to match your branding.
Pro tip: Add ?hide_event_type_details=1 to your URL to remove the event description and show a cleaner widget. Add ?hide_gdpr_banner=1 to suppress the cookie banner.
Cal.com: Three Embed Options
Cal.com is an open-source Calendly alternative with similar embed options: inline, popup via element click, and floating button. Get your embed code from Event Types > three-dot menu > Embed. Cal.com generates both HTML and React versions.
Inline Embed
<div id="my-cal-inline" style="width:100%;height:100%;overflow:scroll"></div>
<script type="text/javascript">
(function (C, A, L) {
let p = function (a, ar) { a.q.push(ar); };
let d = C.document;
C.Cal = C.Cal || function () {
let cal = C.Cal;
let ar = arguments;
if (!cal.loaded) {
cal.ns = {};
cal.q = cal.q || [];
d.head.appendChild(d.createElement("script")).src = A;
cal.loaded = true;
}
if (ar[0] === L) {
const api = function () { p(api, arguments); };
const namespace = ar[1];
api.q = api.q || [];
if (typeof namespace === "string") {
cal.ns[namespace] = cal.ns[namespace] || api;
p(cal.ns[namespace], ar);
p(cal, ["initNamespace", namespace]);
} else p(cal, ar);
return;
}
p(cal, ar);
};
})(window, "https://app.cal.com/embed/embed.js", "init");
Cal("init", {origin: "https://cal.com"});
Cal("inline", {
elementOrSelector: "#my-cal-inline",
calLink: "YOUR-USERNAME/30min",
layout: "month_view"
});
Cal("ui", {
theme: "light",
styles: {branding: {brandColor: "#000000"}},
hideEventTypeDetails: false,
layout: "month_view"
});
</script>Popup (Element Click)
Wrap the Cal loader script above on your page, then trigger a popup from any element:
<button
data-cal-link="YOUR-USERNAME/30min"
data-cal-config='{"layout":"month_view"}'>
Book a call
</button>Cal.com’s embed script automatically attaches click handlers to elements with data-cal-link.
Floating Button
<script type="text/javascript">
// After loading the Cal embed script above:
Cal("floatingButton", {
calLink: "YOUR-USERNAME/30min",
buttonText: "Book a call",
buttonColor: "#000000",
buttonTextColor: "#ffffff"
});
</script>Acuity Scheduling: Iframe Embed
Acuity Scheduling (owned by Squarespace) uses an iframe approach. In your Acuity dashboard, go to Scheduling Page > Direct Links & Embedding, then grab the code from the Embed Scheduler tab.
Standard Embed
<iframe
src="https://YOUR-SUBDOMAIN.acuityscheduling.com/schedule.php?owner=YOUR-OWNER-ID"
width="100%"
height="800"
frameBorder="0">
</iframe>
<script
src="https://embed.acuityscheduling.com/js/embed.js"
type="text/javascript">
</script>The JavaScript file handles responsive resizing so the iframe adjusts height automatically as visitors navigate the calendar.
Pre-filling Client Info
You can pass URL parameters to skip form fields:
https://YOUR-SUBDOMAIN.acuityscheduling.com/schedule.php?firstName=Jane&lastName=Smith&email=jane@example.com&appointmentType=12345Useful if your booking widget sits behind a lead capture form — pass the data through so visitors don’t enter it twice.
Booking Button and Booking Bar
Acuity also offers a Booking Button (a styled link that opens your scheduler) and a Booking Bar (a fixed bar at the top or bottom of the page). Both are available under the same Direct Links & Embedding section. The booking bar code goes in your site’s footer injection area.
The Generic Iframe Approach (Any Scheduling Tool)
If your scheduling tool doesn’t offer a dedicated embed script, an iframe works with virtually any booking page. This applies to tools like YouCanBook.me, SavvyCal, Doodle, TidyCal, and others.
<iframe
src="https://your-scheduling-tool.com/your-booking-page"
width="100%"
height="700"
frameBorder="0"
style="border: none;">
</iframe>A few things to watch out for:
- Height issues. Iframes don’t auto-resize by default. Set a generous
heightvalue (700-900px) or use a script like iframe-resizer to handle dynamic height changes. - Mobile responsiveness. Set
width="100%"and test on a phone. Some booking pages render poorly inside iframes on small screens. - Cookie/third-party restrictions. Safari and some browsers block third-party cookies by default, which can break login-dependent booking pages. If visitors report issues, link out to the booking page directly instead.
Platform-Specific Instructions
WordPress
Option A: Custom HTML block (works with any tool)
- Edit the page or post where you want the widget.
- Add a Custom HTML block (click + > search “HTML”).
- Paste the embed code from your scheduling tool.
- Preview the page to confirm it renders correctly.
Option B: Calendly’s WordPress plugin
- Install the Calendly plugin from Plugins > Add New.
- Activate it, then go to Settings > Calendly.
- Paste your Calendly link and choose inline or popup.
- Use the
[calendly]shortcode or the Calendly Gutenberg block on any page.
Option C: Cal.com’s WordPress plugin
Cal.com also offers a WordPress plugin that adds a booking block to the editor. Install it, connect your Cal.com account, and insert the block.
Squarespace
- Edit the page where you want the booking widget.
- Add a Code Block (click + > Code).
- Paste your embed code (iframe, Calendly widget script, or Cal.com script).
- Uncheck “Display Source” — you want the rendered widget, not raw code.
- Save and preview.
Squarespace + Acuity: Since Squarespace owns Acuity, there’s a native Scheduling Block you can use instead of code. Go to Add Block > Scheduling and it pulls directly from your Acuity account.
For floating buttons or booking bars, use Settings > Advanced > Code Injection and paste the script in the Footer field so it loads on every page.
Wix
- Open the Wix Editor.
- Click Add (+) on the left panel.
- Click Embed Code > Embed HTML.
- A box appears on the page. Click it, then click Enter Code.
- Paste your embed code and click Update.
- Resize and position the embed box as needed.
Note: Wix’s HTML embed component is essentially an iframe wrapper. Height may need manual adjustment. The Wix App Market also has dedicated Calendly and booking integrations that handle this automatically.
Webflow
- In the Webflow Designer, open your page.
- From the Add Elements panel (left side), drag an Embed element to where you want the widget.
- Paste your embed code (HTML + JavaScript) into the code editor.
- Save and publish.
Webflow renders custom code only on the published site or in preview mode, not in the Designer canvas.
Troubleshooting Common Embed Issues
Widget doesn’t appear. Check for JavaScript conflicts. Ad blockers and privacy extensions can block Calendly and Cal.com scripts. Test in an incognito window with extensions disabled.
Widget is cut off or has scrollbars. Increase the height value in the embed code. For Calendly inline embeds, 700px is a safe starting point. For Acuity iframes, 800px or more.
Widget works on desktop but breaks on mobile. Make sure width is set to 100%, not a fixed pixel value. Test on actual devices — browser dev tools don’t always catch iframe rendering quirks.
Double bookings. This is a tool-side issue, not an embed issue. Make sure your scheduling tool is connected to your actual calendar (Google Calendar, Outlook) and that “check for conflicts” is enabled.
Slow load times. Embed scripts add JavaScript to your page. Load them with async where supported. A styled booking button that opens the scheduling page in a new tab loads zero extra JavaScript.
Ready to automate your busywork?
Carly schedules, researches, and briefs you—so you can focus on what matters.
Get Carly Today →Or try our Free Group Scheduling Tool
