Your Booking Widget
Free Lead Capture.
Forever.
Your calendar is live, always on, and costs nothing to run — share it everywhere and turn every click into a booked appointment.
No Hosting Fees
Runs free on Cloudflare — forever
Always ON
24/7 — captures leads while you sleep
Share Everywhere
Email · texts · social · your website
Cut Calendly
Same result — zero monthly fee
3 Ways to Use It
Your calendar is already live.
Below are 3 ways to put it to work — pick whichever fits where you want prospects to find you. All three use the same widget URL, so you only ever have one thing to manage.
Your Widget URL
your-project.your-account.workers.dev/
your-project = your Cloudflare project name · your-account = your Cloudflare account name
1
Direct Link
Share the URL anywhere — opens the calendar full-page in a new tab
Just share the URL
The simplest option — paste your widget URL into any email, text message, social bio, or email signature. The prospect clicks it and your full booking calendar opens in their browser. No website needed.
Best for: email signatures · social bios · text messages · Google Business profile
Your direct booking link
https://your-project.your-account.workers.dev/
1
Copy the link above (replacing
your-project and your-account with your actual Cloudflare names)2
Paste it anywhere — email signature, Instagram bio, text message, Facebook post, Google Business profile, anywhere. Tip: the URL can be long — consider using a free link shortener like bitly.com to create a short, clean link like
bit.ly/bookwithme that's easier to share and looks more professional in email signatures and social bios.3
Anyone who clicks it lands directly on your booking calendar — no website required
2
Inline Embed
The calendar appears directly on a page of your website — no popup
Embed it on a "Book Now" page
Paste one line of code into your website's embed block. The booking calendar appears inline — no popup, no new tab. Great for a dedicated scheduling page on your site.
Best for: a dedicated "Schedule a Consultation" page on your website
Paste into your website's embed code block
<iframe
src="https://your-project.your-account.workers.dev/"
width="100%"
height="1150"
style="border:none;border-radius:12px;"
loading="lazy"
title="Schedule a Consultation">
</iframe>
<!-- Replace your-project and your-account with your Cloudflare names -->
1
Copy the code above and replace
your-project and your-account with your actual Cloudflare names2
In your website editor, add an Embed Code block on the page where you want the calendar — Weebly: drag "Embed Code" · Squarespace: add "Code" block · Wix: "HTML iFrame" · WordPress: "Custom HTML"
3
Paste the code and publish — the calendar appears live on the page
4
Always test on the published page — iframes don't show in most site-builder editor previews. Check the live URL to confirm.
3
Popup Button
Recommended
A "Book Now" button anywhere on your site — click it and the calendar slides up as an overlay
Add a booking button anywhere on any page
Paste the code once and a professional booking button appears on your page. Click it and your calendar slides up in a full-screen overlay — the visitor never leaves your site. Works on any page: home, contact, blog, header, footer.
Best for: any page — highest-converting option, works everywhere
Update 3 things in this code before pasting:
①
② Button text → change to your preferred call-to-action
③
your-project.your-account → your Cloudflare names in the WIDGET_URL line② Button text → change to your preferred call-to-action
③
#0052ff → your brand color (appears in 2 places)
Paste into your website's embed code block
<!-- BOOKING WIDGET POPUP BUTTON
Update the 3 items marked UPDATE below before pasting -->
<style>
.bwl-trigger {
display: inline-flex !important; align-items: center !important; gap: 10px !important;
padding: 16px 32px !important;
background: linear-gradient(135deg, #0052ff, #0090ff) !important; /* UPDATE: brand color */
color: #fff !important; -webkit-text-fill-color: #fff !important;
font-family: Arial, sans-serif !important; font-size: 16px !important; font-weight: 700 !important;
border: none !important; border-radius: 99px !important; cursor: pointer !important;
text-decoration: none !important; line-height: 1.2 !important;
text-transform: none !important; margin: 0 !important; transition: opacity 0.2s !important;
}
.bwl-trigger:hover { opacity: 0.88 !important; }
.bwl-overlay {
display: none !important; position: fixed !important;
top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
z-index: 999999 !important; background: rgba(6,6,20,0.82) !important;
align-items: center !important; justify-content: center !important; padding: 16px !important;
}
.bwl-overlay.open { display: flex !important; }
.bwl-modal {
position: relative !important; width: 100% !important; max-width: 680px !important;
max-height: 92vh !important; border-radius: 20px !important; overflow: hidden !important;
box-shadow: 0 24px 80px rgba(0,0,0,0.6) !important; background: #060614 !important; margin: auto !important;
}
.bwl-close {
position: absolute !important; top: 12px !important; right: 14px !important; z-index: 10 !important;
width: 32px !important; height: 32px !important; border-radius: 50% !important;
background: rgba(255,255,255,0.15) !important; border: none !important;
color: #fff !important; font-size: 16px !important; cursor: pointer !important;
display: flex !important; align-items: center !important; justify-content: center !important;
}
.bwl-frame {
width: 100% !important; height: 86vh !important; max-height: 820px !important;
border: none !important; display: block !important;
}
@media (max-width: 600px) {
.bwl-modal { max-height: 96vh !important; border-radius: 14px !important; }
.bwl-frame { height: 90vh !important; }
.bwl-trigger { font-size: 14px !important; padding: 14px 24px !important; }
}
</style>
<!-- UPDATE: Change button text below to your preferred CTA -->
<button class="bwl-trigger" onclick="bwlOpen()">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
<rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/>
<line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
</svg>
Schedule a Free Consultation <!-- UPDATE: button text -->
</button>
<div class="bwl-overlay" id="bwlOverlay" onclick="bwlOverlayClick(event)">
<div class="bwl-modal">
<button class="bwl-close" onclick="bwlClose()">✕</button>
<iframe class="bwl-frame" id="bwlFrame" src="" title="Book a Consultation"></iframe>
</div>
</div>
<script>
(function() {
/* UPDATE: replace your-project and your-account with your Cloudflare names */
var WIDGET_URL = 'https://your-project.your-account.workers.dev/';
var bwlLoaded = false, bwlMoved = false, bwlScrollY = 0;
window.bwlOpen = function() {
var o = document.getElementById('bwlOverlay');
if (!bwlMoved) { document.body.appendChild(o); bwlMoved = true; }
if (!bwlLoaded) { document.getElementById('bwlFrame').src = WIDGET_URL; bwlLoaded = true; }
bwlScrollY = window.scrollY;
document.body.style.cssText += ';position:fixed;top:-'+bwlScrollY+'px;width:100%;overflow:hidden;';
o.classList.add('open');
};
window.bwlClose = function() {
document.getElementById('bwlOverlay').classList.remove('open');
document.body.style.position = '';
document.body.style.top = '';
document.body.style.width = '';
document.body.style.overflow = '';
window.scrollTo(0, bwlScrollY);
};
window.bwlOverlayClick = function(e) {
if (e.target === document.getElementById('bwlOverlay')) window.bwlClose();
};
document.addEventListener('keydown', function(e) {
var o = document.getElementById('bwlOverlay');
if (e.key === 'Escape' && o && o.classList.contains('open')) window.bwlClose();
});
})();
</script>
1
Copy the code above and open it in VS Code or any text editor
2
Replace
your-project and your-account in the WIDGET_URL line · update the button text · swap #0052ff to your brand color3
Add an Embed Code block in your website editor wherever you want the button, paste the updated code, and publish
4
Test on the live published page — click the button, confirm the calendar opens as an overlay, and do a test booking to verify it arrives in your email
Copied to clipboard!