# Framer Calendly Integration

> To add Calendly in Framer, open your project, go to the Insert menu, search for components, and drop the Calendly component onto your canvas. Connect the app, personalize your details, tweak typography, access publishing options, copy your link, and click Publish to save your settings.

Canonical: https://livedemo.ai/tutorials/framer-calendly-integration/
Apps: Calendly, Framer
Updated: 2026-10-05
Interactive demo: https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/6929ff3c7dd0e157abed9182/preview?step=1

## Steps

1. Open your Framer project.
2. Navigate to the 'Insert' menu.
3. Search for Calendly-specific components in our template library.
4. Drop the 'Calendly' component onto your canvas with a single click.
5. Access publishing options to take your Calendly integration live.
6. Connect Calendly to add hassle-free scheduling to your Framer website.
7. Copy the link to share your Calendly-enabled design with your team.
8. Add your details here to personalize your Calendly integration.
9. Tweak typography for your Calendly booking page for better readability.
10. Click 'Publish' to save your work to keep your Calendly integration settings for later.