Calendly Embed Generator

Paste your Calendly link and get a free embed code that puts your booking calendar on your website — with your color and the details you want to show. No sign-up needed.
Your scheduling page or one event’s link, e.g. https://calendly.com/your-name/30min
At least 630 px, so the calendar doesn’t scroll inside.

Embed the booking page

<div class="calendly-inline-widget" data-url="https://calendly.com/calendly-demo" style="min-width:320px;height:700px;"></div>
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
<p style="margin:4px auto 0;text-align:center;font:11px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#a3a7b0;">Created with <a href="https://elfsight.com/tools/calendly-embed-generator/" target="_blank" rel="noopener" style="color:inherit;text-decoration:none;">Elfsight</a></p>

  1. Click Copy code above to copy it.
  2. Open the page’s HTML file or template.
  3. Paste the code inside <body>, where the content should appear.
  4. Save and upload the page, then open it in a browser to check.
Appointment Booking widget

Take bookings right on your website

Show real-time availability and accept bookings without calls, emails or manual coordination. Services, prices and durations sit on one card, so clients book in seconds.

  • Bookings around the clock

  • Services with prices and durations

  • Two-way Google Calendar sync

Create Widget for Free
No credit card needed
Learn about Appointment Booking

Generator vs Calendly’s Share → Add to website

Both produce Calendly’s official embed code with the same script. The difference is where you build it and which options you can set without editing code by hand.
Calendly’s Share → Add to website
This generator
Where you build the code
Inside your Calendly account
Here, from any public scheduling link, no sign-in
Embed types
Inline embed, pop-up widget, pop-up text
The same three: inline, pop-up on a button or link, floating badge
Hide event details and the cookie banner
Checkboxes before you copy the code
Switches that add hide_event_type_details=1 and hide_gdpr_banner=1
Prefill name and email
Edit the link by hand or use Calendly’s JavaScript prefill option
Fields that add name=, email= and a1= to the link
Colors
Background, text and button colors on paid plans
Writes the same color parameters; Calendly applies them only on paid plans

Where you build the code

Calendly’s Share → Add to website

Inside your Calendly account

This generator

Here, from any public scheduling link, no sign-in

Embed types

Calendly’s Share → Add to website

Inline embed, pop-up widget, pop-up text

This generator

The same three: inline, pop-up on a button or link, floating badge

Hide event details and the cookie banner

Calendly’s Share → Add to website

Checkboxes before you copy the code

This generator

Switches that add hide_event_type_details=1 and hide_gdpr_banner=1

Prefill name and email

Calendly’s Share → Add to website

Edit the link by hand or use Calendly’s JavaScript prefill option

This generator

Fields that add name=, email= and a1= to the link

Colors

Calendly’s Share → Add to website

Background, text and button colors on paid plans

This generator

Writes the same color parameters; Calendly applies them only on paid plans

Calendly link parameters

These go after ? in your scheduling link, joined with &. The generator adds them for you; you can also type them into any Calendly link.
Option
What it does
Values
Notes
hide_event_type_details
Hides your photo, name, event duration, location and description
1
For a link to one event type. All plans.
hide_landing_page_details
Hides the same details on a page that lists all your events
1
For a personal or team landing page. With both parameters, the event description may still show.
hide_gdpr_banner
Hides Calendly’s cookie banner
1
Only if your own site handles cookie consent (GDPR, CCPA).
background_color, text_color, primary_color
Background, text, and button and link color of the scheduling page
Hex without #, e.g. 0069ff
Paid Calendly plans only. The button label switches to black or white for contrast.
name, first_name, last_name, email
Fills in the booking form
Text; spaces as %20
Use first_name and last_name if your form asks for them separately.
a1, a2 …
Answers your own booking questions
Text; for checkboxes and radio buttons the option number, e.g. a3=2,3
The number is the question’s position on the form. “Other” fields and SMS reminder numbers can’t be prefilled.
Button text, color, textColor
Label and colors of the floating badge
Text; hex with #, e.g. #0069ff
Options of Calendly.initBadgeWidget, not link parameters. Calendly lists color and button text changes as paid-plan features.
branding
Adds a “powered by Calendly” line to the badge
true or false
Badge only.
Inline size
The box the inline scheduler sits in
min-width:320px, height about 700px
Raise the height if a scroll bar appears, or add data-resize="true" to let it grow.

hide_event_type_details

What it does

