How do I embed Calendly?

Setup steps

1. In Calendly, get your event's public scheduling link (e.g. calendly.com/your-name/30min).
2. Ask Lovable:

"Embed my Calendly scheduling page (calendly.com/your-name/30min) as an inline widget on the Book a Call page."

Lovable will add Calendly's embed script and container div, which is the standard, supported way to embed it — no API key or backend work required for the basic inline or popup widget.

Inline vs popup vs link

• Inline embed: the calendar sits directly in your page layout — best if booking is the primary action on that page.
• Popup widget: a button opens Calendly in an overlay — good for a secondary call-to-action.
• Plain link: just a button that opens Calendly in a new tab — simplest, no embed script needed at all.

"Add a 'Book a call' button that opens my Calendly link in a popup instead of embedding it inline."

Passing data into Calendly

If you want to prefill the visitor's name or email (e.g. from a logged-in user), Calendly's embed supports URL parameters or a prefill object — mention this to Lovable if you need it, since it's a bit more setup than the default embed.

Getting booking data back into your app

The basic embed is one-way — Calendly doesn't push bookings into your Lovable database automatically. If you need that, you'd use Calendly's webhooks (paid plans) to notify a Lovable server function when someone books — see /questions/how-do-i-receive-webhook-data.

What usually goes wrong

• Embed showing blank because the Calendly link is a personal (non-public) URL — always use the public scheduling link.
• Inline widget with no explicit height set on its container, so it renders squashed.
• Expecting bookings to sync into your own database automatically — that needs a separate webhook integration.