If you’re tired of back-and-forth emails to schedule calls, you’re not alone. Most folks just want a simple, reliable way for clients to book them online—without jumping through hoops. This guide is for business owners, freelancers, coaches, or anyone who wants to add a booking system to their website and actually have it work. We’ll use Calendly, which is one of the most popular tools for this. I'll walk you through the setup, show you what to watch out for, and give you tips so your calendar doesn’t turn into chaos.
Why Embed Calendly on Your Website? (And When You Shouldn't)
Calendly makes it easy for people to see your availability and book time with you. By embedding it right on your website, clients don’t need to click away or copy links—they just pick a time and go. It feels more professional, and you’re less likely to lose people along the way.
But, a quick reality check: Embedding Calendly is great if you take appointments, discovery calls, or consultations. If you have complex scheduling rules, or you want folks to jump through a bunch of custom forms before booking, you might hit some limits. Calendly handles most needs well, but it’s not magic.
Step 1: Get Your Calendly Account Ready
Before you do anything on your website, you need a Calendly account. The free plan works for most solo users, but if you want group events, payment collection, or advanced reminders, you’ll need to pay.
What you’ll need: - A Calendly account (free or paid) - At least one event type set up (e.g., “30-Minute Call”)
Pro tip:
Don’t overthink your event setup. Start simple—just set your working hours, buffer time, and meeting length. You can tweak it later.
Step 2: Decide Where Calendly Fits on Your Site
There are three main ways to add Calendly to your site:
- Inline Embed: Calendly shows up right on a page (good for a “Book Now” or “Schedule a Call” page).
- Popup Widget: A floating button that follows users around (“Schedule a Meeting” pops up on click).
- Popup Text: Turns any link or button into a Calendly popup.
Which to choose? - Inline looks clean and keeps people on the page. Best for dedicated booking pages. - Popup Widget is less intrusive, works well on every page, but can feel like a chat bubble (some people find it annoying). - Popup Text is flexible—you can use it in a menu, footer, or anywhere you want.
If you want to keep things simple, start with an inline embed on a single page.
Step 3: Grab Your Calendly Embed Code
Here’s how to get the code straight from Calendly:
- Log in to Calendly.
- Go to your “Event Types.”
- Click the gear icon next to the event you want to share, then select “Share.”
- Pick “Add to Website.”
- Choose your embed type (Inline, Popup Widget, or Popup Text).
- Calendly will show you some HTML code. Copy it.
What’s in the code?
Calendly gives you a <div> and a <script>. You’ll need both.
Step 4: Add Calendly to Your Website
This step depends on what you use to build your website. Don’t worry—if you can copy and paste, you can do this.
For WordPress
You don’t need a plugin (unless you want one). Here’s the easiest way:
- Go to the page or post where you want Calendly.
- Switch to the “Text” or “HTML” view (not Visual).
- Paste the Calendly code where you want it to appear.
- Update or publish.
Watch out:
Some page builders (like Elementor or Divi) want you to use an “HTML” or “Code” block. Use that instead of the regular text editor.
For Squarespace
- Edit the page where you want Calendly.
- Click “Add Block” and choose “Code.”
- Paste the Calendly code.
- Set the block to “HTML” (not Markdown).
- Save.
Heads up:
Squarespace sometimes strips out scripts in certain areas. If it doesn’t work, try a different block or move it to a regular page section.
For Wix
- Go to the Wix Editor.
- Click “Add” > “Embed” > “Custom Embeds” > “Embed a Widget.”
- Drag it onto the page.
- Click “Enter Code” and paste the Calendly embed.
- Resize as needed.
For Plain HTML Sites
- Open your HTML file.
- Paste the Calendly code where you want the booking tool to appear.
- Save and upload.
Pro tip:
If you’re using a static site generator (like Jekyll, Hugo, or Eleventy), just drop the Calendly code into your template or page markdown (using raw HTML).
Step 5: Test It Like a Client
Don’t just assume it works—check it yourself. Visit your site on desktop and mobile. Try booking an appointment. Does it load quickly? Is it cut off or too small? Are the colors readable?
What to look for: - Can you actually pick a time and finish booking? - Does the embed fit on mobile screens, or is it squished? - If using popups, do they block other important stuff?
If it’s slow:
Calendly embeds can add a second or two to load times, especially on slower connections. Not a dealbreaker for most, but don’t put it on your homepage if speed is critical.
Step 6: Customize the Look (Optional)
Calendly’s default style is… fine. It blends in, but it won’t win design awards. You can tweak a few things:
- Background color: Use the “Embed Options” in Calendly to match your site.
- Hide event details: If you want a cleaner look, you can hide the event type name and description.
- Custom CSS: Advanced users can apply some custom CSS, but it’s limited.
Reality check:
You can’t overhaul the whole look unless you’re on a higher Calendly plan and even then, it’s not super flexible. If branding is a big deal, test the embed before you promise your designer the world.
Step 7: Handle Notifications and Calendar Sync
Calendly can send confirmation emails and reminders to both you and your client. It also syncs with Google Calendar, Outlook, or iCloud if you connect them.
What matters: - Make sure your calendar is syncing—double bookings are a nightmare. - Adjust notification settings so clients actually get reminders (and you do, too).
Pro tip:
Don’t overdo the reminders. One confirmation and one reminder is usually enough. Too many, and people start to ignore them.
Step 8: Watch for Common Pitfalls
Even though embedding Calendly is straightforward, here’s what trips people up:
- Time zone confusion: Calendly tries to auto-detect, but tell clients to double-check.
- Multiple event types: If you embed your whole Calendly profile, clients see all event types. If you want them to book just one, embed that specific event.
- Script conflicts: If your site uses lots of plugins or scripts, something might break. If the embed doesn’t load, try disabling other scripts to troubleshoot.
- Accessibility: Calendly’s embed is mostly accessible, but if you have strict accessibility requirements, test it with a screen reader.
Do You Need the Calendly Plugin or App?
For most sites, the plain HTML embed is fine. Plugins and integrations can add features, but also complexity (and sometimes bugs). Only use the plugin if you need extra automation or want to manage everything from your CMS dashboard.
What to Ignore
- “Advanced” integrations (at first): You don’t need Zapier, webhooks, or fancy automations to start. Add those only when bookings are rolling in and you know what you actually need.
- Over-customizing: Clients care about booking a time, not your pixel-perfect colors. Focus on clarity and speed.
Keep It Simple—And Iterate
Don’t let the perfect be the enemy of the good. Start with a basic Calendly embed, make sure it works, and let clients book you without friction. If a feature or customization doesn’t actually help you or your clients, skip it. You can always tweak things later as you learn what works (and what doesn’t) for your business.
If you hit a wall or need more control, there are other scheduling tools out there—but for most folks, this setup will save you headaches and get you back to work.