How to embed Calendly in a React app

If you're building a React app, you can embed Calendly to let users book time without leaving your site. This guide covers your options and offers tips for smooth implementation.

Use the react-calendly package

The easiest way to embed Calendly in React is to use the third-party react-calendly package. While not maintained by Calendly, many developers use it in production.

To get started:

Install the package using npm or yarn:

npm install react-calendly
# or
yarn add react-calendly

Then, import and use the component in your React code:

import { InlineWidget } from "react-calendly";

function BookingPage() {
return (
<InlineWidget url="https​:​//calendl​y.com/YOUR​_LINK" />
);
}

This adds an inline embed to your page.

Other available components

The react-calendly package also supports:

• PopupText – renders a text link that opens a popup
• PopupButton – renders a button that opens the scheduler
• PopupWidget – adds a floating widget to your app

Visit the react-calendly package for full examples and customization options.

Customize your embed

You can pass props to tailor the widget. For example, you can:

• Pre-fill the booking form with invitee details
• Track UTM parameters
• Control the height and style

Example with props:

<InlineWidget
url="https​:​//calendl​y.com/YOUR​_LINK"
styles={{ height: '700px' }}
utm={{ utmSource: 'facebook', utmCampaign: 'spring_sale' }}
prefill={{
name: 'Jane Doe',
email: 'jane@example.com'
}}
/>

Handling layout issues

Calendly embeds use iframes. Some React layouts—especially mobile-first designs—can cause sizing or scrolling issues.

If you notice scroll problems (common on iOS):

• Ensure the container has at least 700px height
• Avoid overflow: auto or fixed-height containers
• Test layout using browser dev tools

Use the standard embed script (no package)

If you prefer not to use react-calendly, you can embed Calendly with the standard JavaScript and a useEffect hook.

Example:

import { useEffect } from "react";

function BookingPage() {
useEffect(() => {
const script = document.createElement("script");
script.src = "https​:​//assets.​calendly.c​om/assets/​external/w​idget.js";
script.async = true;
document.body.appendChild(script);

window.Calendly.initInlineWidget({
url: "https​:​//calendl​y.com/YOUR​_LINK",
parentElement: document.getElementById("calendly-embed"),
});
}, []);

return <div id="calendly-embed" style={{ minWidth: "320px", height: "700px" }} />;
}

This gives you full control, similar to embedding Calendly in regular HTML.