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# oryarn add react-calendlyThen, import and use the component in your React code:
import { InlineWidget } from "react-calendly";function BookingPage() {return (<InlineWidget url="https://calendly.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:
Example with props:
<InlineWidgeturl="https://calendly.com/YOUR_LINK"styles={{ height: '700px' }}utm={{ utmSource: 'facebook', utmCampaign: 'spring_sale' }}prefill={{name: 'Jane Doe',email: '[email protected]'}}/>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.com/assets/external/widget.js";script.async = true;document.body.appendChild(script);window.Calendly.initInlineWidget({url: "https://calendly.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.