Calendly embed

Drop any public Calendly link into your app — inline iframe or popup button — with theme-aware colors.

Calendly URL

Paste any public Calendly link (event type, team, or one-off). Press Enter or blur the field to load it.

Installation

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/calendly-embed.json

Usage

Pass any public Calendly link as `url`. The widget assets load on demand.

TSImport

import {
  CalendlyEmbed,
  CalendlyPopupButton,
} from "@/components/blocks/calendly-embed";

TSExample

import { CalendlyEmbed } from "@/components/blocks/calendly-embed";

export function BookingSection() {
  return (
    <CalendlyEmbed
      url="https://calendly.com/your-team/intro"
      height={720}
      hideGdprBanner
    />
  );
}

Composition

Two exports — an inline iframe widget and a popup-button trigger.

CalendlyEmbed         — inline iframe widget for any public Calendly link
CalendlyPopupButton   — button that opens the scheduling flow as a modal popup

Calendly's widget.js + widget.css are loaded on demand the first time either
component mounts (inline) or is clicked (popup). No <Script> tag setup needed.
The inline embed uses Calendly.initInlineWidget({ resize: true }) so the iframe
height auto-fits the booking widget's content.

Inline

Drop the embed into any container — pass your Calendly URL and a height.

Calendly URL

Paste any public Calendly link (event type, team, or one-off). Press Enter or blur the field to load it.

Themed

Pass `primaryColor`, `backgroundColor`, and `textColor` to match your brand.

Calendly URL

Paste any public Calendly link (event type, team, or one-off). Press Enter or blur the field to load it.

Popup button

Trigger the scheduling flow as a modal overlay instead of inline.

Calendly URL

Paste any public Calendly link (event type, team, or one-off). Press Enter or blur the field to load it.

API Reference

Props for each Calendly embed export.

CalendlyEmbed

Prop	Type	Default	Description
`url`	string	—	Any public Calendly link (event type, team, or one-off).
`height`	number	700	With `resize` enabled this is the minimum height; otherwise a fixed height in pixels.
`resize`	boolean	true	Auto-resize the iframe to fit the booking widget's content (Calendly's official `resize` flag).
`primaryColor`	string	—	Hex accent color (with or without `#`).
`backgroundColor`	string	—	Hex background color (with or without `#`).
`textColor`	string	—	Hex text color (with or without `#`).
`hideEventTypeDetails`	boolean	false	Hide the event-type details panel.
`hideGdprBanner`	boolean	true	Hide the GDPR cookie banner.
`hideLandingPageDetails`	boolean	false	Hide team-link landing-page details.

CalendlyPopupButton

Prop	Type	Default	Description
`url`	string	—	Any public Calendly link to open in the popup.
`label`	ReactNode	"Schedule time"	Button label.
`prefill`	object	—	Calendly prefill payload (name, email, customAnswers, …).
`utm`	object	—	UTM params attached to the booking session.