Hides your photo, name, event duration, location and description

Values

1

Notes

For a link to one event type. All plans.

hide_landing_page_details

What it does

Hides the same details on a page that lists all your events

Values

1

Notes

For a personal or team landing page. With both parameters, the event description may still show.

hide_gdpr_banner

What it does

Hides Calendly’s cookie banner

Values

1

Notes

Only if your own site handles cookie consent (GDPR, CCPA).

background_color, text_color, primary_color

What it does

Background, text, and button and link color of the scheduling page

Values

Hex without #, e.g. 0069ff

Notes

Paid Calendly plans only. The button label switches to black or white for contrast.

name, first_name, last_name, email

What it does

Fills in the booking form

Values

Text; spaces as %20

Notes

Use first_name and last_name if your form asks for them separately.

a1, a2 …

What it does

Answers your own booking questions

Values

Text; for checkboxes and radio buttons the option number, e.g. a3=2,3

Notes

The number is the question’s position on the form. “Other” fields and SMS reminder numbers can’t be prefilled.

Button text, color, textColor

What it does

Label and colors of the floating badge

Values

Text; hex with #, e.g. #0069ff

Notes

Options of Calendly.initBadgeWidget, not link parameters. Calendly lists color and button text changes as paid-plan features.

branding

What it does

Adds a “powered by Calendly” line to the badge

Values

true or false

Notes

Badge only.

Inline size

What it does

The box the inline scheduler sits in

Values

min-width:320px, height about 700px

Notes

Raise the height if a scroll bar appears, or add data-resize="true" to let it grow.

Calendly Help Center: How to customize your embed ↗

If the scheduler doesn’t look right

The inline scheduler has its own scroll bar or is cut off

Increase the height in the code, e.g. to 750px, or add data-resize="true". Calendly recommends only one auto-resizing embed per page and no dropdown questions with it.

Nothing appears on the page

Your site builder may strip <script> tags. Paste the code into an HTML or custom code block that keeps scripts, and check that the link opens in a browser.

The pop-up opens as a plain page or looks unstyled

The pop-up and badge also need Calendly’s stylesheet: keep the widget.css line from the generated code.

Colors don’t change

Color options work on paid Calendly plans only. In the link, write hex values without #: primary_color=0069ff.

Your name and event details appear twice

Turn on Hide event details. Use hide_event_type_details=1 for one event and hide_landing_page_details=1 for a page with all events.

Prefilled fields stay empty

Check the parameter names (name, email, a1) and write spaces as %20. Answers go by the question’s position on your booking form.

The floating badge covers another button

The badge sits in the bottom right corner. Move it with CSS: .calendly-badge-widget { right: auto !important; left: 20px !important; }

Inline, pop-up or badge — which to choose

Type
What visitors see
Good for
Keep in mind
Inline
The scheduling page right inside your page
A dedicated “Book a call” or “Contact” page where booking is the main action
Needs room: at least 320px wide and about 700px high
Pop-up on a button or link
Your own button or text link; the scheduler opens over the page
Pricing and service pages, where booking is one option among several
Place the button where people decide; it uses your site’s button style
Badge
A floating button in a corner of every page it’s on; the scheduler opens over the page
Sites where visitors may want to book from any page
Can overlap a chat or cookie button; move it with CSS

Inline

What visitors see

The scheduling page right inside your page

Good for

A dedicated “Book a call” or “Contact” page where booking is the main action

Keep in mind

Needs room: at least 320px wide and about 700px high

Pop-up on a button or link

What visitors see

Your own button or text link; the scheduler opens over the page

Good for

Pricing and service pages, where booking is one option among several

Keep in mind

Place the button where people decide; it uses your site’s button style

Badge

What visitors see

A floating button in a corner of every page it’s on; the scheduler opens over the page

Good for

Sites where visitors may want to book from any page

Keep in mind

Can overlap a chat or cookie button; move it with CSS

All three load the same script, https://assets.calendly.com/assets/external/widget.js, and show the same booking page with the same link parameters.

How to embed Calendly on your website

  1. Copy your Calendly link

    In Calendly, copy the link to your scheduling page or a single event.

  2. Choose options

    Pick the color and what to hide.

  3. Paste the code

    Add the code to an HTML block where the calendar should appear.

Frequently asked questions

More Embed Code Generators

iFrame Generator

Build a responsive iframe for any page, form or app.iFrame Generator